How To: Making a Categories Drop-Down Menu

This guest post was written by Jean-Baptiste Jung, who maintains a blog (written in French) that covers WordPress. If you have webmaster or WordPress knowledge and are interested in writing a post for Hack WordPress, please contact us.

Tired of your old navigation? So, what about creating a Magazine-style dropdown menu?
I propose here a dropdown menu listing your pages and sub pages, including one last item to show up your categories directly in the menu.

HTML and PHP

We will start by using WordPress core functions in order to retrieve our pages and categories. Edit the header.php of your theme, and replace your old nav code by this one:

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

This code will make a list of all our pages and subpages, as well as a last list element named “Categories”. When an user will hover top level pages (in case of a page menu) or top level, categorie, we will show up the related sub pages/categories.

CSS

Even if the code is fully functionnal, our script needs a good CSS styling. This CSS, taken from Darren Hoyt’s free Mimbo Theme, is perfect for what we want to do.

#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;
}

Javascript

Modern browsers (Safari, Firefox, Opera, and even Internet Explorer 7) will not have any problem with the :hover pseudo-class on li elements. But as we can easily guess it, the obsolete IE6 can’t deal with that.

In order to make our script compatible with IE6, we’ll need to charge this little unobstrusive Javascript code, in the head section our our HTML document, or even better, in a separate .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(” sfhover\\b”), “”);
		}
	}
}
if (window.attachEvent) window.attachEvent(”onload”, sfHover);

//–><!]]>

Now, your new dropdown menu is ready and will give your blog a professional look.

—

Enjoy writing about WordPress? Get yourself more exposure by joining the Hack WordPress writing team!

—
Related Articles at Hack WordPress:

Read it at the source

This entry was posted on Thursday, May 15th, 2008 at 11:00 am and is filed under Themes and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. read 105 views

SexyTube

How To: Making a Categories Drop-Down Menu

HTML and PHP

CSS

Javascript

Read it at the source

Last Articles