Tired of your old navigation? So, what about creating a Magazine-style drop-down menu?
I propose here a drop-down menu listing your pages and sub pages, including one last item to show up your categories directly in the menu.
HTML and PHP
We will start by using WordPress core functions in order to retrieve our pages and categories. Edit the header.php of your theme, and replace your old nav code by this one:
<ul id="nav" class="clearfloat">
<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
<?php wp_list_pages('title_li='); ?>
<li class="cat-item"><a href="#">Categories</a>
<ul class="children">
<?php wp_list_categories('orderby=name&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>
</li>
</ul>
This code will make a list of all our pages and subpages, as well as a last list element named “Categories”. When an user will hover top level pages (in case of a page menu) or top level categories, we will show up the related sub pages/categories.
CSS
Even if the code is fully functional, our script needs a good CSS styling. This CSS, which was taken from Darren Hoyt’s free Mimbo Theme, is perfect for what we want to do.
#nav{
background:#222;
font-size:1.1em;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
}
#nav a, #nav a:hover {
display: block;
text-decoration: none;
border:none;
}
#nav li {
float: left;
list-style:none;
border-right:1px solid #a9a9a9;
}
#nav a, #nav a:visited {
display:block;
font-weight:bold;
color: #f5f5f4;
padding:6px 12px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
background:#000;
text-decoration:none
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 174px;
border-bottom: 1px solid #a9a9a9;
}
#nav li li {
width: 172px;
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
background: #777;
}
#nav li li a, #nav li li a:visited {
font-weight:normal;
font-size:0.9em;
color:#FFF;
}
#nav li li a:hover, #nav li li a:active {
background:#000;
}
#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;
}
a.main:hover {
background:none;
}
Javascript
Modern browsers (Safari, Firefox, Opera, and even Internet Explorer 7) will not have any problem with the :hover pseudo-class on li elements. But as we can easily guess it, the obsolete IE6 can’t deal with that.
In order to make our script compatible with IE6, we’ll need to charge this little unobtrusive Javascript code, in the head section our our HTML document, or even better, in a separate .js file.
<![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
Now, your new drop-down menu is ready and will give your blog a professional look.
Jean-Baptiste Jung
Jean-Baptiste Jung is a blogger/web developer/web designer who lives in the French-Speaking part of Belgium. Jean-Baptiste maintains two blogs: Cats Who Code.com where he and other authors write about Web Development, Web design, Blogging tips and WordPress, and WPRecipes.com where Jean shares useful WordPress snippets on a daily basis. When he's not blogging or having fun with codes, Jean loves to spend time with his wife and cat, and traveling everywhere he can.
I tried it, but the recent updates have given me errors like this one:
Google+ Comments for WordPress requires PHP ...
I want to learn more and more about WordPress development stuff, glad to know about this.. 
I agree with all of them! :) 
Thanks Lior.
http://www.shoppingspout.com
This is really a fantastic post for backing up wordpress. 
I would hardly qualify WP as a CMS but yes, it does have the ability to add pages and then ...
There Are 76 Responses So Far »
Pingback: Le guest-blogging, une manière originale de promouvoir son blog
Pingback: DigiZen » Blog Archive » Enlaces en Diigo 05/20/2008
Pingback: Magazine WordPress Theme: OpenBook en rubendomfer
Pingback: OpenBook22
Pingback: Top 5 WordPress Navigation Menu Tutorials
Pingback: OpenBook Theme » buzinezzblog.com
Pingback: Draft created on April 12, 2009 at 7:15 pm
Pingback: 250 Wordpress Tutorials
Pingback: Wordpress: Tutorials and Resources for Designers and Developers
Pingback: Top 5 Tutoriais Menú de Navegación para WordPress | Ajuda Wordpress em Português
Pingback: Build your first wordpress theme with these 4 easy-to-follow tutorials | Graphic Design Blender
Pingback: Wordpress Kullan?m ve geli?tirme kaynaklar? | SohbeTCix.NeT | Chat Sohbet Muhabbet Odalar?
Pingback: 60+ Awesome WordPress Tutorials | The Best WP Themes Online
Pingback: WordPress: Tutorials and Resources for Designers and Developers | Freelance Website Designer / Coder
Pingback: Navigation « Richard Allen
Pingback: WordPress Arena: A Blog for WordPress Developers, Designers and Blogger