WordPress: “Magazine style” Horizontal dropdown menu

by Jean. 124 Comments -

Even if most blogs have a very simple navigation, Worpress allows you to create very advanced menus. In this tutorial, I’ll show you how to create a “Magazine Style” horizontal drop-down menu, for your categories or even your pages.

Wordpress: Menu de catégories horizontal

The php

The first thing we have to do is to use php to get or pages and subpages (or our categories/sub-categories). Paste the following code in the header.php file of your theme.

<ul id="nav2" class="clearfloat">
	<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
 	<?php wp_list_categories('orderby=name&exlude=181&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>

The CSS

As usual, the CSS will control the look and feel of html elements, but it will also allows us to display only the sub-categories of the selected category. No Javascript is needed in this exemple, excepted if you want to ensure backward compatibility with Internet Explorer 6.

#nav2{
        background-color: #202020;
        display: block;
        font-size:1.1em;
        height:50px;
        width:100%;
}

#nav2, #nav2 ul {
	line-height: 1;
	list-style: none;
}

#nav2 a ,#nav2 a:hover{
	border:none;
	display: block;
	text-decoration: none;
}

#nav2 li {
	float: left;
	list-style:none;
}

#nav2 a,#nav2 a:visited {
	color:#109dd0;
	display:block;
	font-weight:bold;
	padding:6px 12px;
}


#nav2 a:hover, #nav2 a:active {
	color:#fff;
	text-decoration:none
}	

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

#nav2 li li {
	width: auto;
}

#nav2 li li a,#nav2 li li a:visited {
        color:#109dd0;
	font-weight:normal;
	font-size:0.9em;
}

#nav2 li li a:hover,#nav2 li li a:active {
	color:#fff;
}	

#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
	left: 30px;
}

Once you added the lines above to your stylesheet, you’ll have a modern, accessible and xhtml/css valid fancy menu. If you want to ensure backward compatibility with IE6, you’ll have to add this bit of Javascript:

<!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav2").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);

//--><!]]>

Paste this script into an external file, or in the head section of your index.php file. Once done, your blog now have a fancy dropdown horitontal menu!

