Friday, December 05, 2008

Making CSS Vertical Navigation Menu

Let's learn-sharing in the CSS. This time I try to encourage the sharing of how to create CSS Vertical Navigation Menu.

Step by step how to create CSS Vertical Navigation Menu is as follows:

1. copy the code below:

/ * Extra-menu * /

#menu {
width: 200px;
margin: 10px;
}

#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
color: #666;
display: block;
background: url(http://i288.photobucket.com/albums/ll179/ahnning/menu.gif);
padding: 10px 0 0 35px;
}

#menu li a:hover {
color: #000;
background: url(http://i288.photobucket.com/albums/ll179/ahnning/menu.gif) 0 -32px;
padding: 10px 0 0 35px;
}

/ * End of the menu * /

2. Paste the code before : ]]></b:skin>

3. And then save the changes. The next step, we will add the code below:

<div id="menu">
<ul>
<li><a href="url" target="_blank" >Link 1</a></li>
<li><a href="url" target="_blank" >Link 2</a></li>
<li><a href="url" target="_blank" >Link 3</a></li>
<li><a href="url" target="_blank" >Link 4</a></li>

and so on ..

</ul>
</div>


in the body, or on the Page Elements, by pressing "add a gadget" and then click the HTML / Javascript

Congratulations to try

3 comments:

  1. Thanks your tutorial.... Always enjoy your time

    ReplyDelete
  2. wah mas bener2 mantep neh template na..
    entar sy coba bikin juga ah :D

    ReplyDelete
  3. Great tutorial. I learn a lot. Thanks

    ReplyDelete