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 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.

  • http://dev.iamntz.com Staicu Ionut

    very nice tutorial. I wrote something like this yesterday on my blog. The difference is i don’t say anything about WP. Just lists :P

  • Enrique

    Hi there, How are you?
    I’m testing these in the theme of the site, but I don’t know where to put the unobtrusive script, would you so kind in telling me?

    We are a nonprofitable organization that helps people with low resources.

    There is something more, I’m getting problems with the css, in IE the footer and the bottom line from the part of the top site is showing problems, could you give me some little hand?

    thanks you very much!

  • jbj

    Hi Enrique, sure I can help you.
    For the unobstructive script: in the head section of your header.php file:
    <script type=”text/javascript”>
    //place the script from the article here
    </script>

    There’s obviously a problem in your css (I went to your website), I don’t have the required tools right now, but I’ll find how to fix it today, and i’ll post the resultat here for you.

    Good luck with your organization! :)

  • http://haciendocamino.org.ar/ Enrique

    Incredible, you are a genius my friend, you fix it.

    A simple solution for a complicatred problem (for me haha)

    One more question, Im having a problem in firefox, the green menu appears in the top with some space in white and the other thing is that I added the script in the head section, but now I cant visualice the website in IE.

    Thanks man :)

  • jbj

    Enrique, in order to fix the css problem on your site, just add padding-left:0; to #nav li ul :)

  • jbj

    Thanks for your compliments, even if I’m far from being a Genius ;)

    You can fix the green bar problem by adding margin-top:-20px; to #topbar

    Have a nice day!

  • jbj

    For your ie problem, I guess it’s due to the quotes on the exemple I gave you to insert the javascript in the head section of your header.php file.
    You should replace it manually, i’m pretty sure it will solve the problem.

  • Enrique

    Is there any way you can see what I have done with the script? Because I deleted the quotes and but the menu doesn’t still appear.

    I tried to add the -20, but the menu in firefox disappeared.

    I don’t know if you can see it in IE, there is a problem with the line bottom of the top, its cuted? can you see it?

  • jbj

    There’s stillquotes in the javascript function, you should replace them all.
    I’m very surprised that the margin-top:-20px; to #topbar don’t work: I edited the file with FF addon web developper and it worked perfectly…

  • Enrique

    First off all thank you for you time man, very kind from your part.

    I will put the “margin-top:-20px” so you can see it in action. The problem appers in IE 7, IE 6 I dont know how it looks.

  • Enrique

    Wich ares the quotas?

    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(” sfhoverb”), “”);
    }}}
    if (window.attachEvent) window.attachEvent(”onload”, sfHover);

  • jbj

    To solving the IE problem, place this on the head section of header.php:

    #topbar: margin-top:-20px;

    the quotes is this symbol: : you need to replace it manually.

    Good luck :)

  • Jean-Baptiste Jung

    Add this on the head section of header.php:
    <!–[if IE]>
    <style type=”text/css”>
    #topbar: margin-top:-20px;
    </style>
    <![endif]–>

  • Jean-Baptiste Jung

    Ah, just remembered that WP replaces two “-” by “–”, so the code above is invalid and won’t work. You need to use a conditional comment: there’s a good article here.

  • Enrique

    hahah sorry, I think you are going to kill me, but I dont understand these so good.

    1) I think I have delete all the quotes, am I right?
    (If this is ok, it stills not working)

    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(sfhoverb),);}}}
    if (window.attachEvent) window.attachEvent(onload, sfHover);

    2) I think perhaps its my resolution, but when I see the website in IE, there is some space in with under the green footer, but I have a laptop and I see it ok there, how can I fix these problem?

    I hope these is the last, I don’t want to disturb you.

    Thank you very much, greetings from Argentine

  • Enrique

    I send you an email but I think your email its wrong: Mail Delivery Subsystem

  • jbj

    Contact me by email: jeanbaptistejung AT yahoo DOT com :)

  • http://kyleeslick.com Kyle Eslick

    @ JBJ – Great write up and thanks for supporting it in the comments.

  • Jean-Baptiste Jung

    @Enrique: Yeah you’re right! It’s yahoo DOT fr. Sorry for that! Write me up and we’ll fix the problem :)

    @Kyle: Thank, and no problem for support, I’m glad to help!

  • 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

  • egi

    thanks for the great code Jean…
    but i want to ask you how to make the drop down category displaying the list child category.??like yours on top…
    blogging–>>wordpress tips

  • http://tentangcad.com Edo

    Hi Jean,
    Very nice tutorial. I use it for my blog and works perfectly. Thanks.
    Is it possible to add some more codes, so the sub-categories pop up on the side when the pointer is above the main category? I think it will be neat.

    Thanks again :)

  • Pingback: OpenBook22

  • http://www.SEOAdsenseThemes.com SEOAdsenseThemes.com

    Great article. Perhaps the most useful article when it comes to making dropdown categories list. I’ve bookmarked it and might implement a dropdown categories list in one of my WP themes in development.

  • Pingback: Top 5 WordPress Navigation Menu Tutorials

  • freesky

    wonderful,I now intend to do such a menu

  • almanzarj

    hi guys this is a great guide! I have everything working except for IE6. I created a separate .js file and for some reason it does not work….any thoughts? is there a specific name or a directory this .js file should be in?

    any help would be great!

  • shawal

    Thanks for the tutorial….

    I got 1 question…

    In the dropdown menu, can i add subcategories in it…

  • Jake

    Hi!

    I am having dramas with the menu. When I hover on a Top menu the sub menu will display but hidden under the smooth gallery photos. It there a CSS coding that will overcome this at all.

    Please follow this link for a screen shot at what I’m talking about.

    http://www.epsilonfoundation.com.au/menu.jpg

  • Iaan

    Same problem as Shawal and Jake –
    Menu hidden behind Featured Content Slider & Want to disply another level of sub-pages. Please help!
    (www.twitter.com/iaanvn)

  • Iaan

    @Jake Adding “z-index:999;” here:

    #nav li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width: 174px;
    border-bottom: 1px solid #a9a9a9;
    z-index:999;
    }

    solved it for me.

  • http://mnrizal.wordpress.com Rizal

    thanks

  • Pingback: OpenBook Theme » buzinezzblog.com

  • PZ

    Not working in IE7. Please see site and advise.

    http://www.pztalks.com/everyday

  • http://haoneg.com guyha

    indeed, not working in IE7 nor in Chrome. works great in FF though.

  • http://latest-movies-songs.blogspot.com/ Kartik

    thanks for the help

  • Jim

    Hi,

    I want to use the dropdown categories on my blog and it’s working fine in Firefox 3, but its not working in IE.
    I’ve put this in header.php:

    GeekStuff

    cat_ID) != “”) {
    echo “”;
    wp_list_categories(‘orderby=id&show_count=0&title_li=
    &use_desc_for_title=1&child_of=’.$this_category->cat_ID);
    echo “”;
    }
    ?>

    I also put the IE hack code in my menu.js file:

    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);

    But it’s not working in IE. Can you help me?

  • Jim

    previous code for header.php is not printed right to the blogpost.

    It should be:

    Categories

    cat_ID) != “”) {
    echo “”;
    wp_list_categories(‘orderby=id&show_count=0&title_li=
    &use_desc_for_title=1&child_of=’.$this_category->cat_ID);
    echo “”;
    }
    ?>

  • Jim

    The code is still not shown correctly.
    If anyone has the solution for the dropdown menu problem in IE, please contact me!

  • fred

    Is there anyway to use images instead of textbased links?
    I tried but it does not work properly. When the mouse makes a move inside the menu it dissapears. Kinda hard to explain.

    I want only the toplinks to be images, the submenus should be text.

    Any help would be great :D

  • Matt

    I am new to css and I spent 2hrs trying to fix my code. It finally dawned on my that I had switched from firefox to IE, and when I went back to firefox everything was working exactly like it should have.

    I have written the below code into its own separate php file, and I then include that file at the top of my theme’s index.php file. This fixes all the problems dealing with IE. I would recommend everyone do this and hopefully we can take back the web from a company that thinks its above internet standards.

    Get your crappy ass browser off this site. If you want to view this site download or use one of the
    below supported web browsers below. I reccomend firefox, the others are still way better then IE.




    Download Firefox
    Download Opera
    Download Safari
    Download Chrome

  • Matt

    darn, the code didn’t show up, oh well… basically it looks for IE via php and tells them to download better browsers then dies.

  • Pingback: Draft created on April 12, 2009 at 7:15 pm

  • Pingback: 250 Wordpress Tutorials

  • Rachna

    Hi jbj

    Kindly go here and check ‘About’ in the menu bar.
    http://theyoungindia.com/wordpress/

    Could you tell me why the last name in the drop down menu does not appear properly? I am unable to understand it. :(
    Would be happy if you could give me some time for this.

    Love,
    Rachna

  • Eddie Gear

    Hi there,

    This is a very interesting post. I’ve never really tried this option on my theme, but I might just give it a try.

    Cheers,
    Eddie Gear

  • http://insegment.com Alex

    How to make to have in drop down menu 2 lines with submeniu, because a have 20 submeniu and one colon looks to long

  • http://insegment.com Alex

    By you example I need to have:

    Categorie 1 Categorie 2 Categorie 3
    Apple | iPod/iPhone |MAC | GNU
    Scripts| Internet |Vista | XP

    2 line by 4 submenu

  • 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

  • harry

    This is what I’m looking for. thanks

  • http://www.dmaireroa.com/ Danny Maireroa

    Hi there

    My category menu is on the left side-bar, and I want to have a fly-out menu at the end of a single category. Is this possible to do with this plugin?

    Thanks in advance
    CHEERS :)

  • Mahendra

    Hi Jean,

    My name is Mahendra from Indonesia. My url : http://love4live.com. CMS : WordPress 2.8.4
    After I read the article above, I start to follow your direction. But unfortunately until I wrote this email, I couldn’t make it happened. Drop-Down Menu is not working at all.

    So, at this moment I’m asking you for help to solve my dropdown menu problem. Fyi, I’m using Newsmatch theme (http://newwpthemes.com/wordpress-theme/news-match/).

    I really hope your kindness to help me. Thank you.

    Best regards,

    Mahendra

  • Daisy

    Thanks for sharing! Working on it on my localhost works great, I’m hoping it continues to work once I upload live. Thanks for the easy-to-follow instructions :)

  • Pritush

    In one of the theme i am using There is option to choose either choose a Pages or Categories in header, I want to display Page as well as Categories in drop down menu. This is the code of my menu ,
    “”

    <li class="”><a class="home" title="” href=”/”>

    “”
    how to do it ?

  • kurich

    It’s work like a charm, but the problem is, when I want just show not all categories, the dropdown categories won’t work? what should I do? sorry for my bad grammar. thanks.

  • http://sergibosch.com sergi bosch

    i believe that class of “clearfloat” in the is unnecessary. correct? it doesn’t appear in the stylesheet…

  • http://www.ivanavanderveen.com Ivana

    Thank you so much for this!!

    ?Ivana

  • http://bikramkawan.com.np symk

    i tried many time to initialize drop down menu in my site but i couldn’t get that but this tutorial help me to get drop-down menu .
    thanks for posting step by step tutorials.

  • Tamim

    this is nice and clean drop down menu

    thanks
    Tamim

  • http://actyp.com Peter

    Hi Jean-Baptiste.

    Can you pls have a look at the page and advise how to adjust the menu.

    Cheers,

    Peter

  • http://www.arq.ufsc.br/petarq/ Miguel

    Hi Jean-Baptiste!

    I’m having problems.. my drop-down menu is not working. If you could take a look at my website, maybe you could help me..

    Thank you very much!

    Hugs from Brazil!

  • maaseo

    Hey Monsiur Jean baptiste,

    you are the Dude …. (this is a compliment of the highest order).

    Thankyou for this snippet of code.

    I don’t get much time to work my WP blogs but I think of them often.
    This problem of handling the Menu’s has been bothering me for about 6months.
    Thankyou for removing this monkey from my back.

    I knew there had to be a convenient way to handle this problem from a WordPress point of view as I find the whole package to be really well written, well supported and definately one of the finest CMS systems around.

    mainly because total coder cat dudes like yoourself contribute from their hearts and minds.

    Freedom to express.

    thanks – M

  • Mustafa

    hi,
    i love this, it works really well and my problem with the dropdown menu disappearing behind my image was also answered on this page so i’m really happy.

    however i have two questions.

    1. is it possible to make the space for the menu extend all the way across the page? at the moment it simply stops after my final menu item and i would like it to end on the right hand side of the page

    2. how do i add simple line of padding underneath the menu? just a couple of pixels to make it prettier.

    sorry for asking probably easy questions but i dont know css and hope someone can help me.

  • http://swiftmouse.com Hoby

    Thanks, this allowed me to make a wp template smarter for a client.

  • landocz

    ah….. hello … this dropdown menu doesn’t work on any IE browsers

  • http://makecg.com makecg

    Is there a way to make drop down Archives with this?

  • Pingback: Wordpress Kullan?m ve geli?tirme kaynaklar? | SohbeTCix.NeT | Chat Sohbet Muhabbet Odalar?

  • http://www.iespower2control.com js

    i used your method on my website and it works but how do i get an arrow to appear next to those headings that actually have the dropdown? otherwise the visitor has no idea that a dropdown exists under that heading.

  • Paul Lewis

    Is the procedure much different if I would like to place the menubar above my header?

  • Pingback: 60+ Awesome WordPress Tutorials | The Best WP Themes Online

  • http://www.anthonyanselmo.com Anthony Anselmo

    works great but any items under a page with children pages will get cut off. So to list any other pages they need to be above a page with children. Is there a way to fix this?

  • Peter Gagnon

    Great tutorial, but if the menu opens over a GoogleAd, it gets cut-off…

    Anybody has a solution?

    • http://emiliovelis.com Snipe

      Try tweaking the z-index.

  • http://www.hoitytoity.net ron

    Strange, the nav menu is working in IE but not firefox. What am I missing? Also, how do I get rid of the last “|”?

    hoitytoity.net is the website

  • Pingback: WordPress: Tutorials and Resources for Designers and Developers | Freelance Website Designer / Coder

  • insanoff

    How hide sub-menu when home is opened?

  • http://www.musiciansmissions.com timmytomcat

    Can anyone tell me why my menu (which now has Categories) is a vertical list, rather than a horizontal list under the header image? I am trying to do this incrementally, so I have not done anything yet with CSS. At this time I am not concerned with IE6.
    Many thanks in advance.
    Tim

    • http://www.musiciansmissions.com timmytomcat

      P.S. I am using the 2010 theme.
      Tim

  • Hussain

    hey! thanks for the tutorial!
    Unfortunately I have a problem with categories drop down.. I am unable to see the categories I have created..

  • Hussain

    hey! thanks for the tutorial!
    Unfortunately I have a problem with categories drop down.. I get only one category that is default one “uncatogorized”.. and I am working offline using WAMP server does that matters?
    appreciate any help!

  • Hussain

    Hey! My previous problem was too silly… I wasn’t getting drop down because there were no post in the categories. lol!

  • Jason

    Hi all. :)

    Great tutorial. Posted the code exactly as is, works great… except for the drop-down.

    Basically, I want a dropdown to display a list of subpages when the page parents is hovered on in the navar.

    Help? Thanks! :)

  • Pingback: Navigation « Richard Allen

  • http://www.starfallzone.com starfall

    totally a very helpful tutorial. I really love the idea and its so simple which users can handle it easily. Hope to see more wordpress tutorials. thanks admin this is a great support.

  • Pingback: WordPress Arena: A Blog for WordPress Developers, Designers and Blogger

  • http://www.powerbuildermarketing.com Andrew

    Hi

    I plugged the code into my site and it seems to work quite well apart from in Firefox the menu options along the bar are white with no text displaying and only divider lines between each menu option until you hover over it it then shows up the menu item in blue with the text showing in white as you would want it? Any ideas? Works ok in IE6.

    Apart from that works fine. Also mean’t to say that in IE6 the categories & uncategorized drops down but is white with no text until you move the mouse into it.

    Thanks for any pointers.

  • http://www.vividdream.net terraelise

    wow. this actually worked, even in 3.4.2. THANK YOU!!

  • http://www.internetspeedtest.co.in Amrish

    I have added this to my blog . But its is showing a tab named categories only . Drop down is not working