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!
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
84 Comments
great!…
Thanks =)
No example?? I really really HATE webcode websites without example
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.
Very thx!!!!
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.
Thank you, Mark! That will be great if you can provide an exemple
Thanks jbj. It’s a nice site you have here
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?
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.
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!
@Nick: I’m at my office now, I’ll answer you tonight
Thanks jbj, much appreciated!
@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 !
Tom, i could totally help you trouble shoot, but in order to do that, you need to let me see the code.
@Nick: Basically, you just have to replace wp_list_categories() by wp_list_pages(’title_li=’);, this will list your pages/subpages
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!
Do you have the page online? If yes, I’ll check it
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?
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.
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.
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!
@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!
@Nick, problem solved. Add margin-left:-95px; to #nav2 li ul in style.css, and you’re done!
Oh yes, beautiful. I was hunting for this horizontal drop down. Thanks.
@ 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.
@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!
it’s not working on ie7….
at least not on my test site and not on nick’s demo site.
@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
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!
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?
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
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
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.
smart…
thank’s i already try this code and working..
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
Thanks very much for the code, I appreciate it
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
@Hwy5: It will be nice if you can put a demo of your problem online, so I should be able to check it out
@ 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?
@ my evil twin
forgot to mention, i do have firebug, it is a GREAT tool.
@ 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!
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.
@Neowster: Can you give us a link to your code please? It will be easier to find where the problem is!
@ 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.
@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!
@ Neowster: Any luck yet? I’m looking for exactly the same solution
@Taeke,
Unfortunately, I am still in search for the perfect nav menu. Will share if I ever come upon such a solution.
Wow this tutorial helped me to design my own menu. Cool thanks
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
@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?
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.
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
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.
@ cris
If you delete this piece of code
$this_category = get_category($cat);
that issue will go away
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
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;)
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.
sorry,
i find the answer in the comments
Yes,
thank you so much Brian,
I receive your mail via G&T and the problem is now solved !
Great tutorial, fits in well with almost any theme if you cater for the additional buttons. Thanks for sharing.
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.
Great tutorial. It gives me additional space to place links on my navigation bar with the dropdown menu.
Thanks a lot for this! It’s great! I can use it in several sites and it doesn’t seems to break,
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
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/
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.
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
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!
Awesome it worked for me.
Excellent, worked for me. I been looking all over the place for about an hour now. thanks.
Hi worked awesome,
But how do i display the dropdown vertical, also if i want to display blogroll categories??
About some vertical menu …….? I want to have my categories in a vertical menu … can you pls help me? Thank you in advance!
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?
Great tutorial! Was very helpful
Wow! Thanks. This is a great horizontal menu. I’ve always have had an issue with horizontal menus. Thanks.
Very nice! Thanks!
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)
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?
If I want the menu to be Pages/Subpages instead of Categories/SubCategories what is the code for it?
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.
Feel free to do your “sample” and post it here.
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..
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
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.[...]…
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….
[...] 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. [...]
[...] 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. [...]
[...] @rarr; Source [...]
[...] 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. [...]
[...] æ‚å¿—é£Žæ ¼çš„äºŒçº§å±‚è”横å‘导航èœå• [...]
[...] 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. [...]
[...] Wordpress: “Magazine style†Horizontal dropdown menu [...]
[...] 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... [...]
[...] @rarr; Source [...]
[...] “Magazine style†Horizontal dropdown menu Submitted by: catswhocode| Date: 11 21st, 2008 | Category: Featured, Themes Views: 2 | Votes: 0 | [...]
[...] 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. [...]
[...] “Magazine style” Horizontal dropdown menu [...]
[...] “Magazine-Style” Horizontal Dropdown Menu [...]
[...] “Magazine-Style†Horizontal Dropdown Menu [...]
[...]  Magazine-Style –  Horizontal Dropdown Menu - Jean-Baptiste Jung visar en teknik för att förbättra navigationen av en WordPress blogg med [...]
[...] “Magazine-Style†menu dropdown orizzontale [...]
[...] “Magazine-Style†Horizontal Dropdown Menu [...]
[...] æ‚å¿—é£Žæ ¼çš„äºŒçº§å±‚è”横å‘导航èœå• [...]
[...] 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 [...]
[...] [...]
[...] منو های بازشو اÙÙ‚ÛŒ چگونه منو های بازشو اÙÙ‚ÛŒ درست کنیم منو های باز شو اÙÙ‚ÛŒ به سبک مجله های آنلاین منو های پویا هایلایت شده بخش نظرات بخش نظرات وبلاگ [...]
[...] Wordpress: “Magazine style†Horizontal dropdown menu [...]
[...] [...]
[...] WordPress: Magazine-Style Horizontal Drop-Down Menu [...]
[...] All. The Original post is Wordpress: “Magazine style†Horizontal dropdown menu. [...]