Wordpress: Menu de catégories horizontal

Il ya quelques temps, j’avais publié deux articles sur des menus de navigation déroulants. Aujourd’hui, je vous propose de créer un menu listant les catégories et sous-catégories, le tout présenté horizontalement.
Le principe est simple: Au survol d’une catégorie, nous feront apparaitre, à l’horizontale, la liste de toutes les sous-catégories que compte la catégorie survolée.

Pour ceux qui avaient suivi mon article sur le menu de navigation déroulant pour Wordpress ne seront guère dépaysés: en effet, dans cet exemple, le code php est strictement identique à celui du menu déroulant, les plus grandes différences se situant au niveau de la CSS.
A noter, je n’ai pas testé ce code sous Internet Explorer.

Le php

Voici le code php de notre exemple: Celui-ci va récupérer nos catégories, ainsi que leurs sous-catégories respectives.
Insérez le dans le fichier header.php de votre thème.

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

Le CSS

Outre le fait de contrôler l’apparence des divers éléments, c’est via le CSS que nous afficherons uniquement les sous-catégories de la catégorie survolée par la souris de l’utilisateur. Donc, contrairement à une idée reçu, il n’est pas nécessaire d’avoir recours à du Javascript pour mettre ce genre de menu en place, excepté si l’on souhaite assurer une rétro-compatibilité avec les navigateurs obsolètes comme IE6, par exemple.

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

Une fois les quelques lignes ci-dessus ajoutées à votre feuille de style, vous disposerez d’un menu à la fois moderne et accessible, le tout valide xhtml et css 2. Si vous souhaitez rendre ce code compatible avec IE6, il vous faudra également ajouter ce petit bout de Javascript.

Personnellement, je le trouve moins pratique à l’utilisation que le menu déroulant dont j’avais parlé un peu plus haut, mais celui-ci est plus original et moins répandu.
A vous de choisir!