WordPress: Menu déroulant pages et catégories
Posté par jbj le 15 mar 2008 dans Wordpress • 106 commentaires
Mon récent article "Menu de catégories style magazine", que j'utilise notamment pour mon thème OpenBook, a intéressé de nombreux blogueurs. Toutefois, l'un d'entre eux a souhaité en faire une variante, qui afficherait les pages ainsi qu'un élément "catégories" qui déroulerait la liste des catégories disponibles au survol. Voici un petit tutoriel pour la création de ce menu.
HTML et PHP
Nous allons commencer par récupérer nos pages et sections et créer des listes imbriquées. Éditez le fichier header.php de votre thème, et insérez le code suivant à la place de votre ancienne navigation :
<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="#">Catégories</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>
Ce petit bout de code va nous générer une liste de toutes les pages, plus un dernier élément de liste nommé "Catégories". Au survol des éléments de premiers niveau, nous allons afficher les sous-pages (dans la cas d'une page) et les catégories, dans le cas du dernier élément de la liste, nommé "Catégories".
CSS
Bien entendu, bien que le code ci-dessus soit fonctionnel, notre script a besoin d'un bon coup de styling CSS. Ce css, issu du thème Mimbo de Darren Hoyt fera tout à fait l'affaire :
#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
Les navigateurs modernes (Safari, Firefox, Opera, Internet Explorer 7) sauront interpréter les pseudos classes :hover sur d'autres éléments que les liens. Ce n'est – comme on pouvait s'en douter – pas le cas du fossile Internet Explorer 6. Pour assurer la compatibilité avec ce "navigateur", nous allons devoir charger un petit bout de Javascript non-intrusif :
<![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);
//--><!]]>
Voilà , votre nouveau menu déroulant est désormais prêt et donnera assurément un look professionnel à votre blog WordPress.
A noter, étant sous Mac, je n'ai pas testé le code avec Internet Explorer.
Partager cet article
Autres articles dans la catégorie Wordpress
- Ecriture d’un plugin WordPress, 4e partie : méthodes avancées
- Ecriture d’un plugin WordPress, 3e partie : finaliser le plugin Twitter
- Ecriture d’un plugin WordPress, 2e partie : la structure d’un plugin Twitter
- Ecriture d’un plugin WordPress, 1e partie : les bases
- Géolocalisation IP avec PHP et WordPress
- 10 très beaux thèmes wordpress premiums
- Themes wordpress
- 10 customisations du thème WordPress Thesis
- 25 hacks WordPress
- MarketTheme, le thème WordPress pour la vente en ligne
[...] de ce menu qui affichera vos page ainsi que vos catégories. Pour les intéréssés, ça se passe ici. Partager: Ces icones representent les sites de bookmarking social dans lesquels vos lecteurs [...]
Merci, c’est super, ce script fonctionne très bien, c’est exactement ce qu’il me fallait…
Très bon tuto y compris le premier qui reprend le menu de révolution. Ca tombe bien parce que je suis justement en train de réfléchir à un thème de type mag et je pense que tout celà me sera utilie
A ++
Super content que ce petit tuto vous rende service! En effet, l’idée de ZigZag est carrément géniale et je suis en train de me demander si je ne reprendrais pas ce menu ci pour la prochaine version d’OpenBook
WordPress: Menu droulant pages et catgories…
Mon rcent article Menu de catgories style magazine, que jutilise notamment pour mon thme OpenBook, intress de nombreux bloggeurs. Toutefois, lun dentre eux souhait en faire une variante, qui afficherait les pages ainsi quun lment catgories qui affich…
Je l’ai mis avec le JS ça parait passer sous IE.
Dès que mon site est en prod, je vous enverrai le lien.
Merci encore jbj pour ta réactivité et tes précieux conseils.
Oui, n’hésites pas à nous filer le lien (En plus les commentaires du blog sont en dofollow
) j’ai hâte de voir ce que ça donne sur un site en prod. Quand à IE, en toute logique ça devrait être nikel sous le 7, sous le 6 par contre je ne sais pas.
Quelque-un peut il nous préciser comme ça se passe sous IE7/6? Merci!
Si qqun a un site qui est déjà fonctionnel avec ce tutos, je peut tester sous IE6 (Win 2K Powa x))
ça pourrait effectivement valoir le coup que je fasse des démos de ce menu et de l’autre…C’est vrai que ça manque pas mal sur mon blog de pouvoir tester « en live »…Bonne remarque BlackKrystal, je tente de faire ça rapidement
C’est excellent
Merci André. Ce menu irait bien sur ton thème!
[...] Menu déroulant pour WordPress: Lyxia [...]
WordPress: Menu déroulant pages et catégories…
Mon récent article “Menu de catégories style magazine“, que j’utilise notamment pour mon thème OpenBook, à intéressé de nombreux bloggeurs. Toutefois, l’un d’entre eux à souhaité en faire une variante, qui afficherait les pages ainsi …
salut jbj, juste un précision, le code javascript pour IE6/7 je le met où ?
Directement dans la page ?
Perso je l’ai mis dans un fichier à part que j’inclus dans ma page via un commentaire conditionnel pour IE. A près, rien ne t’empêche de le mettre dans la partie head de ta page html, mais si c’est moins propre.
ok, encore merci, je viens d’installer le menu sur mon blog et ca marche nickel.
Super, il rends vraiment bien sur ton blog! En tout cas, ravi d’avoir aidé un ami des Macs
jbl,
Je ne suis pas très bon en code… pourrais-tu préciser le code (commenaire conditionnel) d’appel du javascript – avec le [CDATA[, je suis un peu perdu.
Sinon, j’ai utilisé le code sur le site http://www.jeanclauderadier.com – c’est superbe sous safari, Firefox, Opera, mais il semble qu’il bug sous IE6 et IE7. Quelqu’un peut-il me confirmer çà ? je suis sur Mac e je ne peux pas vérifier.
Merci
Salut Gérald, en effet, ton menu ne fonctionne pas sous IE. J’ai juste regardé en vitesse pour le moment et ça vient du bout de javascript. Essaie de virer ces lignes:
<![CDATA[
//><!–
et:
//–><!]]>
Je regarderais ça plus en détail demain, en attendant, je te conseille de lire cet article si tu souhaite installer IE6 et IE7 sur ton Mac pour tester tes sites, ainsi que celui-ci qui t’en dira plus sur les commentaires conditionnels.
Holala, super cet article, je vais de ce pas le tester sur mon site, j espere que ca marche sous ie, car j ai deja eu des problemes avec un script du meme type mais qui ne fonctionnait pas sous ie.
En tous cas merci.
Jbl,
Le menu fonctionne maintenant parfaitement Рtest̩ sous IE 6, 7, safari, Opera, Firefox. Merci !
Gérald
Bonne nouvelle, merci pour ton retour!
[...] une meilleur compréhension. J’ai mis en place le menu déroulant catégorie grâce au site http://www.Lyxia.org . voilà ce n’est pas grand chose mais je trouve que c’est plus [...]
Salut !
Question Quiz : Serait-il possible, qu’une fois une section choisi dans le menu déroulant (admettons Apple, dans Catégorie), cette section (Catégorie) apparaisse dans un sidebar avec les sous-menus (Apple, iPod/iPhone, etc) afin de ne pas avoir à repasser par le menu déroulant et ne pas perdre le fil de sa visite ? (J’espère que je m’exprime bien !)
Merci !!!
Isabelle
Oui oui, c’est tout à fait possible et à mon avis facilement réalisable
Ton idée est bonne et fera l’objet d’un prochain article.
En gros le principe est simple: déterminer si on est dans une page « categorie » ou dans une page « article ». Dans ces deux cas, récupérer la catégorie courante et remonter jusqu’à la catégorie mère (Par exemple Apple, si tu es dans iPhone). Ensuite, lister les catégorie enfants en mettant en valeur la catégorie dans laquelle se trouve le visiteur.
J’espère que c’est assez clair
Cela s’appelle un breadcrumb (http://en.wikipedia.org/wiki/Breadcrumb_(navigation))
ça ne marche pas sous IE 6 pour moi
en relisant le code, il manque des balises : …
@herisson: Merci pour l’info
@miamo: Il m’est déja arrivé que WordPress « mange » certaines balises lors de l’édition d’un article. Bizarre cependant que ce soit le cas de cet article, vu le nombre de gens ayant mis en place ce menu je suis étonné que ce problème ne me soit signalé seulement maintenant.
Je ne vois rien qui cloche après avoir relu rapidement. Du coup, si tu pouvais nous dire ce qui ne va pas selon toi, je pense que ça rendrait service à pas mal de gens
je ne sais pas pourquoi ça ne l’a pas pris dans mon précédent post : pour faire marcher ce menu j’au du ajouter les balises javascript.
Ouais, le code passe mal (ou carrément pas) dans les commentaires. AUrais-tu un exemple en ligne de ton code modifié?
[...] 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 à [...]
Hello,
J’ai un soucis en essayant de placer ce menu ou plutot en essayant de le parametrer.
J’ai beau essayer les différentes variables (un peu au hazard, c’est vrai !) mais le menu grisé n’est pas à la verticale de sa categorie. Il est décalé d’environ 30 pixels sur la droite…
Je ne comprends pas ! help !
Merci
Tu as un exemple en ligne? Je ne suis pas sur de bien comprendre ton problème, mais si tu as un décalage de 30px sur la droite, un petit margin-left:-30px; sur l’élément en question devrait régler le problème
Coucou
merci pour cet article : voici ce que j’en ai fait
http://www.zepoze.com/newz-d-un-blog-artistique-au-theme-noir-et-blanc/
A plus Zepo
Belle mise en pratique! Ravi de t’avoir été utile
Yep ! ton blog est bien cool, hop dans mes flux
ravie de découvrir toutes tes astuces
bizald!
Hello,
Désolé, etant un peu newbie, je ne sais pas quelle partie du code du header remplacer par:
….
Peux tu me préciser le bout de code qui va « gicler » ?
Merci !
Il faut que tu « gicle », non pas sur le clavier, mais la fonction wp_list_pages() en entier
Désolé pour la blague foireuse de bon matin
Hello,
Bien vu pour la blague !
Je viens de faire la modif, mais ca plante, le menu passe dessous du bloc central:
http://achatguitare.com/blog/
Merci pour ton aide
Dans nav.css, cherche #nav li ul et donne lui comme propriété z-index:999;
Et voilÃ
Hello,
Merci pour ton aide (et ton humour !)
Par contre maintenant, les déroulés du menu ne sont pas totalement droits.
Peut-on corriger cela ?
Tu peux les décaler d’un pixel vers la gauche et carrément enlever la bordure de gauche. Ce que je trouve bizarre c’est le dernier élément qui est décalé par rapport au reste. Faudrais que je regarde ton code plus attentivement, la j’ai pas trop le temps mais je te dit si je trouve qqchose
Salut,
Je cherchais un menu déroulant à mettre sous mon bandeau. Celui-ci pourrait-il convenir à ton avis, sachant que les items ou les sous-items ne font pas référence à des articles ou des catégories mais à des pages.
ex : item1 = page d’accueil, sous-item1.1= actualités sous-item1.2 = contacts etc…
J’ai choisi le thème par défaut. Dois-je supprimer tout le contenu de mon header.php et le remplacer par ta proposition ?
Mes questions sont celles d’une grande débutante…
Merci d’avance de ta réponse.
Raphaëlle
Hello,
SI tu veux lister les pages au lieu des catégories comme je le propose ici, il te suffit de remplacer wp_list_categories() par wp_list_pages().
De la à dire si ça conviendrais sur le thème par défaut, j’en sais rien du tout. Ce qui est sur, c’est qu’il ne faut pas supprimmer tout le contenu de header.php: intègre juste la fonction que je propose là ou tu souhaites voir apparaitre le menu.
Bon courage!
Bonjour,
Je te contacte car ton système est vraiment super !
Toutefois, je souhaiterai appliquer aussi le menu déroulant, pas uniquement « catégories », mais également sur « test » (voir mon URL). Cela est il possible ?
Merci et bonne soirée !
Salut David, pour ce que tu veux faire, je pense que ce tuto sera plus adapté.
Si tu veux lister les pages + les sous-pages au lieu des catégories + sous-catégories, remplace simplement wp_list_categories() par wp_list_pages().
merci pour ton aide.
En fait, je souhaiterai faire comme sur ton blog: appliquer des menus déroulants sur des catégories principales. Cela est-il possible ?
Merci d’avance pour ta précieuse aide.
David
Oui c’est tout à fait possible, tu n’as qu’a suivre le lien que je t’ai donné dans ma précédente réponse
Salut et merci pour ton aide.
En fait, je ne sais pas ou placer le code dans header.php sachant que j’ai déjà mis sur cette page le script ou catégorie est un menu déroulant.
De plus, pour le code CSS, je dois simplement l’ajouter dans style.css de mon theme ?
Merci encore pou ta réactivité
Remplace le premier script (celui ou catégorie est un menu déroulant) par celui de l’autre tuto. Et pour le css, c’est ça tu le rajoute en bas de ton fichier style.css.
Bon courage
salut,
j’ai esssaye ta methode pour les menus
deroulant sous wordpress, mais j’ai quelques bug :
- quand je survole une categorie, je n’arrive pas a
atteindre les cateories filles pour cliquer dessus
- ces categories ne s’affichent pas a gauche,
alignes sur la categorie mere (comme sur
ton site)
quelqu’un a t il eu le meme probleme que moi..
merci d’avance
est-ce que tu pourrais me dire ce que je dois faire
merci d’avance pour ta réponse
beber, tu as un endroit ou je pourrais voir ton menu?
salut jbj
malheureusement, mon site n’est pas hébergé, je ne peux donc pas te montrer..
par contre si tu veux je peux t’ envoyer par mail une capture d’ecran
merci d’avance
ouais va pour la capture! maile moi via le formulaire de contact.
Bonjour,
:
En pleine préparation d’un futur thème, j’en suis encore au stade du papier et stylo
La solution que tu proposes pourrait m’aider (sachant que je ne suis pas un développeur hein
En clair, je souhaiterais utiliser ce même style de menu, mais plutôt dans une sidebar, ce qui donnerait une liste de pages les unes sous les autres, puis, en arrivant sur « catégorie », le sous menu se déroule à droite …J’espère être clair dans mes explications. Ce n’est peut etre qu’une astuce CSS ?
Qu’en penses-tu ? merci
En tout cas, je deviens un afficionado de tes articles. Chapeau Monsieur !!
Salut Florent et merci pour tes compliments
En gros ce que tu veux faire, c’est afficher les sous catégories lorsque l’utilisateur se trouve sur une page de type « catégorie »? Si oui, c’est super simple à faire
Oui, c’est ça, mais dans la sidebar. Tu dis que c’est super simple ??? Pas pour moi
Alors, de tête:
Place ce code dans ton fichier sidebar.php:
<?php
if (is_category()) {
$this_category = get_category($cat);
echo « <ul> »;
wp_list_categories(‘orderby=id&show_count=0&title_li=&child_of=’.$this_category->cat_ID);
echo « </ul> »;
}
?>
En gros, après avoir vérifié qu’on était bien dans une page de catégorie, on récupère l’ID de la catégorie en question, puis on va lister les catégories enfants de celle-ci.
J’ai fait ça de tête, donc sois indulgent si jamais ça ne marchais pas
Woooow, vraiment trop sympa !!! Merci, je vais essayer comme ça
bonjour, juste un petite question, ( je debute avec wordpress)
dans le code html vous faites rérérence à la class « clearfloat »
» »
ou ce trouve le css de cette class
est ce une classe du modèle css par défaut ?
j’ai fait une recherche sans succès.
merci
d’avance
Très bonne question eddy! En fait cette classe vient du thème OpenBook, lui meme dérivé du thème Mimbo. Je l’ai reportée ici par habitude, mais elle n’est d’aucun interet. Tu peux donc la supprimer.
Bonjour,
N’étant pas de formation dev, je viens ici demander quelques conseils afin de personnaliser mon menu déroulant. (http://www.bijoux-book.fr)
Je voudrais qu’il soit directement indexable comme c’est le cas ici (pour le référencement) mais pouvoir facilement regrouper l’ensemble des pages statiques dans une partie, et séparer chaque catégorie dans un menu propre. (un pour les bagues, un pour les bracelets…)
Merci d’avance pour votre aide et je pourrai vous donner quelques conseils en échange en référencement.
Thierry
Bonjour,
je cherchais quelque chose dans ce style et cela va bien me servir … donc merci pour ce tuto et cette fonction utile.
Mais, car il y a toujours un mais. quand je clique sur une de mes catégories (les murmures24/24) je tombe sur l’archive de cette catégorie et j’ai toutes les catégories qui s’affiche ??? c’est la seule qui ce comporte comme ça…
le liens du site va directement sur cette page.
Curieux comme problème…Je suis pas sur de bien comprendre ce que tu veux dire, mais ça m’étonnerais fort que ce soit du au menu en lui-même.
bonjour,
svp quelques précisions pour installer cet excellent menu
j’ai mis le code dans le header mais le menu est vertical et je le souhaite horizontal, comment modifier.
merci
Salut cdb,
Tu as de la chance, j’avais justement écrit un petit tuto pour réaliser le même menu en version horizontale.
Merci pour ta réponse mais je n’arrive pas à installer le menu.
Je vais faire d’autres essais
bonjour jbj
j’ai installé le menu, j’ai un décalage dans catégories lors d’une sous catégorie.
J’utilise le thème The morning after et j’aimerais faire ressortir uniquement les pages, est-ce possible, merci
Tu veux dire, avoir un menu déroulant pages et sous pages? Sinon pour ton problème de décalage, y’a t’il un endroit ou je peux voir le site?
merci pour ta rapidité
le lien c’est http://carnetdebord.info/zeblog/ (provisoire) (j’ai encore pas mal de taf afin que ce soit correct, je commence tout juste avec wordpress)
pour le menu j’essaye de faire des modifs dans la feuille de style, évidement pour l’instant pas réussi à le faire fonctionner sous IE, et le décalage dont je parle se trouve dans catégories (en dessous du titre)
Bonjour,
J’ai commencé par créer mon menu de navigation en html sans créer de page. Donc mes pages sont virtuelles et n’ont pas d’ID. http://charivari.ouvaton.org
Dois-je d’abord créer mes pages ? Dois-je renoncer au code html ?
Merci par avance de bien vouloir m’éclairer sur ce sujet.
Cordialement,
Raphaëlle
Oui c’est pas mal du tout. Mais personne n’a encore posé la question non?:
Comment je fais si je veux avoir le menu « Catégorie » par ex. en 3ème position et non au début ou en dernier?
@David: C’est forcément possible mais pas évident, vu que wp_list_pages() te liste toutes tes pages…
Comme ça je dirais qu’il faudrais mettre les valeurs dans un array au lieu de les imprimer direct à l’écran, puis insérer le menu catégorie à la troisième position de l’array…
Je dit ça « comme ça », j’ai jamais testé. Bon courage!
Merci pour ta réponse.
Ou avoir une page fixe pour « Catégories », un js qui repère le li avec la class « page-item-numero de la page fixe pour Catégories », et qui au survol affiche l’ul (avec une id dessus) contenant wp_list_categories ?
Bonjour et merci pour cet article qui m’a été fort utile (car je n’y connais absolument rien en programmation) !
J’ai réussi en bidouillant à faire mon menu déroulant à peu près comme je le souhaitais…
Deux petits trucs qui me tracassent cependant :
1/ le menu déroulant (les pages filles) est décalé par rapport à son titre (page mère), que dois-je modifier pour remédier à cela ?
2/ l’espace entre les différents liens des pages du menu déroulant est important. Comment le réduire ?
Sinon, je n’ai pas encore réussi à la faire fonctionner sous IE 6…
En fait je n’ai pas bien compris où placer le code Javascript ? J’ai fait plusieurs essais (avec et sans les balises ) mais ça ne marche pas… (du coup en attendant j’ai tout viré). Où faut-il placer cette commande exactement ?
Merci d’avance !!
Salut Cécile,
Pour ton problème de décalage, rajoute ce petit bout de css en bas de ta feuille de style:
#nav li ul{
margin-left:-41px;
}
Pour le js, tu dois le placer entre les balises <head> et </head> (Dans le fichier header.php), de la manière suivante:
<script type= »text/javascript »>
… le code ici
</script>
J’espère avoir été assez clair. Sympa ton boulot de dentiste équin, j’aime beaucoup les animaux
Merci pour ta réponse !
Le css pour décaler le menu à gauche marche très bien, par contre le Javascript pour IE 6 ne fonctionne toujours pas !!! :s
Je l’ai bien mis entre les balises que tu m’as indiquées avant dans le fichier header.php … J’ai essayé en supprimant aussi les balises DATA et ! ,comme tu le conseillais dans un commentaire au dessus… aucun changement !
Sinon j’aurai aimé que les boutons de mon menu soient en couleur (comme ils l’étaient à l’origine dans mon thème). Sais-tu où je dois rajouter un code pour les mettre en couleur (sachant que je veux que cette couleur soit pour les boutons des pages mères uniquement) ? et quel code ( un background: #…. est-il suffisant) ?
Merci pour tout !
PS: et merci pour mon boulot
c’est vrai que c’est peu commun, et tellement agréable de bosser avec les animaux !
Je vois quel est ton problème: Il te suffit de remplacer à la main les guillemets: « »
Pour ta modif de couleur, c’est un peu plus pointu: En effet un background:#XXX sur le lien fonctionnera, mais tu devra également allr redéfinir cette propriété sur les pages enfants.
Bonjour,
Merci pour ce code depuis le temps que je cherchais comment retaper mon menu…
Me reste encore à l’arranger un peu mais ça le fait!
Par contre avec IE 7 j’ai un décalage a chaque niveau dans les sous menu et si je rajoute …
#nav li ul{
margin-left:-41px;
}
… j’ai toujours le décalage mais dans l’autre sens. Je vais continuer à chercher une solution mais si vous l’avez je suis preneur
le site —> http://benoit-toufflet.ovh.org
Bonne continuation et encore merci
Salut !
Pratiquement presque presque ce dont j’ai besoin ! Moi je veux que le menu déroulant indique mes sous-pages, classé directement dans l’admin de wordpress. En bidouillant un peu j’y suis presque arrivé !!!
Le tout affiche les pages mais aussi les sous-pages. Moi je voudrais qu’elles apparaissent dans un autre menu juste à droite du menu déroulant (j’espère être clair)…
Merci d’aider le nouvel utilisateur que je suis !
Bonjour, merci pour ce post!
Serait il possible de connaître le code permettant d’afficher aussi les sous pages sur le menu déroulant ?
D’avance merci.
Super, un grand merci pour ces bout de code !!
Salut,
Etant donné que j’ai beaucoup de pages et sous-pages, je cherche à créer un menu déroulant horizontal (plutôt qu’un dans la sidebar, encombrant…). Donc, après quelques recherches, j’ai atterri ici. J’ai tenté tant bien que mal d’insérer le code dans header.php et le fichier css, mais ça n’a pas du tout l’effet escompté :
http://vauxnoville.webou.net/wordpress/wp-content/uploads/2009/04/prtscr.jpg
Je dois bien avouer que j’ai essayer un peu tout et n’importe quoi, rien n’y fait.
Voici le code original de mon header :
http://vauxnoville.webou.net/wordpress/wp-content/uploads/2009/04/codeheader.jpg
Que dois-je faire et où dois-je placer les fameuses lignes? Bref, comment faire pour que ça fonctionne…
D’avance merci
Hello…
J’ai un renseignement à demander…si je veux aller plus précisément dans le script Php et que je décide d’afficher seulement certaines catégories comme en pouvoir exclure d’autres, qu’est ce que je dois rajouter comme ligne de code ???
Merci de la réponse et encore bravo…
Thomas.
En fait je suis obligé de faire un deuxième menu similaire au premier inspiré du script de cette page.
Je ne veux pas faire donc de répétition des catégories du 1° menu dans le second menu et souhaite donc afficher des categories au choix…
Voilà …j’espère que j’ai été un peu plus clair…
A toute…Thomas.
Et si même au final, vous pouviez me dire comment forcer l’affichage des catégories seulement dans un certain ordre…
Voilà …j’arrête de vous embêter;en attendant votre réponse…merci beaucoup.
Thomas.
Salut Thomas, si ce que tu veux faire est régie par une certaine logique comme le respect de l’arborescence des catégories (parent, children) et le tri sur le nom (orderby=name) ou l’id catégorie tout va bien mais si tu sors de là autant le faire en dur.
Bonjour,
Tous d’abord merci pour ce menu déroulant ultra simple d’utulisation
.
J’ai quand même un petit problème avec notre chère ami IE. J’ai copié le code dans le header.php comme ci dessous, mais sans succès j’ai sans doute du faire une erreur.
D’avance merci
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);
Pour ceux qui désirent un menu plus intelligent (afficher les sous-catégories dans les sous-menus), il suffit de faire ça :
Le nom de votre catégorie mère
« 1″ étant l’id de la catégorie mère.
Vous pouvez rajouter autant de fois le code en changeant l’id de la catégorie mère.
Les sous-menus ne s’affichent que s’il y a un article dans la sous-catégorie.
Pour ceux qui désirent un menu plus intelligent (afficher les sous-catégories dans les sous-menus), il suffit de faire ça :
<li class="cat-item"><a href="#">Le nom de la catégorie mère</a>
<ul class="children">
<ul>
<?php wp_list_cats(‘sort_column=id&optioncount=0&use_desc_for_title=0&child_of=1′); ?>
</ul>
</ul>
</li>
"1" étant l’id de la catégorie mère.
Vous pouvez rajouter autant de fois le code en changeant l’id de la catégorie mère.
Les sous-menus ne s’affichent que s’il y a un article dans la sous-catégorie.
Salut merci bien pour ces bouts de codes.. très utiles…
Cependant, je ne voudrais pas que mon ctg-divider.gif (l’image de séparation de mes menus) ne se répète pas dans mes sous-menu car c’est pas très beau…
Je sais que t’es très sollicité, j’ai un peu fouiller au niveau css mais je pense que c’est la nav de base qui embête. Aurais-tu une solution? je veux qu’elle reste quand même entre mes boutons de menu principaux.. je sais je suis difficile.. hehe
Thème: Interiorset 3
merci beaucoup si t’as le temps de répondre à ma question et merci encore pour ce code.
Bonne soirée
Raph
Bonjour,
j’ai voulu me servir de ce menu déroulant pour mon menu mais j’ai un problème avec l’affichage des catégories filles-filles (désolée je n’ai pas encore le bon vocabulaire..). Le menu n’est peut-être pas fait pour être surchargé = S
voici l’adresse du site > http://montaigu.basket.free.fr/
le problème est visible dans l’onglet « présentation du club ».
Auriez-vous une solution ?
Bonjour et merci pour ce menu déroulant.
Toutefois j’ai un petit soucis.
sur la page d’index, le menu passe SOUS le contenu..
impossible de trouver où corriger ça, je ne suis pas une pro du php, donc si quelqu’un a un conseil à me donner je suis preneuse!
merci encore.
Bonjour,
J’utilise le thème contender-fr. Sachant que je suis « carrément nul » en code, j’aimerais pouvoir obtenir une double liste déroulante ou la liste des sous-catégories s’adapterait automatiquement avec le déroulement de la liste catégorie mère. Est-il possible et si oui comment dois-je faire cela? Merci d’avance et bravo pour ce boulot.
salut, merci pour ce tuto, c’est ce que j’aimerai faire, cependant je n’y arrive pas voici mon soucis, j’ai pour l’instant 4 pages d’auteurs (julie, adrien, remi, josepe) et j’aimerais faire une pages « auteurs » avec commes sous pages les pages d’auteurs déja faites.
j’ai essayé de jouer avec les attribut des pages, mais cela fait disparaitre les pages que je veux en sous-menu.
j’ai fait un test avec votre code, cela donne a peu pres ce que je voudrais en revanche tout est décalé et la fonction de lien ne marche pas…
voici mon header.php :
<li ><a href=" »>Accueil
et mon .css correspondant a mon menu :
/* navigation */
#menu {
clear: both;
margin: 0 auto; padding: 0;
background: #81C524 url(images/menu.jpg) no-repeat;
font: bold 20px/40px « trebuchet MS », Arial, Tahoma, Sans-serif;
height: 40px;
width: 790px;
}
#menu ul {
float: left;
list-style: none;
margin:0; padding: 0 0 0 20px;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: block;
float: left;
padding: 0 12px;
color: #fff;
text-decoration: none;
background: url(images/sep.jpg) no-repeat 100% 100%;
}
#menu ul li a:hover {
color: #727272;
}
#menu ul li#current a {
color: black;
}
#menu ul li.current_page_item a {
color: black;
}
Comment arranger mon menu avec le votre pour que j’ai ce que je voudrais ? j’ai pas arrêter de bidouiller vos code, et cela ne fait qu’empirer la chose, j’en viens donc a mon dernier recours : vous.
merci de me tenir au courant, n’hésitez pas a me contacter par mail…
j’ai adapté ton code sur mon site mais j’ai des bugg au niveau de la navigation…
regarde et dis moi ce que tu en pense…
merci de me repondre… pliz….
Bonjour,
C’est super ton code!!! merci.
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
Salut,
j’ai intégré ce menu à mon site internet. Merci beaucoup pour ce beau menu !!
J’ai cependant deux petits problemes:
РQuand on affiche le menu d̩roulant une petite ligne grise apparait en bas du sous-menu
– Le menu ne marche toujours pas sous IE.
Je vous redonne le lien de mon site : http://www.planetedentrepreneurs.com/accueil/
Merci de votre aide !
Bonjour,
Je souhaite classer mespages/sous pages sur le thème Massive News. Malheureusement, je n’ai pas de menu déroulant et toutes lespages s’affichent en suivant. Est-ce une erreur de PHP ou de CSS?
Merci
Alors là … comme j’ai ce menu! ok je l’ai modifié après mais il m’a sauvé la vie!
Merci beaucoup ^^
Désolé les gars, ça me va pas. En effet, je bosse plutôt dans l’objectif ‘CMS’.
Dans ce menu horizontal je veux afficher 4 ou 5 catégories : dans un ordre …que je décide !
Donc j’ai opté pour « orderby=slug » en sloggant mes cats ainsi: ‘1-zorro’, 2-actualite’, ‘3-mecanique’… Donc un nommage des slugs qui puisse m’apporter une ordonnance telle que ‘zorro’ soit avant (à gauche de) ‘actu’, en les nommant ‘1-zorro’ et ‘2-actu’ puis en faisant l’appel » wp_list_categories(‘orderby=slug&include=4,1,3,2,&title_li=’); »
Pourtant, je me heurte au prblm suivant: si cette manoeuvre me permet d’obtenir l’affichage des catégories-parent dans le menu et dans l’ordre souhaité, le désastre est que les ’sous-cats’ du ‘drop-down’-menu n’apparaissent pas ! Pas de drop-down-menu, pas de sous-cats !? POURQUOI?
Si vous avez rencontré et résolu ce même souci, merci pour le coup de pouce !
Amicalement,
Den’s
bonjour,
j’ai un petit problème avec le menu déroulant.Après avoir modifier le script , j’ ai mon home qui est diffèrent des autres pages de plus j’ai retirer l’icône catégorie n’en n’ayant pas l’utilité,à la place j’ai une barre noire qui apparait .autre problème, mais sous pages sont trop large.www.gerylonguetfrancoise.com pourriez vous m’aider merci
Bonjour,
Le menu déroulant fonctionne bien pour les pages principales, mais lorsqu’il y a des pages affiliées le ménu déroulant me faire n’importe quoi : http://astridetlefoot.com/
Si quelqu’un à une idée!!!
Merci d’avance et salutations
hello,
J’avais résolu mon problème de ctg-divider.gif. J’utilise beaucoup ton menu il est bien et simple.
Cependant, cela fait un moment que je tourne en rond. Tout marche bien, j’affiche les pages parents et les enfants sans problème. Le a:hover marche bien aussi. Mon problème est que lorsque je suis sur la page parent (ex:services) le style « page courante » marche bien mais du coup les enfants sont aussi en « current_page_item » ce qui perturbe la navigation.
Existe-il un moyen de résoudre ce problème? Malheureusement le site est en accès privé pour la durée des modifications. Tu peux m’envoyer un mail pour que je te file l’accès temporairement.
J’ai aussi un autre problème: J’aimerai bien que quand je suis sur une page enfant, que la page parente soit aussi affichée comme active. Ex: Si je suis sur la page enfant « Immobilier » j’aimerai que la page parente « services » reste aussi active.
J’espère que c’est possible. Vu que tu es très sollicité, merci de ta future aide..
Raph
Merci pour le code c’est ce que je recherche.