Comments (124) - Leave yours

  1. Web 2.0 Announcer said:

    WordPress: Creating a “Magazine style” Horizontal dropdown menu…

    [...]Even if most blogs have a very simple navigation, Worpress allows you to create very advanced menus. In this tutorial, I’ll show you how to create a “Magazine Style” horizontal drop-down menu, for your categories or even your pages.[...]…

  2. jbj said:

    I’m agree with you that code exemples are good and usefull. Though, I can’t set up a whole wordpress install each time I wrote a WP tutorial, this is why I put the screenshot.

  3. Mark said:

    Awesome Tut. I like the fact that there is no example. It makes me try it myself instead of copy and paste so I can learn. Great Job.

    This is really useful !

    If I get some time, I will make it and send you an example to post.

  4. Leonaut.com said:

    WordPress: “Magazine style” Horizontal dropdown menu…

    Even if most blogs have a very simple navigation, Worpress allows you to create very advanced menus. In this tutorial, I’ll show you how to create a “Magazine Style” horizontal drop-down menu, for your categories or even your pages….

  5. Nick Rudnicki said:

    This is a great tute. But i run into a wrinkle. When i drop it into the theme i am building, the navigation menu only displays the categories. Whereas i want it to display the pages/sub pages. The tutorial intro says that is what it is supposed to be doing, but it fails for me : (

    BTW – i do infact have pages/sub pages built in the WP DB.

    What do i have to do to make it switch?

    • Roger said:

      Hi,

      I was trying to get the Menu from this artice to display PAGES as opposed to Categories like yourself, but havn’t yet figured it out yet, and was wondering if you had??

      Help please! TIA…

  6. Tom Riddle said:

    Nice tut !

    But I think we can use only one function: wp_list_categories() to do that. When WordPress generates xhtml for categories code, it has two classes called current-cat-parent and current-cat which you can define in your CSS to highlight the active category.

    So that they can remember exactly where you are and where you came from!

    You can see my category & page drop-down menus at my theme demo: WP-MagaNews.

    • jesse lewis said:

      tom I am starting to put together my site and I am so new at this I am still using my pacifier. I checked your theme demo at WP-MagaNews and You are using the exact kind of drop down menu I am looking for but have not found. I get confused when everyone start saying copy this into this menu and past this into this css etc. its hard for me to keep up. I have different pages with multiple sub categories and sub sub categories. I want to be able to click on a tab and the sub categories drop down to a horizontal menu that is permanent or fixed once you select the tab and then from there work on sub subs. I hope I make since cause I dont to me. Anyway you have what I am looking for. Is there a simple way to install it or find it somewhere to install it? Is there a way you may be able to explain it to me in dummy terms. Thank you in advance.

  7. Nick Rudnicki said:

    Tom, that menu looks great! I am wondering where (or IF) i can grab that theme to dissect it and figure out how you built that, as it is nearly exactly what i need!

    I should also mention that on FF 3.0 on my mac the sidebar gets kicked down below the main content DIV. You may have some padding issues there.

    Cheers!

  8. Tom Riddle said:

    @Nick: I’m going to sell my theme in next some days. So you can wait and purchase it to do what you like. I think that menu code is really smart.

    Unfortunately, I don’t have Mac to test the theme, I just tested it on Windows on FF,IE and Opera. If you know how to fix the bugs, please tell me at here.

    Thanks so much !

  9. jbj said:

    @Nick: Basically, you just have to replace wp_list_categories() by wp_list_pages(‘title_li=’);, this will list your pages/subpages :)

  10. Nick Rudnicki said:

    JBJ – That pretty much got me there. But now i have a slight problem with the CSS.

    You see the theme i am building has content centered in the middle of the browser window, just like this site, and the sub-pages seem to be positioning themselves relative to the edge of the broswer window, and not to the edge of the div tag they are in?!?

    Does this sound familiar?

    Thanks!

  11. Nick Rudnicki said:

    JBJ – the page is being built locally, so there is no online version at the moment. But at this rate, i can put one online so that you can investigate.

    Is there a live online example i could inspect to see how that is built.

    I have also noticed that the problem is essentially this:

    the sub-pages show up in the navigation at an absolute position of so many pixels left of the browser edge

    #nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
    left: 30px;
    }

    and then so many pixels under the top of the browser.

    So that when the browser scrolls either side to side, or up and down, the sub-pages show up in the same browser relative position, rather than relative to main nav row.

    Thoughts?

  12. jbj said:

    I had similar problems with another menu: Most of the time it appears on internet explorer.
    The absolute position can also be a bit of pain, because it can fit good on a website and not in anotehr one.
    Try to test diffrent values for the position:absolute, I’m pretty sure that the problem comes from here.
    And if you have the chance to upload your work on a server, I’ll be able to give you a quick fix.

  13. Nick Rudnicki said:

    Hey there JBJ,

    I finally have a live version of the site online.

    http://www.blee-ree-eyed.com/2b/

    I have tried playing with the “position” values, and that only seems to break the navigation bar completely. I am at a loss, i would love to have this working, as it is the perfect solution for this particular site. Any help would be awesome on this one!

    Thanks again.

  14. ThinkSoJoE said:

    Great tutorial! I was looking to do something like this for a potential client after discussions with him. I found a way to do a hover menu containing child pages, but this here is exactly what I was looking for. Thanks a lot!

  15. jbj said:

    @Nick: I have just checked your site, the problem will be easy to fix, I guess. I’m a bit tired now so I’ll fix it tomorrow morning :)

    @ThinkSoJoe: Glad you liked it!

  16. Nick Rudnicki said:

    @ JBJ – i am afraid that didn’t do it.

    To see what i mean as being the problem; first mouse over any of the main nav items, take note of where the secondary items appear. Then resize the browser a bit, or scroll down and mouse over a main nav item again. See how the secondary nav item appears in a different place relative to site content, but the same position relative to the browser top left corner?

    Is this perhaps something to do with how it is nested in the DIV tags i have built?

    Sorry to be such a pain.

  17. jbj said:

    @Nick: For what I saw, you should put the nav in your div#header. And add position:relative; to the header in your css file.
    Because we’re using an absolute positioning for the nav, the parent element must have a position (relative or absolute) or the current problem appears.

    I hope this will solve your problem!

  18. my evil twin said:

    @jbj:

    oh, sorry for double-comment, but you can even put position:relative to the #nav2-element, because it’s the #nav2 ul’s parent element, so it will align properly (no need to change the header markup).

    bye bye :-)

  19. jbj said:

    You’re probably right, I don’t have IE so I didn’t tested that code with that shitty browser…
    Good tip for the position:relative on the #nav2 element! Sorry for that mistake!

  20. my evil twin said:

    Don’t mix things up.

    #nav2 needs to have position:relative, but #nav2 li ul needs to have position:absolute.

    take a look at the position-tag, then you’ll see what difference it makes.

    you tell #nav2 li ul that it’s absolute position referes to the next parent element with position:relative set.
    if none specified, it referes to the body tag, which makes your fold out align to it.

    we want it to align to the navigation, so you set the tag at it’s direct parent, which is #nav2…

    sorry for my bad english, it’s not my mother tongue :D

  21. my evil twin said:

    PS: do you have “firebug” (firefox extension) installed?

    it’s a great tool for web development. i just did the changes i mentioned before at you’re site and the menu is working just fine then…

    today, i’ll check what changes have to be made to get it working with ie7 :)

  22. hayes said:

    Thats really cool, I have done a drop down menu myself before but I never thought of this method. Mostly because my way was 5 lines of Jquery =P.

  23. Hwy5 said:

    Hi, one problem i’m having is that when i click on a category link in the dynamic menu, the dynamic menu on that category page has all top level categories as well as the sub categories for the category that was clicked – in the top level links. So if i have top-level categories A B C and under B, I have subcategories X Y Z, when I click on B, the top level links are A B C X Y Z.

    And it only happens in firefox, not IE7 . I’m going to take it down in the mean time, but if you need me to demonstrate it, I can reintroduce the menu code.

    thanks & regards

  24. nick rudnicki said:

    @ my evil twin

    I have made the changes you suggest, and it only seems to mega-break the navigation. What i have posted now:

    www.blee-ree-eyed.com/2b/

    is with the CSS changes you suggested. #nav2 being ‘position:relative’ seems to upset things greatly. Any thoughts?

  25. Neowster said:

    Hi, implemented this for my blog for display pages and subpages. However can anyone help with this:

    1 – Adding a default #background for the currently active page.

    2 – When on the page with subpages, let the subpage menu appear without need to hover over the page menu.

    Thanks in advance.

  26. Neowster said:

    @ jbj

    Thanks for your reply. Perhaps I didn’t make myself clear. I used your code and replaced the wp_list_categories by wp_list_pages as you mentioned earlier in the post to display my pages and subpages and everything worked fine.

    What I would like to check is how can I add a class to identify the current page so that the “active” page has a different background and standout.

    Another problem I faced is when at the page with subpages, the list of subpages appear only on hover of the cursor over the page parent. Is it possible to make the subpages persistent when the user is at any page or subpages?

    A perfect example is over here. I tried this solution but faced some unsolved issues.

    Basically I am being greedy by asking for the best of both world. A two tier nav with subpages appearing on hover, and persistent when on the pages with subpage.

    I have no idea whether it can be done, but if it does, it will be the last horizontal nav I ever need.

    A million thanks and appreciation regardless of the outcome.

  27. jbj said:

    @Neowster: I understand what you’re looking for. Even if this tutorial can be a great base, it’s very different than what you want for your blog. I’ll think about it for a future article, that’s a great idea :)

    For highlighting the current page, you should definitely read this page.

    Good luck!

  28. Esben said:

    First off, thanks jbj for a great tut!

    Second; i’m building a site, and i really need it to work in IE so i was wondering if anyone found a solution that has made it work?

    The site im building: www.digitaludskrab.eu/vsh

    Thanks all,
    Esben

  29. jbj said:

    @Esben: Thanks for your compliments! I don’t use Windows and IE, so I can’t help a lot. Do you use the javascript code needed for getting the menu to work on IE?

  30. Esben said:

    Hi jbj,

    thanks for a very quick reply. I am currently trying to make it work saving the code to ie_script.js file and using include ‘ie_script.js’ in my index.php og header.php. This is what is meant when you write i should paste the code to an external file, right?

    Also, there should be no difference between IE 6 and IE 7 on this account, right?

    I’ve tried various things, but so far no luck.

    Sorry if these are noob questions, im kinda new to this. And thanks for your help so far.

  31. Esben said:

    Hi again,

    i opted to try other stuff since i couldnt make it work due to damn IE. This menu is nicer though so might try it again later. Thanks again for code and reply
    /Esben

  32. cris said:

    when i HOVER a parent item and click on child item that appears everithing is fine and works perfectly. but when i CLICK on parent menu item which has got child items, then those child items appear on same row as parent items – they change into parent.

  33. John said:

    Is it possible to adapt/modify this code to produce a horizontal menu system similar to that used on Joomla Panel (http://joomlapanel.com/) where the submenu stays shown and not just when you hover over the parent, plus after you have finished hovering over the other parent items, the submenu returns to the active submenu.

    Regards,
    John

  34. rainbow said:

    hi JBJ,

    I applied this method on my website, except that there is a problem :(

    When I click on a category which has several subcategories (eg News), the subcategories are displayed in the following categories.

    Any idea ?

    Thank you;)

  35. Brian said:

    Hey Rainbow,

    I followed the advice given by ‘wppowered’ and my problem went away. I looked at your site and I think you have the same problem I had.

    Good luck.

    Thanks for an excellent tutorial and everyone’s help and advice.

  36. A.B. Dada said:

    Removing $this_category = get_category($cat); made a big difference for me when browsing subcategories. What’s the purpose of having this line at all? Does it enable any other functionality?

    If I leave it in, and try to browse subcategories, the subcategories are listed with the categories on the menu. Removing that line fixes it all.

  37. ROB said:

    Hello,

    Think this is great and very easy to implement in wordpress.

    My only issues are when i created a sub menu for the drop down the home button appears How can i remove the home link? drop is under progarms.

    AlSo how can the menu be centred so it looks symetric in my top header.

    This is my site: http://www.robsteele.co.uk/worddemo_site/wordpress/

    thx and its cool!

    Rob

  38. ROB said:

    Hi me again!!

    sorry i have sorted the home button problem but i have now got a problem with my navigation in i.e.
    In firefox it is fine, but in internet explorer it wraps over to the next line. Not sure is this a problem with fixed width boxs in ie.

    Any help very much appreciated

    Rob
    link is:
    http://www.robsteele.co.uk/worddemo_site/wordpress/

  39. cherie said:

    I am having a problem with the navigation.

    when a user chooses an option with child categories, the child categories appear large and in the navigation when the option is clicked. Example, I have the category ABOUT. It has 6 child categories.

    If you roll over ABOUT the child categories all show as intended and can be clicked. They take you to the correct page. BUT, if you CLICK on ABOUT, the child categories all show up in the menu in the same size as the rest of the items. Though if you roll over ABOUT, the smaller versions will show.

    Testing site: http://handmadecatskills.com/tuthilltown/

    Thoughts? I have the problem on both the unaltered css from above and the altered css that is showing on the site right now.

    thanks for any help.

  40. Nitai said:

    Hi, I would really appreciate your help so I can fix few things on the website I am just building.

    1. how to change the black color and the color of the letters
    2. how to put the text of the titles in the middle
    3. the dropdown titles of the categories don’t appear on mouse over.

    Sorry for my English, I hope it is understandable enough.

    Nitai

  41. Theo said:

    I’m trying to get this working but it says I have an error: Warning: Missing argument 2 for get_page_children(),:

    34 page_ID) != “”) {
    37 echo “”;
    38 wp_list_pages(‘title_li=&use_desc_for_title=1&child_of=’.$this_page->page_ID);
    39 echo “”;
    40 }
    41 ?>

    Can anyone help?
    Thank!

  42. بیش از 50 مرجع برای یادگیری Ùˆ استفاده بهتر از وردپرس - .:::پـــی ســی Ø¢Ø±ÛŒÙ€Ù€Ù€Ø said:

    [...] منو های بازشو افقی چگونه منو های بازشو افقی درست کنیم منو های باز شو افقی به سبک مجله های آنلاین منو های پویا هایلایت شده بخش نظرات بخش نظرات وبلاگ [...]

  43. Joe said:

    Most of this worked well for me (thanks for the code!). My issue is that when I rollover the parent, the children display, but there is a gap between the parent and child level such that my cursor cannot make it down to the child level before the children disappear.

    Also, I am displaying bullets despite the fact that i see the list style as none.

    Any ideas?

  44. Kristina said:

    Not sure if this has been mentioned yet, but thought I’d put it out there: the php code in wp_list_pages shows “exlude” which prob should be “exclude”?? (sorry, should have been an editor in another life)

    :) Awesome, can’t wait to implement!

  45. MR AC said:

    I can get the first level of the menu to display my post categories.

    No children of these categories show on the 2nd level though.

    If the category i select has children it displays the text “no categories” to the right of the level 1 menu.

    Any Ideas?

  46. Andrew said:

    Seems to have some IE problems, I couldn’t actually get this to work properly in Firefox either. I had an open div for my navigation and I placed the coding, everything seemed fine except when you click on a category that had child categories they would appear with the rest of the navigation, I tried using CSS to position them under the main category but that made them dissapear in IE. I’m dissapointed but this seemed like a good navigation and I thank you for the code nonetheless..

  47. Marco Pessanha said:

    Hi, Fist I’d like to congratulate you for the great, but very great post, I was looking loads sites and videos and the only exactly info. was yours.;-)
    I can’t not understand where I need to replace the css code: Edit theme>editor>?

    Again on the header.php or on the stylesheet.css?

    have a look please on my web page (www.clownjeca.com), and on the header u will seee and know what I’m doing wrong.

    Thank’s a lot for your help and great site.

  48. Roger said:

    Hi,

    First off, this is some fabulous work! I thank you very much..

    I am trying to modify this code in order to get the relevant sub-menu to be permanently displayed when the user selects either the parent or the child for that section. Any ideas on how to do this? Any help would be very much appreciated!

    Thanks…

  49. faze tari said:

    It doesn’t work on wp 3.0
    I made all like in this tut, but when I finished to uplaod the index, header and stylesheet all the categories were displayed in the header like are now in the sidebar …

    What I missed up ?

    Greets

  50. steve said:

    Any chance of an updated approach to this menu using the new wp_nav_menu functionality.
    Currently you can only view the child category if you mouse over it, it doesnt remain when you move your mouse off. Is it possible for the child categories to only change when another parent page is moused over? I hope this makes sense.

  51. Mark Cody said:

    Tried the code in the header.php file in wordpress. This had no effect on a drop down box!!! I dont know if it the version I am using or not !

    Will install a newer version of wordpress and give it another go.

    Thanks anyway

    Mark

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!