Creating a drop-down menu for your categories
Do you use a lot of categories along with their sub-categories? If so, using a drop-down menu is a nice way to categorize content, especially on larger sites. However, giving a quick access to the categories or sub-categories to readers can become a pain.
Over the years, the drop-down menu has become very popular on the Internet. In this recipe, I’m going to show you how to create your own drop-down menu for your WordPress blog categories.
Getting ready
The menu you are going to create will first list your pages, and then at last a tab called Categories will obviously list your categories.
This menu is achieved only with XHTML and CSS. No JavaScript is needed (unless you want to maintain compatibility with it commonly referred to as IE6) to ensure the best SEO possible for your WordPress blog.
How to do it
In order to make this recipe more readable, I have divided it in 3 steps—the PHP and the HTML, the CSS, and the JavaScript for IE6 compatibility.
Step 1: PHP and HTML
Open the header.php file from your theme and paste the following code where you’d like your drop-down menu to be displayed:
<ul id="nav" class="clearfloat">
<li><a href="<?php echo get_option('home'); ?>/"
class="on">Home</a></li>
<?php wp_list_pages('title_li='); ?>
<li class="cat-item"><a href="#">Categories</a>
<ul class="children">
<?php wp_list_categories('orderby=name&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>
</li>
</ul>
The purpose of this code is to make a list of all our pages and subpages, as well as a last list element named Categories. When a reader hovers on one of the top-level menu, the subpages (or categories) are displayed.
Step 2: The CSS
Open the style.css file from your theme and paste the following styles:
#nav{
background:#222;
font-size:1.1em;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
}
#nav a, #nav a:hover {
display: block;
text-decoration: none;
border:none;
}
#nav li {
float: left;
list-style:none;
border-right:1px solid #a9a9a9;
}
#nav a, #nav a:visited {
display:block;
font-weight:bold;
color: #f5f5f4;
padding:6px 12px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
background:#000;
text-decoration:none
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 174px;
border-bottom: 1px solid #a9a9a9;
}
#nav li li {
width: 172px;
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
background: #777;
}
#nav li li a, #nav li li a:visited {
font-weight:normal;
font-size:0.9em;
color:#FFF;
}
#nav li li a:hover, #nav li li a:active {
background:#000;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
a.main:hover {
background:none;
}
You may have to tweak this code a bit to match up to your blog’s look and feel, for example, by adjusting colors. Once you are finished, simply save the file.
Step 3: Optional JavaScript
I’m not going to teach you something new here since, Internet Explorer 6 is a totally obsolete, crappy, and buggy browser. Sadly, many peoples are still using it and you may want to make sure that your blog is IE6 compliant.
Modern browsers as such as Safari, Firefox, Opera, and even Internet Explorer 7 will not have any problem with the :hover pseudo-class on li elements. But you guessed it, it is asking too much from the IE6.
- To ensure backward compatibility on your WordPress blog, create a new file and call it dropdown.js.
- Put this code in the dropdown.js file:
<![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").
getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new
RegExp(" sfhoverb"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//–><!]]> - Save the dropdown.js file and upload it to your wp-content/themes/yourtheme directory.
- Open header.php and add the following line within the <head> and </head> HTML tags:
<!--[if lte IE 6]>
<script type="text/javascript" src="<?php bloginfo(
'template_url');?>/dropdown.js"></script>
<![endif]-->
That’s all! Your blog now has a very professional looking drop-down menu.
How it works
As IE6 cannot deal with :hover pseudo-classes on <li> elements, this small piece of code automatically ads a new CSS class, named sfhover to <li> elements when they are hovered over. When the mouse goes out of the top level element, a new function is executed, using a regular expression to remove the sfhover class.
There’s more…
Now that I have shown you’re the principle of creating a drop-down menu, you can use what you have just learned to create various kinds of menus. As an example, let’s see how to re-use the previous code and create a very nice horizontal drop-down menu.
Creating a horizontal drop-down menu
As you’ll notice by observing the code, there’s a lot of similar things between this code and the one that you saw earlier.
Part 1: PHP and HTML
Simply copy this code where you want the menu to be displayed, for example, in your header.php file:
<ul id="nav2" class="clearfloat">
<li><a href="<?php echo get_option('home'); ?>/"
class="on">Home</a></li>
<?php wp_list_categories('orderby=name&exlude=181&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>
Part 2: The CSS
In modern drop-down menus, CSS are a very important part. Indeed, in this example it is CSS that display our menus horizontally.
Paste the following code in your style.css file:
#nav2{
background-color: #202020;
display: block;
font-size:1.1em;
height:50px;
width:100%;
}
#nav2, #nav2 ul {
line-height: 1;
list-style: none;
}
#nav2 a ,#nav2 a:hover{
border:none;
display: block;
text-decoration: none;
}
#nav2 li {
float: left;
list-style:none;
}
#nav2 a,#nav2 a:visited {
color:#109dd0;
display:block;
font-weight:bold;
padding:6px 12px;
}
#nav2 a:hover, #nav2 a:active {
color:#fff;
text-decoration:none
}
#nav2 li ul {
border-bottom: 1px solid #a9a9a9;
height: auto;
left: -999em;
position: absolute;
width: 900px;
z-index:999;
}
#nav2 li li {
width: auto;
}
#nav2 li li a,#nav2 li li a:visited {
color:#109dd0;
font-weight:normal;
font-size:0.9em;
}
#nav2 li li a:hover,#nav2 li li a:active {
color:#fff;
}
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul,
#nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.
sfhover ul {
left: 30px;
}
Once you have added theses lines to your style.css file and saved it, your WordPress blog will feature a very cool horizontal menu for displaying your categories.
Part 3: (Optional) JavaScript
As usual, if you want to maintain backward compatibility with Internet Explorer 6, you’ll have to use the Javascript code that you have already seen in the previous example.
