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!