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!

 

84 Comments

  1. Posted August 14, 2008 at 6:15 am | Permalink

    great!…

  2. Posted August 14, 2008 at 3:20 pm | Permalink

    Thanks =)

  3. michi
    Posted August 14, 2008 at 5:18 pm | Permalink

    No example?? I really really HATE webcode websites without example :(

  4. Posted August 14, 2008 at 5:34 pm | Permalink

    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.

  5. Posted August 14, 2008 at 7:30 pm | Permalink

    Very thx!!!!

  6. Mark
    Posted August 14, 2008 at 9:46 pm | Permalink

    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.

  7. Posted August 14, 2008 at 10:32 pm | Permalink

    Thank you, Mark! That will be great if you can provide an exemple :)

  8. Will Knot B. Revealed Snr.
    Posted August 18, 2008 at 5:59 pm | Permalink

    Thanks jbj. It’s a nice site you have here :)

  9. Posted August 20, 2008 at 4:57 am | Permalink

    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?

  10. Posted August 20, 2008 at 12:36 pm | Permalink

    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.

  11. Posted August 20, 2008 at 4:14 pm | Permalink

    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!

  12. Posted August 20, 2008 at 4:16 pm | Permalink

    @Nick: I’m at my office now, I’ll answer you tonight :)

  13. Posted August 20, 2008 at 4:56 pm | Permalink

    Thanks jbj, much appreciated!

  14. Posted August 20, 2008 at 5:16 pm | Permalink

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

  15. Posted August 20, 2008 at 11:19 pm | Permalink

    Tom, i could totally help you trouble shoot, but in order to do that, you need to let me see the code.

  16. Posted August 20, 2008 at 11:38 pm | Permalink

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

  17. Posted August 21, 2008 at 7:35 am | Permalink

    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!

  18. Posted August 21, 2008 at 8:11 am | Permalink

    Do you have the page online? If yes, I’ll check it :)

  19. Posted August 21, 2008 at 6:44 pm | Permalink

    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?

  20. Posted August 21, 2008 at 6:57 pm | Permalink

    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.

  21. Posted August 23, 2008 at 5:57 pm | Permalink

    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.

  22. Posted August 23, 2008 at 9:34 pm | Permalink

    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!

  23. Posted August 24, 2008 at 1:07 am | Permalink

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

  24. Posted August 24, 2008 at 1:13 am | Permalink

    @Nick, problem solved. Add margin-left:-95px; to #nav2 li ul in style.css, and you’re done!

  25. Posted August 25, 2008 at 6:23 am | Permalink

    Oh yes, beautiful. I was hunting for this horizontal drop down. Thanks.

  26. Posted August 26, 2008 at 2:53 pm | Permalink

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

  27. Posted August 26, 2008 at 7:11 pm | Permalink

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

  28. my evil twin
    Posted August 27, 2008 at 5:54 pm | Permalink

    it’s not working on ie7….

    at least not on my test site and not on nick’s demo site.

  29. my evil twin
    Posted August 27, 2008 at 6:05 pm | Permalink

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

  30. Posted August 27, 2008 at 6:10 pm | Permalink

    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!

  31. Posted August 28, 2008 at 12:26 am | Permalink

    Well i have added

    #nav2 li ul {position:relative;}

    and

    #nav2 {position:relative;}

    and it appears to be even more broken.

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

    what can i try now?

  32. my evil twin
    Posted August 28, 2008 at 10:43 am | Permalink

    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

  33. my evil twin
    Posted August 28, 2008 at 10:49 am | Permalink

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

  34. Posted August 29, 2008 at 1:49 am | Permalink

    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.

  35. Posted August 30, 2008 at 4:30 am | Permalink

    smart…
    thank’s i already try this code and working.. :)

  36. Posted August 30, 2008 at 7:27 am | Permalink

    fantastic! I’ve got a magazine style site I’m building for a client and this will be a great menu feature to implement! thanks :)

  37. Posted August 30, 2008 at 6:33 pm | Permalink

    Thanks very much for the code, I appreciate it

  38. Posted August 30, 2008 at 7:07 pm | Permalink

    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

  39. Posted August 30, 2008 at 11:41 pm | Permalink

    @Hwy5: It will be nice if you can put a demo of your problem online, so I should be able to check it out :)

  40. Posted August 31, 2008 at 5:07 am | Permalink

    @ my evil twin

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

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

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

  41. Posted August 31, 2008 at 5:10 am | Permalink

    @ my evil twin

    forgot to mention, i do have firebug, it is a GREAT tool.

  42. Posted September 2, 2008 at 10:12 am | Permalink

    @ everyone

    for those of you who still care :

    I seem to have figured it out, thanks so much for all your help and guidance!

    cheers!

  43. Posted September 8, 2008 at 12:58 pm | Permalink

    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.

  44. Posted September 8, 2008 at 1:27 pm | Permalink

    @Neowster: Can you give us a link to your code please? It will be easier to find where the problem is!

  45. Posted September 8, 2008 at 4:35 pm | Permalink

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

  46. Posted September 8, 2008 at 6:04 pm | Permalink

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

  47. Taeke
    Posted September 30, 2008 at 11:08 am | Permalink

    @ Neowster: Any luck yet? I’m looking for exactly the same solution

  48. Posted September 30, 2008 at 12:41 pm | Permalink

    @Taeke,

    Unfortunately, I am still in search for the perfect nav menu. Will share if I ever come upon such a solution.

  49. Posted October 19, 2008 at 12:02 pm | Permalink

    Wow this tutorial helped me to design my own menu. Cool thanks

  50. Esben
    Posted October 19, 2008 at 6:17 pm | Permalink

    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: http://www.digitaludskrab.eu/vsh

    Thanks all,
    Esben

  51. Posted October 19, 2008 at 6:35 pm | Permalink

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

  52. Esben
    Posted October 19, 2008 at 7:41 pm | Permalink

    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.

  53. Esben
    Posted October 19, 2008 at 9:48 pm | Permalink

    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

  54. cris
    Posted November 19, 2008 at 1:27 pm | Permalink

    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.

  55. wppowered
    Posted November 22, 2008 at 12:50 am | Permalink

    @ cris

    If you delete this piece of code

    $this_category = get_category($cat);

    that issue will go away ;)

  56. Posted December 26, 2008 at 10:56 am | Permalink

    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

  57. Posted January 16, 2009 at 4:08 pm | Permalink

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

  58. Brian
    Posted January 18, 2009 at 4:03 pm | Permalink

    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.

  59. Posted January 18, 2009 at 4:22 pm | Permalink

    sorry,
    i find the answer in the comments ;)

  60. Posted January 18, 2009 at 5:08 pm | Permalink

    Yes,
    thank you so much Brian,
    I receive your mail via G&T and the problem is now solved !

  61. Posted February 3, 2009 at 1:13 pm | Permalink

    Great tutorial, fits in well with almost any theme if you cater for the additional buttons. Thanks for sharing.

  62. Posted February 6, 2009 at 7:07 am | Permalink

    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.

  63. Posted February 9, 2009 at 4:31 pm | Permalink

    Great tutorial. It gives me additional space to place links on my navigation bar with the dropdown menu.

  64. Camilo
    Posted February 11, 2009 at 10:57 pm | Permalink

    Thanks a lot for this! It’s great! I can use it in several sites and it doesn’t seems to break, :D

  65. Posted March 23, 2009 at 11:15 pm | Permalink

    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

  66. Posted March 29, 2009 at 11:31 pm | Permalink

    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/

  67. cherie
    Posted May 14, 2009 at 9:09 pm | Permalink

    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.

  68. Posted June 11, 2009 at 2:08 am | Permalink

    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

  69. Theo
    Posted July 12, 2009 at 12:36 am | Permalink

    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!

  70. Posted July 14, 2009 at 9:22 pm | Permalink

    Awesome it worked for me.

  71. Posted July 18, 2009 at 9:20 pm | Permalink

    Excellent, worked for me. I been looking all over the place for about an hour now. thanks.

  72. Posted July 27, 2009 at 4:01 am | Permalink

    Hi worked awesome,

    But how do i display the dropdown vertical, also if i want to display blogroll categories??

  73. Posted August 5, 2009 at 8:17 pm | Permalink

    About some vertical menu …….? I want to have my categories in a vertical menu … can you pls help me? Thank you in advance!

  74. Joe
    Posted August 12, 2009 at 10:29 am | Permalink

    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?

  75. Posted September 7, 2009 at 10:05 pm | Permalink

    Great tutorial! Was very helpful

  76. Posted September 11, 2009 at 12:06 am | Permalink

    Wow! Thanks. This is a great horizontal menu. I’ve always have had an issue with horizontal menus. Thanks.

  77. Jenjen
    Posted September 25, 2009 at 5:49 pm | Permalink

    Very nice! Thanks!

  78. Posted November 3, 2009 at 3:31 pm | Permalink

    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!

  79. Posted January 7, 2010 at 12:20 am | Permalink

    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?

  80. Posted January 31, 2010 at 8:43 am | Permalink

    If I want the menu to be Pages/Subpages instead of Categories/SubCategories what is the code for it?

  81. Posted March 3, 2010 at 4:38 am | Permalink

    Hum…no sample? People are too lazy to look at the code and figure out what it does. It would be nice to have a little sample.

  82. Andrew
    Posted March 10, 2010 at 9:51 am | Permalink

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

  83. Posted March 18, 2010 at 10:35 pm | Permalink

    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.

