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.

  1. Staicu Ionut says:

    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

  2. Enrique says:

    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!

  3. jbj says:

    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! :)

  4. Enrique says:

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

  5. jbj says:

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

  6. jbj says:

    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!

  7. jbj says:

    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.

  8. Enrique says:

    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?

  9. jbj says:

    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…

  10. Enrique says:

    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.

  11. Enrique says:

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

  12. jbj says:

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

  13. Jean-Baptiste Jung says:

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

  14. Jean-Baptiste Jung says:

    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.

  15. Enrique says:

    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

  16. Enrique says:

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

  17. jbj says:

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

  18. Kyle Eslick says:

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

  19. Jean-Baptiste Jung says:

    @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!

  20. egi says:

    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

  21. Edo says:

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

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

  23. freesky says:

    wonderful,I now intend to do such a menu

  24. almanzarj says:

    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!

  25. shawal says:

    Thanks for the tutorial….

    I got 1 question…

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

  26. Jake says:

    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

  27. Iaan says:

    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)

  28. Iaan says:

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

  29. PZ says:

    Not working in IE7. Please see site and advise.

    http://www.pztalks.com/everyday

  30. guyha says:

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

  31. Kartik says:

    thanks for the help

  32. Jim says:

    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?

  33. Jim says:

    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 “”;
    }
    ?>

  34. Jim says:

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

  35. fred says:

    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

  36. Matt says:

    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

  37. Matt says:

    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.

  38. Rachna says:

    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

  39. Eddie Gear says:

    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

  40. Alex says:

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

  41. Alex says:

    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

  42. harry says:

    This is what I’m looking for. thanks

  43. 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 :)

  44. Mahendra says:

    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

  45. Daisy says:

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

  46. Pritush says:

    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 ?

  47. kurich says:

    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.

  48. sergi bosch says:

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

  49. Ivana says:

    Thank you so much for this!!

    ?Ivana

  50. symk says:

    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.

  51. Tamim says:

    this is nice and clean drop down menu

    thanks
    Tamim

  52. Peter says:

    Hi Jean-Baptiste.

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

    Cheers,

    Peter

  53. Miguel says:

    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!

  54. maaseo says:

    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

  55. Mustafa says:

    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.

  56. Hoby says:

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

  57. landocz says:

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

  58. makecg says:

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

  59. js says:

    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.

  60. Paul Lewis says:

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

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

  62. Peter Gagnon says:

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

    Anybody has a solution?

  63. ron says:

    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

  64. insanoff says:

    How hide sub-menu when home is opened?

  65. timmytomcat says:

    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

  66. Hussain says:

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

  67. Hussain says:

    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!

  68. Hussain says:

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

  69. Jason says:

    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! :)

  70. starfall says:

    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.

  71. Andrew says:

    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.

  72. terraelise says:

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

  73. Amrish says:

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

Trackbacks/Pingbacks »

  1. Le guest-blogging, une manière originale de promouvoir son blog says:
  2. DigiZen » Blog Archive » Enlaces en Diigo 05/20/2008 says:
  3. Magazine WordPress Theme: OpenBook en rubendomfer says:
  4. OpenBook22 says:
  5. OpenBook Theme » buzinezzblog.com says:
  6. Draft created on April 12, 2009 at 7:15 pm says:
  7. 250 Wordpress Tutorials says:
  8. Top 5 Tutoriais Menú de Navegación para WordPress | Ajuda Wordpress em Português says:
  9. Wordpress Kullan?m ve geli?tirme kaynaklar? | SohbeTCix.NeT | Chat Sohbet Muhabbet Odalar? says:
  10. 60+ Awesome WordPress Tutorials | The Best WP Themes Online says:
  11. WordPress: Tutorials and Resources for Designers and Developers | Freelance Website Designer / Coder says:

Tweetbacks »