Vertical Navigation menu


Click here to view live demo


The way to get this to function properly is its pseudo class (read more about that here) a.menu:link, a.menu:visited, a.menu:active{
border-left: 7px solid #131313;
font: italic 8px Arial, Helvetica, sans-serif;
line-height: 100px;
text-transform: uppercase;
letter-spacing: 3px;
text-align: right;
background-color: #000;
color: #F8F8F8;
padding: 15px;
width: 60px;
height:60px;
display: block;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;}

a.menu:hover {
line-height: 25px;
background-color: #0a0a0a;
width:200px;
height:10px;}

Elements

a.menu:link, a.menu:visited, a.menu:active Font: The style, look, and size of your navigation text.
Line-height: This specifies the space between the lines of the link names .You want it to be somewhere in between 25-100.
Text-transform
Letter-spacing
Text-align
Background-color
Color: Changes the font color.
Width: How thick the link "block" will be.
Height: How tall the link "block" will be.
Padding: This generates space around the link block and adds to the width and height. This helps give extra space that just using width and height won't give.
Display: Do not delete or change.
-webkit-transition: This is what makes the link move smoothly when you hover over it. DO NOT DELETE.
-moz-transition: This is what makes the link move smoothly when you hover over it. DO NOT DELETE.
-o-transition: This is what makes the link move smoothly when you hover over it. DO NOT DELETE.

a.menu:hover
line-height: This number should be smaller than the line-height number of the first/main class. A good rule of thumb is to make the number half of first line-height number.
background-color: Changes the background color
width: You want this number to be larger than the first/main class width number.
height: You want this number to be smaller than the first/main class height number.

transition

The transition is the most important part of the code. If you don't know much about coding, don't mess with what is already there. For guidance use this to help edit and change the transitions if you want it different.

Navigation containter & HTML code

< div id="nav">
< a class="menu" href="http://onyxhotel.three-words.net/">link
< a class="menu" href="http://onyxhotel.three-words.net/">link
< a class="menu" href="http://onyxhotel.three-words.net/">link
< /div>
Erase the space before the "a class" and "/div" to get the code to work properly.

The "nav" containter will position the menu.
#nav{
width:300px;
}


Coding is not easy so if you are having problems with this tutorial let me know in the cbox!