Wordpress: “Magazine style” Horizontal dropdown menu

Wordpress: “Magazine style” Horizontal dropdown menu

Posted by Jean-Baptiste Jung on Aug 13, 2008 | 88 comments

Even if most blogs have a very simple navigation, Worpress allows you to create very advanced menus. In this tutorial, I’ll show you how to create a “Magazine Style” horizontal drop-down menu, for your categories or even your pages.

Author : Jean-Baptiste Jung

Jean is a 27 years old self-taught web developer and WordPress specialist who lives in Wallonia, the French speaking part of Belgium. In addition to Cats Who Code, he also blogs about WordPress at WpRecipes and about Photoshop at PsdVibe.

Wordpress: Menu de catégories horizontal

The php

The first thing we have to do is to use php to get or pages and subpages (or our categories/sub-categories). Paste the following code in the header.php file of your theme.

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

The CSS

As usual, the CSS will control the look and feel of html elements, but it will also allows us to display only the sub-categories of the selected category. No Javascript is needed in this exemple, excepted if you want to ensure backward compatibility with Internet Explorer 6.

#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 added the lines above to your stylesheet, you'll have a modern, accessible and xhtml/css valid fancy menu. If you want to ensure backward compatibility with IE6, you'll have to add this bit of Javascript:

<!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav2").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);

//--><!]]>

Paste this script into an external file, or in the head section of your index.php file. Once done, your blog now have a fancy dropdown horitontal menu!

88 reactions

» Comments RSS Feed

Leave a comment