Home
About
Forums
Advertise
Contact
Subscribe to RSS Feed
Add to My Yahoo
Subscribe in NewsGator
Subscribe with Bloglines
Add to Netvibes
Add to GoogleMulti level drop down menu for blogger
Posted by Nitesh Kothari on 12 December 2008|
Share this post:
|
|
18 Comments
A good site navigation is very important. Every visitor or reader searches for the navigation to read more and more on the blog. I have visited many sites which do not have a site navigation at all. It becomes really difficult to search something on such blogs. I believe, one should have a multi level drop down menu, which gives better accessibility of the content to the readers. Using such menu, it becomes very easy to check almost all blog posts of a blog. Taylor Thompson, owner of Video blogging tips mailed me and asked how to design a drop down menu for the website or blog, so i decided to write a tutorial about it.
Step 1: CSS Code
Copy and paste following code just above </b:skin>
#NavbarMenu {background: #72a8d2;width: 100%;height: 25px;font-size: 12px;font-family: Arial, Tahoma, Verdana;color: #FFF;font-weight: bold;padding: 0;vertical-align:middle;margin-bottom:5px;}
#nav {margin: 0;padding: 0;vertical-align:middle;}
#nav ul {float: left;list-style: none;margin: 0;padding: 0;}
#nav li {list-style: none;margin: 0;padding: 0;}
.current_page_item {background:#dee5e5;color:#2299ff;border-bottom:1px solid #dee5e5;}
#nav li a, #nav li a:link, #nav li a:visited {color: #FFF;display: block;font-size: 15px; font-family: Georgia, Times New Roman;font-weight: normal;text-transform: none;margin: 0; padding: 3px 15px 3px;text-decoration: none; }
#nav li a:hover {background: #dee5e5;color: #2299ff;margin: 0;padding: auto 15px auto; text-decoration: none;vertical-align:middle;border-bottom:1px solid #dee5e5;}
#nav li a:active {background: #dee5e5; color: #2299ff;margin: 0;padding:auto 15px auto; text-decoration: none;border-bottom:1px solid #dee5e5;}
#nav li li a, #nav li li a:link, #nav li li a:visited {background:#555; width: 150px; color: #FFF; font-size: 14px; font-family: Georgia, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #FFF;}
#nav li li a:hover, #nav li li a:active {background: #777; color: #FFF; padding: 7px 10px; }
#nav li {float: left; padding: 0;}
#nav li ul {z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0;padding: 0;}
#nav li ul a {width: 140px;}
#nav li ul ul { margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
#nav {margin: 0;padding: 0;vertical-align:middle;}
#nav ul {float: left;list-style: none;margin: 0;padding: 0;}
#nav li {list-style: none;margin: 0;padding: 0;}
.current_page_item {background:#dee5e5;color:#2299ff;border-bottom:1px solid #dee5e5;}
#nav li a, #nav li a:link, #nav li a:visited {color: #FFF;display: block;font-size: 15px; font-family: Georgia, Times New Roman;font-weight: normal;text-transform: none;margin: 0; padding: 3px 15px 3px;text-decoration: none; }
#nav li a:hover {background: #dee5e5;color: #2299ff;margin: 0;padding: auto 15px auto; text-decoration: none;vertical-align:middle;border-bottom:1px solid #dee5e5;}
#nav li a:active {background: #dee5e5; color: #2299ff;margin: 0;padding:auto 15px auto; text-decoration: none;border-bottom:1px solid #dee5e5;}
#nav li li a, #nav li li a:link, #nav li li a:visited {background:#555; width: 150px; color: #FFF; font-size: 14px; font-family: Georgia, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #FFF;}
#nav li li a:hover, #nav li li a:active {background: #777; color: #FFF; padding: 7px 10px; }
#nav li {float: left; padding: 0;}
#nav li ul {z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0;padding: 0;}
#nav li ul a {width: 140px;}
#nav li ul ul { margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
Step:2 HTML Code
Copy and paste following code to body section(wherever you want to place this dropdown menu).
<div id='NavbarMenu'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Blogger Hacks</a>
<ul>
<li>
<a href='#'>Most Popular</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Most Recent</a></li>
<li><a href='#'>Most Commented</a></li>
<li><a href='#'>Top Rated</a></li>
<li><a href='#'>All Blogger Hacks</a></li>
</ul>
</li>
<li><a href='#'>Blogger Widget</a>
<ul>
<li>
<a href='#'>Most Popular</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Most Recent</a></li>
<li><a href='#'>Most Commented</a></li>
<li><a href='#'>Top Rated</a></li>
<li><a href='#'>All Blogger Hacks</a></li>
</ul>
</li>
<li><a href='#'>Blogger Templates</a></li>
<li><a href='#'>Tag Cloud</a></li>
<li><a href='javascript:togglediv("headlines")'>Headlines</a></li>
</ul>
</div>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Blogger Hacks</a>
<ul>
<li>
<a href='#'>Most Popular</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Most Recent</a></li>
<li><a href='#'>Most Commented</a></li>
<li><a href='#'>Top Rated</a></li>
<li><a href='#'>All Blogger Hacks</a></li>
</ul>
</li>
<li><a href='#'>Blogger Widget</a>
<ul>
<li>
<a href='#'>Most Popular</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Most Recent</a></li>
<li><a href='#'>Most Commented</a></li>
<li><a href='#'>Top Rated</a></li>
<li><a href='#'>All Blogger Hacks</a></li>
</ul>
</li>
<li><a href='#'>Blogger Templates</a></li>
<li><a href='#'>Tag Cloud</a></li>
<li><a href='javascript:togglediv("headlines")'>Headlines</a></li>
</ul>
</div>
Final Words
I am not explaining this hack in detail, because i will be writing a detailed post about multi level drop down menu which works in all the browsers. This menu does not work well with IE. submenus don't appear on mousehover. Expect a better version soon. Leave a comment here, if you have any doubts or queries.
