Wordpress: Menu de catégories horizontal
Posté par jbj le 1 mai 2008 dans Wordpress • 7 commentairesIl 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! 
Wordpress: Menu de catgories horizontal…
Il ya quelques temps, javais publi deux articles sur des menus de navigation droulants. Aujourdhui, je vous propose de crer un menu listant les catgories et sous-catgories, le tout prsent horizontalement.
Le principe est simple: Au survol dune catgori…
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 …
Salut a toi !!!
En guise de préambule que celui qui n’a jamais crée de bogue me jette la première pierre.
Ceci pour dire que je suis une quiche sous wordpress. Bon on fait ce qu’on peut pour apprendre…. Voici mon problème j’essaye de créer un menu déroulant…. C’est une surprise non ? Comme j’en avais un peu marre de bousiller ma page de garde je teste le menu sur une page particulière. Quand je teste ton exemple il m’affiche toutes les sous catégories les unes sur les autres. Le chemin du désastre : http://carcarax.idoo.com/?page_id=3. Je n’arrive pas vraiment a comprendre pourquoi…..
Bon ben voila que dire de plus… Si tu pouvais t’aider…. N’oublie pas que les simples d’esprits ont droit defacto au paradis. Si tu m’aides je parlerais de toi a Jésus promis… mdr
Très très catho ce commentaire….
Bonjour, il m’arrive la même chose, quand j’ajoute des sous catégories, elles sont affichées à coté des catégories. Il y aurait quelqu’un qui pourrait m’aider s’il vous plaît?
Bonjour!
un grand merci pour ce tuto, cela fait deux jours que je m’arrache les cheveux à vouloir faire un sousmenu horizontal!
après quelques réglages pour accorder ce script à mon thème, tout fonctionne à merveille
;p
Bonjour,
Merci pour cet article, j’ai cependant un problème de CSS
Lorsqu’une catégorie est active le sous-menu est « doublé »
Je ne sais pas s’il s’agit d’un pb de CSS ou d’un pb de boucle.
Le problème est visible ici par exemple : http://www.pix-geeks.com/rubrique/geeks/
Les sous-catégories de la rubrique geeks sont affichées sur la droite ainsi qu’en bas lors du passage sur l’intitulé de catégorie
Merci de votre réponse
Bonjour tous le monde,
merci pour ton code impec.
moi mon souci est de réaliser un menu mais qui m’affiche pas les catégories avec ses sous-catégories mais plutôt les catégories avec ses articles de style :
* Titre catégories1
*** titre article1 catégorie1
*** titre article2 catégorie1
:
* Titre catégories2
*** titre article1 catégorie2
*** titre article2 catégorie2
*** titre article3 catégorie2
:
et j’ai essayer pas mal de truc mais rien! je n’arrive pas à combiner les deux au même temps
si quelqu’un peut m’aider ça sera super sympa de sa part
merci