milodropdown1

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&#160; 10px;text-decoration:none;color:#666;} /* Design for the dropdown links */
.sf-menu a, .sf-menu a:visited&#160; { /* 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!

milodropdown3

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?

milo 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!