May 15 2008

Category: Themes and Tricks

• CSS We Are The Buzz (5 out of 5)
• Throw (5 out of 5)
• qmula (5 out of 5)
• Heartworker (5 out of 5)
• Decently Exposed (5 out of 5)
• Gmcosta (5 out of 5)
• DePo Masthead (3 out of 5)
• Sinklar (3 out of 5)
• Simple WordPress Theme - SimpleWP (3 out of 5)
• Arman Adhitama (3 out of 5)

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!

Digg This Post! | Stumble This Post! | Add this Post to Del.icio.us | Google Bookmark This Post! | Netscape it! | No comment

Hack WordPress © 2008

—
Related Articles at Hack WordPress:

• How To: Display WordPress Categories in a Horizontal Drop-Down Menu
• How To: Remove Ads From Individual Categories
• How To: Creating a Custom Page Template
• Group Your Posts With the In Series WordPress Plugin
• How To: Display the Recent Posts of Specific Categories
• Make Yourself Available to Readers with a Contact Form

Read it at the source