As WordPress theme designers, we’re often faced between the choice of going for purely CSS drop-down menu or javascript drop-down menus in our struggle with cross-browser compatibility.
The aim of this short tutorial is help you build a simple multi-level drop-down menu in your WordPress theme using jQuery’s JavaScript library to ensure cross-browser compatibility.
When I first started to design WordPress themes, I went the pure-CSS way. I found a variety of cross-browser CSS-only drop-down menus at Stu Nicholls CSS Play and implemented his solutions into my themes. Some people do not like the way Stu hacked CSS to ensure cross-browser compatibility. It may be ugly but it works. And you can’t really use WordPress wp_list_pages() tag with Stu Nicholl’s CSS because the tag’s parameters could not reproduce the CSS hacks needed to make it work.
Later on, as I started to embrace more JavaScript in my WordPress themes, I decided to built my drop-down menu with a bit of jQuery Javascript help. It saved a lot of effort. No more unnecessary CSS hacks. Plays nice with WordPress wp_list_pages() tag. And WordPress installation already comes with jQuery library included. This is one of the main reasons why I chose jQuery among other Javascript libraries.
Anyway, I’m not here to convince you to use JavaScript for your WordPress drop-down menus. To those of you who are would like to use jQuery for your multi-level WordPress drop-down menu, I hope you’ll find the short tutorial below helpful.
Add this bit of JavaScript between the <head></head> HTML tags in your WordPress theme’s header.php (thanks to kriesi.at):
<?php wp_enqueue_script('jquery'); ?>
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery("#dropmenu ul").css({display: "none"}); // Opera Fix
jQuery("#dropmenu li").hover(function(){
jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
},function(){
jQuery(this).find('ul:first').css({visibility: "hidden"});
});
});
</script>
The HTML. We will list the pages using WordPress default wp_list_pages() tag. I used it in header.php of my WordPress theme:
<ul id="dropmenu">
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>
Now here’s the CSS:
<style type="text/css">
#dropmenu, #dropmenu ul {margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#fff; font-weight:bold;}
#dropmenu a {display:block; padding:0.25em 1em; color:#686868; border-right:1px solid #c8c8c8; text-decoration:none; background:#fff;}
#dropmenu a:hover {background:#888; color:#fff;}
#dropmenu li {float:left; position:relative;}
#dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;}
#dropmenu ul a {border-left:1px solid #c8c8c8;}
#dropmenu li ul {border-top:1px solid #c8c8c8; width:14.1em;}
#dropmenu li ul a {width:12em; height:auto; float:left; border-bottom:1px solid #c8c8c8;}
#dropmenu ul ul {top:auto;}
#dropmenu li ul ul {left:12em; margin:0px 0 0 10px;}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}
</style>
The CSS styling provided is pretty much barebones. You can view another demo of WordPress jQuery Multi-Level Drop-Down Menu in action here.
Thanks for letting me know about the drop down menu. In your example http://www.hotelsandtravel.org/ this has some very cool features. Is this a theme I can download? I like the stuff on the right hand side how it shows, but you can click on the headers to get more information. I am trying to figure out the drop down menu, but new to all of this. Do you do any programming or can you build me something. I will pay for this.
HotelsandTravel.org uses a theme in development which I call ‘Press Freedom’ and yes it will be available for free download soon.
I am anxious to offer the theme for free download as soon as possible but I decided to delay it to implement a convenient way for bloggers to handle post thumbnails/lead-images and this functionality should at least reach a usable state before launch.
As you can see, each post listed on the home/front page of the theme uses a thumbnail/lead-image in several sizes and dimensions. Some 4:3, some 16:9 etc. ‘Press Freedom’ will include an uploadImage->resize->cropImage->saveThumbnail for every variation of thumbnail to be used in a particular post so that bloggers won’t have to manually do those things in Photoshop beforehand.
Updated 20 Sept 2008: I’ve captured and uploaded a short video demo of what I’m rambling about. Check it out: WordPress post thumbnails without manual custom fields
Appreciate you post. My buddy advice to visit you. Intresting. Added in favourites! Wanna read you more!
Has anybody been able to get this to work with the Junction Theme (http://patdryburgh.net/junction/)?
This is wonderful. I was thinking of how to achieve this for a client project and then I found your site. Thanks for the walk-through!
These menus are great, but I can’t get them to work with Internet Explorer 6. Care to install it and give us a hint?
http://tredosoft.com/Multiple_IE
The is the best way to have a dropdown list in wordpress I’ve ever seen. but I have only one issue to get it work right for me as my theme is “rtl”, after I change the css properties to make compatible with rtl theme it works in FF but in IE7 the list doesn’t show under the main category instead in goes to left and I can’t click on it as it disappear before the cursor reaches it.
Would you provide me the CSS styling that fit rtl theme or any advice to help me out?
Thanks
I was trying to get this working for me since my last reply and finally I got it.
Here is the CSS styling for “Right-to-Left” theme that made the dropdown menu accessible in both Firefox & IE7
———————————-
#dropmenu, #dropmenu ul {margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#fff; font-weight:bold;}
#dropmenu a {display:block; padding:0.25em 8px; color:#686868; border-right:2px solid #c8c8c8; text-decoration:none; background:#fff;}
#dropmenu a:hover {background:#888; color:#fff;}
#dropmenu li {float:right; position:relative;}
#dropmenu li.logo a {border:none; border-top:4px solid #ffbe10; background:#f85c00; color:#ffbe10; font-size:1.68em; line-height:1.48em; font-weight:bold; padding:0 0.68em 1px 0.68em; margin:-8px 0 -1px; -moz-border-radius:0 0 7px 7px; -webkit-border-radius:0 0 7px 7px;}
#dropmenu ul {position:absolute; display:none; width:13.7em; top:1.9em; margin:0px -30px;}
#dropmenu ul a {border-right:5px solid #c8c8c8;}
#dropmenu li ul {border-top:1px solid #c8c8c8; width:13.7em;}
#dropmenu li ul a {width:12em; height:auto; float:right; border-bottom:1px solid #c8c8c8;}
#dropmenu ul ul {top:auto;}
#dropmenu li ul ul {right:13.7em; margin:0px -2px;}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}
———————————-
BTW, that Java script was showing as normal text at the header when I load the page so I added only the following line before the closing tag and it worked fine
However, I’m glad to share this with you and I’m planning to translate this article to Arabic in my website after your permission.
Best Regards
Hi. The menu looks really good, but I cannot get it working with the following theme:
ModXBlog 1.0 by JustDreamweaver. http://www.justdreamweaver.com/dreamweaver-wordpress-tools.html. I am fairly new to this but have followed your instructions, and the javascript is being displayed on screen wherever I place it in the header. Could you help please. Thanks. Also struggling to get the stylesheet just right for this theme.
Stanley: I realise my instructions weren’t clear enough, sorry about that. I’ve modified the post and should now read:
” Put this bit of JavaScript code in between the <head></head> tags in your WordPress theme’s header.php file. “
Hi. Thanks for the quick response. I had tried adding it between the head tags, and have just done it again. The code just appears above the header on the screen, although the drop down list is functional. http://www.creativeelearningsolutions.co.uk/wpress. Do I have to activate the jquery library?
Also I can see that the titles in the dropdown run behind the text area beneath. Do you think I am going to encounter problems here as a relative novice. Thanks again.
H Stanley,
Great work
you wrote “I am anxious to offer the theme for free download as soon as possible ..” wen will it be? Do you have a idea?
Regards
Peter from Switzerland
Thank you for your website
I made with photoshop backgrounds for myspace or youtube and even more
my backgrounds:http://tinyurl.com/5ajonc
take care and thank you again!
Does this work with three levels of navigation? Anyone have a sample?
Thank you for this tutorial. A am able to get the menu to appear on my custom theme but I am not seeing the slide in drop down effect. Any help is greatly appreciated.
Thnaks,
Erick
Man, you are a savior! I just spent like 5 hours trying to figure out how to build a jQuery colorpicker into my Flexibility Theme admin page, and all I needed was to look at your code posted above to see what I was doing wrong. Thanks a ton!
Hi there.
Awesome tutorial, was just what I was looking for. I have found a bit of a glitch with how it reacts to a lightbox slideshow on my site though… I am guessing this is due to it using absolute position?? Is this right?
Basically, the lightbox slideshow comes up but the navigation stays in front of it. I would show you the site but it’s password protected at the moment until launch.
Any ideas?
Thanks
Hi there.
I am having some probs with this working in ie 5 and 6. Not that I use either of those but I am sure there are some people who still do.
Is there a fix or have I done something wrong for it to go a bit crazy. The drop downs appear fine, but when you move your mouse down, they go horizontal instead of vertical. Sometimes you can catch it and it will work fine.
Any ideas?
Thanks
Ben
thanks bro
How to make it vertical ??
pls help me
This looks great! Just what I was looking for!
@Ben Didn’t IE5 die years ago? haha Isn’t the current share less 0.1?
Also, you in your example you have:
<div id=”main-content”
and it should be:
Thanks!
Hi Stanley! Great code, just one question…
Can i use this code in my premium WordPress theme???
Please let me know couse it looks great and i want to have your permission… If you can, can you respond me by email… I want to send you an email asking this but i cant find your direction, so well, good work, great info by the way!! Good Luck Stanley bye
How do I ensure that it stays on the top level? For instance, I have the site navigation above a flash file. When the navigation comes down, it is hidden behind the swf. Any suggestions?
Sorry, I’m new to this. But how do I incorporate this onto my website with this theme:
http://www.wpdesigner.com/demo/index.php?preview=Personal
Theme can be downloaded here:
http://www.wpdesigner.com/2008/01/30/personal-wordpress-theme/
THANKS!
Great tutor! Thanks a lot!
Is it possible to make it working on IE6?
All works properly in IE6. Sorry!
Thanx very much for this. I had been fighting for hours with WP in order to get a menu like this one, and wasn’t succesful. I’ll work with your code adapting the css and hope I’ll get it this time!
thank’s
This is a great dropdown implementation. However, I am having a similar problem to the lightbox issue. I use the google calendar plugin and the menu bar stays on top when I open a calendar event. Anyone know how to fix this or the lightbox issue?
Thanks.
I will check here or email me at sgmace@gmail.com
Anyone have a z-indexing problem where the 3rd level of navigation appears below everything else in IE? If so, how’d you fix it?
After reading your post I went and tried the menu and wow it worked great. I then went and tested it with IE 6.0 and found it wasn’t working… bummer. So I thought O must be doing something I’ll try it again with a basic page with just the menu – still wouldn’t work. SO then I went back to your sample and tested it with IE 6.0 and it worked fine. SO I copied your page code word for word – uploaded it to my server – Added the wp tested it and it would not work on my server. Any Ideas? The script woks fine with all browsers beside IE 6.0
Here are a couple examples.
http://www.mixedmediawebsites.com/tikigaq-2009/
http://www.mixedmediawebsites.com/tikigaq-2009/test.php
Anyone have any idea how to turn this into a horizontal dropdown like the one in http://www.wanderinggoat.com/ ? Changing to display:inline will not work for me. Any help much appreciated. Thanks!
Cool stuff, I will implement and style it soon on my blog (http://blog.cornewielemaker.com)
Thanks.
Corné.
I’m trying to add these drop down menus onto the header on the top. Works like a charm when I just have wp_list_pages(’sort_column=menu_order&title_li=’). However, if I add an “include” statement to filter the headings, it no longer works. Any ideas? Would it be just as easy to reorganize my pages so I don’t need the include statement? Thank you in advance.
Dennis
Hi!
Is it possible to do this, and have the drop down menu split into two columns?
Awesome drop down menu, I have installed it but I want to center the menu. Any ideas on how to do that?
http://earthembassy.org/test/
Awesome tip and menu! Thanks for sharing!
Hi Thanks alot..
awesome script..
and exactly i want this..working great..:)
Thank you, this is great and so simple….
Cheers!
This is exactly what I’ve been looking for. I’m trying to get the drop down menu to be centered on the theme but have not been able to figure it out. My CSS isn’t great. Any help would be greatly appreciated.
Thanks.
Thx for this
If you don’t mind I will post this on my blog with a link to your blog.
I’ll translate the contents to romanian but you will recognize your post from the codes.
I also will try to make a vertical version of this menu.
Cheers !
i can’t believe i’m asking this but i’ve played with the css and i’m stumped.
how do i make the drop down menu items narrower. it’s blocking out the name of the
site.
thanks for any help
ty
Anyone? Bueller? website: http://www.markgrowden.org
thanks
@ty: recheck all code, has sth. to do with right order, width and floating of the menu ul and the header h1.
I want bulid new website for http://www.preefurniture.com with good theme and SEO freindly to have high ranking on google, yahoo and others search engine. Can you help Us?
My client keeps bugging me about the drop down menu erasing the name of the artist on the website. the block that the menu items are contained in is twice the size of the text. i’ve gone to each bit of css and tweeked it and nothing alters this drop down box size.
Does anyone know how to reduce the size of the box?
website http://www.markgrowden.org
Thanks
Ty
is anyone reading this at all? i feel invisible.
TY:
Replace the bottom of your CSS with this:
#dropmenu, #dropmenu ul {margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; background:#000; font-weight:bold;}
#dropmenu a {display:block; padding:0.25em 1.0em; color:#ccc; border-right:1px solid #191919; text-decoration:none; background:#000;}
#dropmenu a:hover {background:#191919; color:#ccc;}
#dropmenu li {float:left; position:relative;}
#dropmenu ul {position:absolute; display:none; top:1.9em; left:-1px;}
#dropmenu ul a {border-left:1px solid #191919;}
#dropmenu li ul {border-top:1px solid #000;}
#dropmenu li ul a {width:5.2em; height:auto; float:left; border-bottom:1px solid #000;}
#dropmenu ul ul {top:auto;}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}
this has saved me lots of time
Thanks guys. this really great and simple.
I’m using this method on a site I’m building. I have the navigation wrapped in a separate class and it’s causing one big problem for me ONLY in IE8. The height of the navbar doubles in height. You can see what I mean here.
I would appreciate it if someone could help me figure this out. Thanks in advance.
I can’t get the dropdown to z-index over in IE on my nav which is 3 lines. Anybody have a solution for this? Works fine in FF, but not in IE. Herez the nav– http://www.synergydentalutah.com/
Hey
Thanks for the tutorial. Nice piece of code.
Just the z-index 300 is a bit high. Works fine with a 5.
I had some trouble with my thickbox plugin because of it.
Solved it with setting it 5.
Good work. Thanks.
This doesn’t work on Google Chrome. Any idea why?
The best technique I found so far!
is there a plugin for that? If not..I don’t think is that hard to implement..
@Yaie it does work to me with Chrome, check if u did something wrong
Hi. Its really simple and nice… i need to know what can i do if i wanted to show an arrow when a submenu item contains child and don’t show arrow sign when there are no child under a sub menu item????
The menu works great for me, but I wanted to add a dropdown list with one of my categories. I managed to include just that one, but I have no idea how to make a dropdown list with the subcategories. This is my first time creating a Wordpress-theme and I’m not that good with all the functions yet.
Great tutorial though! Thanks alot.
Everything is working great with this plugin. However, the drop down menu will not go away when I am no longer on the link.
http://estudioray.com/demo/CRV/
Can someone please provide me with some insight? I am not sure how to fix that.
Thank you!
Michelle
thannnnnnkkkkk youuuuuuuu!
thanks guys for the simple tutorial…
great work
Hi,
i have working on a website using Thematic theme, i am facing a problem with second level drop down menu. it appears behind the SWF(Flash Object)
Here is the link: http://www.publivate.ca/wordpress/wordpress/
2. I tried to set the z-index in the CSS but, its not working, Please help me i have very short deadline to launch the website.
will appreciate any help
Thanks
Prem
Its really the shortest and the quickest method i have ever learnt!
Thank You. Your this article and code save my time.
Its looks more better with down-arrow image. I’ve tried but can’t do it
hey this script saved my life. I spent so much time looking for the perfect navigation and yours ended up being it!
Quick question, is it possible to exclude pages?
too barebones in fact.
Stanley thanks for a handy bit of code there. I tried a couple of wordpress css/jquery plugins and tutorials and yours was definitely the best. I was wondering whether you could help me with getting rounded corners on the menu? Square blocks don’t match my design elements.
Thank you very much for publishing this!
Nice Tutorial man!
I have the same question as Tanya. I’ve tried
but there is no exclusion happening, what am I doing wrong?
Hi,
These Tips are great, it displays the drop down menu…But when i navigate to the sub pages the submenu disappears, but when i go back to the front page the sub menu displays fine again. in short, the drop down menu displays only in the fron page and not in other pages.
Any help is appreciated
Hi, Stanley! Can I get a prize, since this is the comment with #100?
I just want to thank you for the menu. It’s easy and doesn’t get in conflict with the rest of the jquery elements in wordpress.
You saved me, just when I thought there is no such thing, after a few days of search and work.
Happy New Year! btw
Good, also check this simple menu https://sourceforge.net/projects/multilevelmenu/files/latest
Finally, one that actually works! Thank you!
Stanley! Thanks so much for this brief and concise tutorial. I was able to implement this code in 90 seconds. You included everything needed (not done often or by many) and provided me with a valuable functioning solution. To go the extra mile I would mention to beginners to make the subpages children of parents. You are appreciated. Sincerely, Chris Boggs
goood
http://www.guluna.com
Thank you, thank you!
Perfect solution – simple and elegant.
Implemented at http://www.trilliumwaldorfschool.ca/ – under development at this date.
Sandra
stanley, thanks!!! this exactly what i was looking for
)
)
very well written too i have to say
good things will happen to you!
Great script! Being somewhat of a newbie in all of this – is there a way that I can link my menu items directly to a url? I’m really new to php but does it have anything to do with:
Thanks a bunch!!