27 Trackbacks

  1. By Web 2.0 Announcer on August 14, 2008 at 5:15 pm

    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. By Leonaut.com on August 17, 2008 at 7:41 pm

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

  3. [...] Cats Who Code has a helpful tutorial for creating an effective navigation menu for your own magazine theme. You can learn how to create an advanced dropdown menu quickly in WordPress: “Magazine Style” Horizontal Dropdown Menu. [...]

  4. [...] Cats Who Code has a helpful tutorial for creating an effective navigation menu for your own magazine theme. You can learn how to create an advanced dropdown menu quickly in WordPress: “Magazine Style” Horizontal Dropdown Menu. [...]

  5. By Top 5 WordPress Navigation Menu Tutorials on August 29, 2008 at 10:01 am

    [...] @rarr; Source [...]

  6. [...] Cats Who Code has a helpful tutorial for creating an effective navigation menu for your own magazine theme. You can learn how to create an advanced dropdown menu quickly in WordPress: “Magazine Style” Horizontal Dropdown Menu. [...]

  7. [...] 杂志风格的二级层联横向导航菜单 [...]

  8. [...] Cats Who Code has a helpful tutorial for creating an effective navigation menu for your own magazine theme. You can learn how to create an advanced dropdown menu quickly in WordPress: “Magazine Style” Horizontal Dropdown Menu. [...]

  9. By New Look – Statement | Neowster on September 9, 2008 at 5:48 pm

    [...] Wordpress: “Magazine style” Horizontal dropdown menu [...]

  10. [...] Hargh… I just courius how to make my menu mixed (pages and category) at the sam horizontal menu bar. I searched the google and found the good guied from http://www.catswhocode.com/blog/blogging/wordpress/wordpress-magazine-style-horizontal-dropdown-menu... [...]

  11. [...] @rarr; Source [...]

  12. By WPTUT - Wordpress Tutorials on November 23, 2008 at 4:56 am

    [...] “Magazine style” Horizontal dropdown menu Submitted by: catswhocode| Date: 11 21st, 2008 | Category: Featured, Themes Views: 2 | Votes: 0 | [...]

  13. [...] Horizontal Dropdown Menu: This is not a plugin. Rather this is a code sample explaining how to create a magazine style horizontal menu. I could not find a good plugin for this functionality. If you hate coding, here is a plugin. But then the fact is the demo looks little messy. [...]

  14. By Complete Wordpress Theme Tutorial « Kolmex on February 11, 2009 at 12:36 am

    [...] “Magazine style” Horizontal dropdown menu [...]

  15. By 20 WordPress Tricks to Improve Your Blog on February 12, 2009 at 12:13 am

    [...] “Magazine-Style” Horizontal Dropdown Menu [...]

  16. [...] “Magazine-Style” Horizontal Dropdown Menu [...]

  17. [...]  Magazine-Style –  Horizontal Dropdown Menu - Jean-Baptiste Jung visar en teknik för att förbättra navigationen av en WordPress blogg med [...]

  18. By 20 Trucchi Per Migliorare Wordpress on February 24, 2009 at 1:50 pm

    [...] “Magazine-Style” menu dropdown orizzontale [...]

  19. [...] “Magazine-Style” Horizontal Dropdown Menu [...]

  20. [...] 杂志风格的二级层联横向导航菜单 [...]

  21. [...] sure to check it. 16. Rounded Corner Tab Menu Using CSS 17. Making a Categories Drop-Down Menu 18. Wordpress: “Magazine style” Horizontal dropdown menu 19. WordPress Menu Tricks 20. Creating Two-Tiered Conditional Navigation in [...]

  22. By On the Hunt for compatible wp plugins on August 2, 2009 at 10:40 am

    [...] [...]

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

  24. [...] Wordpress: “Magazine style” Horizontal dropdown menu [...]

  25. [...] [...]

  26. [...] WordPress: Magazine-Style Horizontal Drop-Down Menu [...]

  27. [...] All. The Original post is Wordpress: “Magazine style” Horizontal dropdown menu. [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting

  • Smashing Network
WordPress Appliance - Powered by TurnKey Linux