CSS Vertical Menu Tutorials-Menu 12

Posted by Lasantha Bandara on December 5th, 2009 File Under : css0 Comment

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

CSS Vertical Menu Tutorials

<style type='text/css'>
#menu12 {
width: 200px;
margin: 10px;
}

#menu12 ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu12 img {
border: none;
}

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

#menu12 li a:link, #menu12 li a:visited {
color: #666;
display: block;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/Sw9JwyhLfDI/AAAAAAAAAWs/frVNeEIg94E/menu12.gif);
padding: 10px 0 0 35px;
}

#menu12 li a:hover, #menu12 li #current {
color: #000;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/Sw9JwyhLfDI/AAAAAAAAAWs/frVNeEIg94E/menu12.gif) 0 -32px;
padding: 10px 0 0 35px;
}
</style>

Note :Please Host menu12.gif yourself.
CSS Vertical Menus Tutorials

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="menu12">

<ul>

<li><a id="current" href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

You are done.

Demo

File Under : css

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.