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.