How to Create Dropdown Navbars for Your Subpages and Subcategories
78In 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!
Enjoy this post? You should follow me on Twitter!
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!
Thank you for great information. I will come back to your website again. Thanks you very much.
So, could you theoretically make a vimeo.com style dropdown for wordpress?
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.
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!
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.
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.
Thanks for sharing the time to your blog that, I feel strongly about it and love learning more on that topic.
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?
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
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.
It’s this line in the header php file:
<?php wp_head(); ?>
This isn’t dynamic tho, like a traditional WP nav is it?
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.
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.
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.
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?
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.
Nice work, thanks for sharing it with everyone! :)
You advice help me so much too. Thanks
Many thanks
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 =-.
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?
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
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
Thanks for the help! It worked like a charm! Great advice
เรื่องง่าย ๆ ที่ใคร ๆ ก็ทำได้
great. thanks for sharing.
ทำบุญวันเกิด |
ทำบุญวันเกิด |
Thanks for the help! It worked like a charm! Great advice.
news
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
Great tutorial… My only problem is it simply doesn’t work, my menu shows up as a bullet list…
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.
Good job! THANKS! You guys do a great website, and have some great contents. Keep up the good work.
best regards,
ราชบุรี รถมือสอง
This navbar was exactly what I was looking for and couldn’t find anywhere else! Thank you so much. The only problem is that I want to exclude some categories from the list. I don’t really know PHP and copying the code from the sidebar where my original sidebar was didn’t work. I included the navbar on the top of my home.php because this is the way my the is built.
This is the site in question: http://www.popkontext.de/
Thanks, barbara
Nice tutorial for beginner like me. thank you so much this make my work easier than before.
Nice tut, currently implementing this on a child theme for Hybrid. Thanks
What piece of the css code keeps the top category active when you hover on one its subcategories? In the example picture, the category “LOREM IPSUM” stays on hover mode when its subcategory “SIT AMET” is actually what is being hovered.
Thanks for this article. It is very useful.
I agree with you.Thanks for this article. It is very useful.
รถยนต์มือ2 | เกมส์ | รถยนต์มือสอง | เกมส์ทำอาหาร | ตลาดรถบ้าน
This is a remarkable publish, im ecstatic I uncovered this. Ill be back again later to check out other posts that you have on your blog.
This script is great helped me to save a lot of time … Thanks
How can we add third-level sub menu after submenu and top level?
This works great. Except in IE6, the dropdowns do not appear. Is there something I missed or has anyone had this problem.
doesn’t work with Chrome.
OK, so in step 2 you say: “Open header.php in your theme files and look for the following line:” bu I don’t see any line following. What line is this about? Thanks.
Like here is problogdesign they have many fabulous screenshots that’s why many are coming again and again to watch out for new world!
#
Nice tut, currently implementing this on a child theme for Hybrid. Thanks
Reply
great tutorial but a bit too much for me!
will have to find another solution.
was hoping to find a plugin that had an easy interface but messing with those files… hmmmmm
thanks anyways.
maybe I’ll move to thesis hoping there is a skin that’s appropriate for my business and won’t cost an arm..
cheers and ciao!
Thanks you this articles useful for me to develop.
nice dropdown tutorial. thanks for sharing.
Hello,
I used to have a dropdown menu on my website, but since a few weeks, since I made a wordpress update, I do not have it anymore.
When I tried your tutorial, I had a double menu, one with the dropdown, and the normal one…
Can you help me to adapt it to what I already had? It makes a lot of time I spend on it and still don’t understand how to do it, I need some advices.
Thanks a lot!
The procedures that were stated are clearly explained. Thank you for a very well said explanation. Users will be able to make their task fast and easy.
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.
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.
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.
This is my first few lines of CSS for the drop-down menu so a person with little knowledge has the right parameters to move the menu to the desired location.
i usually confuses when i write the HTML code. so, thanks for sharing this.
thank you for your tips
Very best offline. Your site very great goodness
thank you for your tips
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
Thanks you this articles useful for me to develop
Hello,
I used to have a dropdown menu on my website, but since a few weeks, since I made a wordpress update, I do not have it anymore.
When I tried your tutorial, I had a double menu, one with the dropdown, and the normal one…
Can you help me to adapt it to what I already had? It makes a lot of time I spend on it and still don’t understand how to do it, I need some advices.
Thanks a lot!
This article is truly relevant to my study at this moment, and I am really happy I discovered your website.
This article is truly relevant to my study at this moment, and I am really happy I discovered your website.
your css code is good.
Your solution is very cool!! Thanks for your share
I like your website. Thank you for great information. I will come back to your website again.
best regards
Youve got some wonderful tips here. Many thanks
big thanks. helped a lot.
Good solution.. I will try to use this into my website..
Thanks for your share
it works very well with the exception of an very disturbing behavior: when on the “company” a page
your good css code
This script is great helped me to save a lot of time … Thanks
What piece of the css code keeps the top category active when you hover on one its subcategories? In the example picture, the category “LOREM IPSUM” stays on hover mode when its subcategory “SIT AMET” is actually what is being hovered.
Not working. waste of time
Works nicely for top level, but on the “Products” page of my test site, http://www.missbadmanners.com, there are two more pages on the “Rings” level that are not displaying in the menu.
Home
About
Products
>Rings
>Gold
>Silver
>Pendants //this does not display
>For Men //this does not display
Services
>Technical
>Administrative
Contact Us
Hi, nice blog