Nice Vertical Menu Bar With jQuery
This tutorial is about another navigation menu. Using jQuery and CSS
How To Add This Nice Menu To Your Blog?
1. Log in to your dashboard--> Template- -> Edit HTML
2. Search "Ctrl+F" and find the following code: ]]></b:skin> and before it paste the next one:
2. Search "Ctrl+F" and find the following code: ]]></b:skin> and before it paste the next one:
}
ul#navigation .search a {
background-image: url(http://img21.imageshack.us/img21/7365/searchl.png);
}
ul#navigation .podcasts a {
background-image: url(http://img834.imageshack.us/img834/8079/camerae.png);
}
ul#navigation .rssfeed a {
background-image: url(http://img263.imageshack.us/img263/5871/rssd.png);
}
ul#navigation .photos a {
background-image: url(http://img508.imageshack.us/img508/2226/ipodl.png);
}
ul#navigation .contact a {
background-image: url(http://img808.imageshack.us/img808/5498/mailos.png);
}
You can see in the upper code that exist a couple lines with some images (blue lines). Those images are for the image that will appear in the menu. When you will create another menu item you have to add your image like in those lines.
Exemple: For an Download menu item you must add this line:
ul#navigation .download a { background-image: url(link to the image); }
<script type="text/javascript"> $(function() { $('#navigation a').stop().animate({'marginLeft':'-85px'},1000); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-2px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'-85px'},200); } ); }); </script>
4. The next step is to find </body> and before it paste the next code:
<ul id="navigation"> <li class="home"><a href="" title="Home"></a></li> <li class="about"><a href="" title="About"></a></li> <li class="search"><a href="" title="Search"></a></li> <li class="photos"><a href="" title="Photos"></a></li> <li class="rssfeed"><a href="" title="Rss Feed"></a></li> <li class="podcasts"><a href="" title="Podcasts"></a></li> <li class="contact"><a href="" title="Contact"></a></li> <a href="http://gigabyteservice.com/" target="_blank" title="Free website designing in india"> </a> </ul>
When you add a new menu item make sure that you add the class to display the image