In this tutorial, you will see how to display your sub-categories in an animated dropdown, and how to create similar dropdowns for sub-pages as well. You’ll even be able to highlight the page your reader is currently on.
The code is written by milo, and you can see a demo of it in use in one of her free WordPress themes; Nash (Check out the two nav menus in the black header).
The code is very easy to set up and you will have no trouble there. You will want to edit the CSS in the end to make it match your theme, but even for beginners, a little meddling will get you through.
Step 1 – Upload the Files
Download the file dropdown.zip, unzip it and upload the two folders it contains to your theme’s folder. i.e.
yoursite.com/wp-content/themes/yourtheme/inc
yoursite.com/wp-content/themes/yourtheme/js
Step 2 – Edit Your Header
Open header.php in your theme files and look for the following line:
Before that, paste the following. This will call all the JavaScript we need to use.
1 2 3 4 5 6 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('ul.sf-menu').superfish(); }); </script> |
NB – We use Google’s hosted version of JQuery because as it’s on a different domain yours, users can download more files simultaneously while loading the page. And because a lot of sites use this link, they may already have it in their cache and won’t need to download it at all! Handy to remember next time you need to add JQuery to a site.
Step 3 – Add Your Category and Page Navigation
It’s up to you where to put this in your template. Because it’s a dropdown menu, you will want to make it horizontal so your header.php file will usually be the right place to start looking, but each theme is different so you’ll have to find the perfect place yourself.
To add the category navigation, paste the following where you want it to be:
1 2 3 | <div id="cat"> <?php include (TEMPLATEPATH . '/inc/catnav.php'); ?> </div> |
For page navigation, use this:
1 2 3 | <div id="navi"> <?php include (TEMPLATEPATH . '/inc/navi.php'); ?> </div> |
Step 4 – Edit The CSS
Open your theme’s style.css file and paste the following at the end of it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | /* Dropdown Page Navigation */ #navi{height:29px;background:transparent;display:block;padding:0;font:normal 18px Arial,sans-serif;text-transform:uppercase;} #menu ,#menu ul {margin: 0;padding: 0;list-style: none;height:29px;} #menu a {color: #666;display: block;padding: 4px 10px 6px 10px;} #menu a:hover {color: #ccc;display:block;text-decoration: none;background:#0066cc;} /* Design for links when the mouse is over them */ #menu li {float: left;margin: 0;padding: 0;} #menu li li {float: left;margin: 0 0 0 5px;padding: 0;width: 130px;} #menu li li a, #menu li li a:link, #menu li li a:visited {background:#fff;width: 150px;float: none;margin: 0;padding: 4px 10px 5px 10px;color:#333;} #menu li li a:hover, #menu li li a:active {background:#333;width: 150px;float: none;margin: 0;padding: 4px 10px 5px 10px;color:#fff;} #menu li ul {position: absolute;width: 10em;left: -999em;z-index:1;} #menu li:hover ul {left: auto;display: block;} #menu li:hover ul, #menu li.sfhover ul {left: auto;} #menu li.current_page_item a{background:#0066cc;color:#fff;} /* Design for the link to whatever page the user is currently on (if applicable) */ #menu li.current_page_item a:hover{color:#000;text-decoration:none;} /* Dropdown Category Navigation */ .sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;font:normal 14px Arial,sans-serif;text-transform:uppercase;} .sf-menu {line-height:1.0;height:31px;background:transparent;} .sf-menu ul {position:absolute;top:-999em;width:10em; /* left offset of submenus need to match (see below) */} .sf-menu ul li {width:100%;} .sf-menu li:hover {visibility:inherit; /* fixes IE7 'sticky bug' */} .sf-menu li {float:left;position:relative;} .sf-menu a {display:block;position:relative;color:#666;} .sf-menu li:hover ul,.sf-menu li.sfHover ul {left:0;top:30px; /* match top ul list item height */z-index:150;} ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {top:-999em;} ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {left:10em; /* match ul width */top:0;} ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {top:-999em;} ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {left:10em; /* match ul width */top:0;} .sf-menu {float:left;margin:0;width:100%;} .sf-menu a {border-right:1px dotted #d7d7d7;padding: 8px  10px;text-decoration:none;color:#666;} /* Design for the dropdown links */ .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/color:#0066cc;} .sf-menu li {background:transparent;color:#666;} .sf-menu li li {background:#fff;} .sf-menu li li li {background:#fff;} .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {background:#d7d7d7;outline:0;color:#0066cc;} /* Background = Link background colors when the mouse is over them */ .sf-menu li.current-cat a{background:#070707;color:#0066cc;} .sf-menu li.current-cat a:hover{background:#666;color:#ccc;} |
This gives you a good example of what can be done with the design. The code is the same code used in milo’s Nash theme, but with the colors changed slightly to suit a white background.
If you know your CSS, go do as you please at this point! If you aren’t so cosy with it yet, use the code above as your foundation. Just edit the bits you need (Beyond the colors, you probably won’t need to change much!), one thing at a time and you’ll get the design right sooner or later.
We’ve commented the most important parts to help you along. If you have any questions, feel free to ask in the comments!
WordPress subcategories and subpages are not the most overly used parts of WordPress. I’ve written before about using subcategories to allow for your blog expanding, and subpages could be useful for splitting up one page into more manageable chunks (For me, I’ll have to have a think about splitting my services page into Services/Portfolio/Testimonials!).
Do you use either feature on your site? Think these rollovers are a good way to display them?
WordPress Hacks Series: The code in these posts was written entirely by Milo, a web designer from Oxford, Britain. Check out her website for free WordPress themes and her blog, or follow her on Twitter!
Custom Search
John F (1 comments)26 March 09
Great instructions. I can’t wait to try it. Under step two there appears to be a line missing. Which line are we looking for in the header.php file?
Thanks!
The Producer (1 comments)27 March 09
So, could you theoretically make a vimeo.com style dropdown for wordpress?
Tkaniny Obiciowe (1 comments)30 April 09
Only in theory. I think you wouldn’t be able to achieve as great results as vimeo this way but I think you might come pretty close.
kaotoxin (2 comments)27 March 09
Hi there!
I’m in the process of creating a website, using Wordpress as a CMS, thus that tutorial is exactly what I was searching for as a menu for it.
I’ve implemented it on the development version (yet still in quite early stage) and it works very well with the exception of a very disturbing behavior: when on the “company” page (the one which actually has subpages) the menu will drop down with no problem at all. When on the any other page, trying to have subpages of the “company” one showing as a drop down is absolutely impossible…
What can the problem be?
You can check the development site here: http://eropolis.celeonet.fr/metaluna_v3
Please help!
Thank you very much in advance and keep up the good work!
shayne (1 comments)9 April 09
kaotoxin – Are you using different template files for different pages? And the code is not placed in all of the template files? That could be a reason why the dropdowns are only working on certain pages possibly.
kaotoxin (2 comments)9 April 09
I do use different templates for different pages, but they all do include the same header file that the rest of the site… so I guess that’s the whole thing that’s not really working. Check it out, it’s live at the given URL. You can only access subpages in the menu when you are on their parent pages… strange stuff, really… Like if being on a parent page would hide all child pages from other parent pages in the menu…
Besides that, the whole thing was a pleasure to integer in the site and works like a charm right “out of the box”… So I would really love to see it “fully” functional!
Thank you for the reply anyway.
DeViLnoAnGeL InFo (2 comments)28 March 09
this one is really some useful tutorial, but there will be good enough it can be used as a plugin, because some newbie sure don’t want to mess his code if he doing wrong. So can this handle just with a plugin ? or is it can only be done manually?
Online Shopping (1 comments)28 March 09
Hi,
On step 2 its says look for the following line in header.php as shown below:
Step 2 – Edit Your Header
Open header.php in your theme files and look for the following line:
However, the line is not specified. please look at it and correct it and let us know.
thanks
Nadia (1 comments)30 March 09
Hey buddy, great tutorial but I think there’re something missing. When you say:
“Open header.php in your theme files and look for the following line:”
you forgot to put what line we should follow and put the javascript thing. Pls can u help me? Cause I really need this trick. Hope to hear from you.
milo (72 comments)1 April 09
It’s this line in the header php file:
<?php wp_head(); ?>
Nick Rinylo (1 comments)2 April 09
This isn’t dynamic tho, like a traditional WP nav is it?
gaz-j (1 comments)6 April 09
I like this tutorial, i think you have explained it well. The only thing i would say is there seems to be an awful lot of code in the css to use, isn’t there a simpler way of writing the css?
I’m not having a go! Just an observation!
Cheers,
Gaz.
GL3nnX (2 comments)27 April 09
Hi there sir, i am a newbie wordpress designer ,your tutorial is a great resource.. I have just subscribe to your feed. Hope to feature more about wordpress hacks.. thanks a lot.
Allnutz (3 comments)11 May 09
haven´t tried this solution yet but a little tip i learned when i tried to get horisontal dropdownmenus is:
Turn off any cache plugin you have. Otherwise you end up getting odd results because some files isn´t updated even when you refresh the page on the browser.
Allnutz (3 comments)11 May 09
Thank you for this Milo! Got it working right away.
Just wondering haw can i remove the underline?
–> http://www.upleftbass.com/superjanne
Havent figured out how it appears since it isn´t in the css formatting. Atleast i can´t find it. Or is it a default value for you css?
Allnutz (3 comments)11 May 09
Here is my few first rows of the css for the dropdown menu so someone with little knowledge can have the proper parameters to move the menu around their desired place.
/* Dropdown Page Navigation */
#navi{margin-left: 68px;
position: relative;
top: 256px;height:29px;background:transparent;display:block;padding:0;font: bold 13px Arial,sans-serif;text-transform:uppercase;}
#menu ,#menu ul {margin: 0;padding: 0;list-style: none;height:29px;}
#menu a {color: #333;display: block;padding: 4px 10px 6px 10px; text-decoration: none;}
last line here is where i added “text-decoration: none;” to remove the links underlining.
Michael Martin (1319 comments)12 May 09
Nice work, thanks for sharing it with everyone!
ทำบุญวันเกิด (3 comments)20 September 09
You advice help me so much too. Thanks
Many thanks
Navjot Singh (2 comments)29 July 09
Thanks for the awesome tutorial. One of my clients needed this functionality and I was able to do it with your help.
.-= Navjot Singh´s last blog ..Indian Sociable Wordpress Plugin released =-.
Johnies (1 comments)3 August 09
That tutorial is sooooooooo cool…. I worked perfectly….
I have a question though. Can I make Sub-subcategories show in that menu???
For example if I had a videoclub Main Category would be Movies sub category Science Fiction and Science Fiction movies as sub categories for the Science Fiction category?
ทำบุญวันเกิด (3 comments)20 September 09
I am a newbies webmaster I find many way to create dropdown navbar with my wordpress theme. No one can successfull but when I see your titorial. It’s easy to understand. Now It works like a charm on my blog.
hqmusic.net
It’s your great work.
Many thanks
G20central (1 comments)27 September 09
I am having a hard time finding where to put the 3 line ‘page navigation’ code…
http://www.g20central.com
”
”
any suggestions. I would love to not have to change themes…
I can post some code from the header if it helps you help me
this is the most promising find so far!!!
thanks
Troy Hite (1 comments)9 October 09
Thanks for the help! It worked like a charm! Great advice
meritsbirthday (1 comments)15 October 09
เรื่องง่าย ๆ ที่ใคร ๆ ก็ทำได้
swantonsuccess (1 comments)18 October 09
great. thanks for sharing.
ทำบุญวันเกิด (3 comments)19 October 09
ทำบุญวันเกิด |
ทำบุญวันเกิด |
ข่าวบันเทิง (1 comments)21 October 09
Thanks for the help! It worked like a charm! Great advice.
news
Shaun (2 comments)26 October 09
Hey Guys, First off great tutorial!!
Just one quick thing, why is everything in uppercase?
Can we change back to lowercase some how?
Cheers,
Shaun
Katja (1 comments)10 November 09
Great tutorial… My only problem is it simply doesn’t work, my menu shows up as a bullet list…
mike (9 comments)6 January 10
Hi thanks for the tutorial. How does this approach to drop down menus work with a site using rtl.css? I am not sure how to manipulate both the rtl and regular css.
เอเจล (2 comments)25 February 10
Good job! THANKS! You guys do a great website, and have some great contents. Keep up the good work.
best regards,
ราชบุรี รถมือสอง