Make your own WordPress drop down menu
When it comes to creating a site that has multi-level navigation, a drop down menu is often your best means of keeping the navigation simple and uncluttered. There are a few plugins that you can use to achieve this, but I’ve found that many of them make too many assumptions and don’t work exactly how I’d like them too. For that reason, I’ll detail a simple means of making your own WordPress drop down menu.
Here’s a demo of what we’re going to accomplish. (Tested in IE7 & FF)
Getting started
Firstly, you’ll need to setup your pages in WordPress in a hierarchal manner. IE:
- Home Page
- About Us
- What We Do
- What We’ve Done
- Who Works For Us
- Services
- Portfolio
- Our Clients
- Contact Us
This will generate a nested UL LI list in your code.
<ul id="nav"> <li><a href= "#">Home Page</a></li> <li><a href= "#">About Us</a> <ul id="aboutus"> <li><a href= "#">What We Do</a></li> <li><a href= "#">What We've Done</a></li> <li><a href= "#">Who Works For Us</a></li> </ul> </li> <li><a href= "#">Services</a> <ul id="services"> <li><a href= "#">Portfolio</a></li> <li><a href= "#">Our Clients</a></li> </ul> </li> <li><a href= "#">Contact Us</a></li> </ul>
Sorted? 
Making it dynamic
What you’re going to do now, is break that list down somewhat and create your own navigation. The top level menu items will be static, and their subpages will be dynamic. Like so:
<ul id="nav">
<? wp_list_pages('title_li=&sort_column=menu_order'); ?>
</ul>
You might also want to include a home link. You can add this manually like so:
<ul id="nav">
<li><a href="<? bloginfo('siteurl'); ?>">Home</a></li>
<? wp_list_pages('title_li=&sort_column=menu_order'); ?>
</ul>
The Script
There’s a tiny piece of jQuery required to show/hide the drop down menu’s. From an accessibility point of view, you can link the top level navigation item so that if JS is disabled, the user will still be able to get around your site. Here’s the script.
$(document).ready(function() {
$("#nav ul").css({display: "none"}); // Opera Fix
$("#nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); });
});
The CSS
This CSS is really a guide and it largely depends on the styling of your site. The important thing is to add “position:relative;” to the first level of LI elements. The UL element (the drop down menu) needs to have “position:absolute;” so the parent LI needs to be relatively positioned to your dropdown menu doesn’t display topleft corner of the page.
/*navigation*/
#nav {padding:0;margin:0;}
#nav li {position:relative;display:block;float:left;}
#nav li a {display:block;float:left;height:30px;line-height:30px;padding: 0 20px;}
/*sub navigation*/
#nav ul {position:absolute;top: 30px;left:0;padding:0;} /*the top:30px command must be the same height as your parent LI so the dropdown displays below the main navigation*/
#nav ul a, #nav ul li {float:none;}
This is the CSS used to achieve the effect in the demo. You can of course change it to suit your site’s styles.
And presto, you’ll have a drop down menu. As you add sub pages in your WP admin, those pages will automatically be included in your drop down.
Slick
Related Posts
Share This Post!
54 Comments
Trackbacks
- 教你自己动手制作Wordpress下拉菜单 | 免费资源部落
- How to create dropdown menus in wordpress
- WordPress Dropdown Menus « Virtual Artifacts
- Loretta Young
zccoslxlqc on 
Tal on 
Herby on 
Soocaild on
great stuff WP Guru, I’ve got a drop down on my wordpress site currently but only realised recently it doesn’t work in certain earlier versions of IE, which sucks, so many of my subcategory pages are not accessible.
How backward compatible is this particular solution?
as long as JS is enabled on the browser, its just a matter of setting your CSS correctly for each browser so the menu drops down where it should.
of course, by adding a URL to the top level navigation item, you can maintain your accessibility levels for those without JS.
Just retracing my steps through this tut and was wondering whether you have a simple solution to making drop down links which only act as top level links and don’t actually go anywhere.
Eg, the link does not link to a page but only allows you to place subpages inside of it.
You mean a dropdown that generates a category list, but the top level categories are ‘optgroup’ html elements?
Is there a way to make the top level menu items dynamic as well? So that everything is dynamically generated by WordPress, so if you were to make a new page and make 4 subpages for it, the parent page and its subpages appear in a dropdown menu automatically. Is this possible?
Hey Mark. Because the parent LI elements have ID’s and are given that onmouseover command, it’d be tricky to use the WP wp_list_pages command to generate the page list automatically. I’m sure someone with a bit more JS knowledge could create a tweaked command that says the LI’s under this UL must dropdown here, etc…
but this particular script cant do the top-level items as dynamic, no…
Ah, oh well.
Thanks for the quick reply!
This sounds great as I have tried various drop-downs. Is there
This sounds great as I have tried various drop-downs. However, I must be doing something wrong, as I can’t get the menu to work properly.
I’m thinking the trick is in this part: javascript:toggleLayer(‘aboutus’) ?!
The rest I’ve followed as you had described.
Bloody hell! This is great stuff and works like a charm… but how on earth do I highlight page parents and children.. or anything at all when on current page? I’ve been trying for days with no luck at all. Please please pretty please… help me before I go mad!
My menu looks like this:
<a href= “”>
Um… nevermind how my menu looks like … but an example on the demo menu would be great
I’m sorry, but where do I put the Javascript code?
Yeah, it looks great, just what I’m trying to do. But where do these files go? Script… Css… etc…
Thanks!!!
Maybe someone out there can turn it into a plugin? There really aren’t ANY that I’ve found that work well. Especially with the newer 2.6+ WordPress
How can you integrate ProjectSeven.com Menu Systems into a WordPress theme layout? Does anyone know how to do this?
Anyway to get this to work in IE6? The drop downs show up underneath the next button instead of directly below…
this is my first menu
<li class=”current_page_item” ><a href=”/”>Home
this is the next menu
so how do i modify it now. how do i seperate the child pages form the parent.
I have the same issues as Sarah and Chris:
1. How do I highlight the current item in the main navigation?
2. How do I get it to work in IE6????
Any help appreciated!
I haven’t tried this yet but I think u can make it work by adding and styling .current_page_parent in your stylesheet. wp_list_pages autogenerates this class on parent pages if I remember correctly.
i’ll try it..thanks! I am tryign to get the menu working here: http://www.cipore.org.
The IE6/7 issue is my bigger worry, though. Any thoughts on that one??
Hullo? : ) IE fixes?
What do I name the .JS file?
I believe you can name js file to whatever you like, and just make sure to load your js file in the header meta as blow:
<script type=”text/javascript” src=”/wp-content/themes/gloriousfuture/nav.js”>
I am having trouble with this in the Chrome browser.
I am familiar with editing my themes CSS but where do i edit the navigation script? What file?
I believe you can name js file to whatever you like, and just make sure to load your js file in the header meta as blow:
in the header meta? of the CSS? of some other file which is?
Do i put the JS to my WP-includes/JS/ ?
Good work, its really simple for beginners like me, i had tried it out and worked well for me.
thank you very much for posting this…it worked for me too..:)
Is there a way to get the entire menu automatic (including the Parent Pages?)
do you do like a ” der ! ” explanation of all this ?
der = haven’t a clue > requires step1, step2,
I’ve followed this, and the menu’s up, but the dropdown menu doesn’t work. Either wp_list_pages isn’t working for me, or the javascript isn’t. Any suggestions? I’m using WP 2.5.
Thanks!
Will M
i added the script to my header.php file and the css to my stylesheet, but the menu is not dropping down and de css only messes up my whole site layout. i dont understand a thing of this. please help?
thanx for help
Like WillM I followed this and the menu is up, but the dropdown doesn’t work. I think the wp_list_pages is working though because if I get rid of the display:block; in the ul code I can see the subnavigation appear.
But for some reason when I hover over the menu it isn’t working. Any Ideas?
I’m working locally with MAMP.
Fine if you don’t have IE6 users. Useless otherwise.
Is time to move and forget ie6
Hi,
I just added dynamic part to the sidebar, the other to style.css. Don’t know where to place the script.
can anyone help, sorry, quite new in this area …
Hi there!
Is there a possibility to set the cildpages automaticly sorted by alphabet/first letter??
Like the pages.
It makes me crazy because the navigation without alphabetic sorting is realy bad.
Thank you!
Argh…..i’m sorry. It’s alright now. It was my own theme. -.-”
I made a new theme for WP 3.0.1 and the result is a sorted Submenu.
Great! ^^
Sorry, i tried it but it messed up with my site. My theme does not support it may be.. so i chosen another theme which already has drop down box…
thanks a lot! this just saved me hours of working out
gr8..stufff
Great tutorial you can find another tutorial in http://techsloution4u.com/wordpress/create-a-css3-dropdown-menu-in-wordpress.html
why dropdown’s display is block on all pages except home page ??? on
home page script is working perfectly
This is a nice post. Really helpful
I also got similar info. in http://www.7tech.co.in/wordpress/how-to-add-a-wordpress-drop-down-menu-to-your-wordpress-theme/ which is also good.
DOnt know what to tell you.. i have gone with the steps and got a un hidden list meaning the children list is unHidden..
I wish to use a theme named KYSK. It has got a navigation menu which shows all the pages, whether it is a top level page or a sub page. Instead, I want to show a drop-down menu, which shows top level pages in the menu, and sub pages will be shown as drop down menus when I place the mouse on the menu.
I tried with this tutorial, but didn’t work.
How to show that ?
Shitty code because I have so long named dropdowns so they are on multiple lines and this doesnt work with them. Although works fine with only one line names.
goooodddddddddddddddddddd tutorial……………………