[Wordpress] créer un menu déroulant

Résolu/Fermé
Signaler
-
 Profil bloqué -
Bonjour,

J'ai pour tâche de créer un thème wordpress. J'ai suivi un tuto et intégré la bannière et le fond ainsi que la mise en forme des articles. Mais il faut que ce soit un site, pas un blog alors je ne sais pas comment faire pour mon menu : j'ai 6 onglets donc 4 doivent se dérouler pour afficher des sous-catégories et 2 sont directement cliquables.

Ma question est : comment créer ce menu déroulant (j'ai déjà les en-têtes des onglets inclus dans header.php mais pas les sous onglets), et comment le styliser ensuite (avec une image de fond).

Merci beaucoup pour votre aide !

14 réponses


<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style>
#menu2 ul .hide1{display:none;}
#menu2 ul .li1:hover .hide1{display:block;}
</style>
</head>

<body>
<div id="menu2">
<ul>
<li class="li1"> L'association
<ul class="hide1">
<li> <a href="#"> Qui sommes nous ? </a> </li>
<li> <a href="#"> Notre philosophie </a> </li>
<li> <a href="#"> Historique </a> </li>
<li> <a href="#"> Membres </a> </li>
<li> <a href="#"> Partenaires </a> </li>
</li>
</ul>
</ul>
</div>
</body>
</html>

Ca marche ça
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci


Salut,

Il s'agit d'un menu déroulant en css. Le concept est qu'il s'agit d'une liste imbriquée dans une autre liste <ul><li><ul><li></li><li></li> <li></li></ul></li><li></li></ul>. Et lorsque <li> est hover, la sous liste ul correspondant passe de visibility:hidden; à visibility:visible;.
Merci pour ta réponse,

J'avais essayé cette méthode mais je crois que je me suis embrouillée un peu...
J'avais plusieurs problèmes : les intitulés de onglets étaient coupés dans la largeur, il manquait la fin des mots, je sais pas pourquoi; et le hover ne donnait rien.

Mon code css :


#head #banniere #menu {position:absolute;
top:131px;
left:90px;
max-height:39px;
overflow:hidden;}

head #banniere #menu ul li:hover {max-height:505px;}


#head #banniere #menu ul {float:left;
width:135px;
list-style:none;}


#head #banniere #menu ul li a {font-size:18px;
font-family:Myriad Pro;
color:#6e9f0e;
font-weight:bold;
text-decoration:none}

il te faut mettre sur les ul à masquer :

ul {visibility:hidden;height:tahauteur;width:talargeur;}

li:hover ul{visibility:visible;}
J'ai essayé mais ça ne marche pas ...


CSS :

#head #banniere #menu ul li+li {visibility:hidden;height:500px;width:135px;}

#head #banniere #menu ul li:hover li+li{visibility:visible;}


HTML :


<div id="menu">
<ul>
<li> L'association </li>
<li> <a href="#"> Qui sommes nous ? </a> </li>
<li> <a href="#"> Notre philosophie </a> </li>
<li> <a href="#"> Historique </a> </li>
<li> <a href="#"> Membres </a> </li>
<li> <a href="#"> Partenaires </a> </li>
</ul>
</div>

<div id="menu">
<ul>
<li class="li1"> L'association </li>
<ul class="acacher1">
<li> <a href="#"> Qui sommes nous ? </a> </li>
<li> <a href="#"> Notre philosophie </a> </li>
<li> <a href="#"> Historique </a> </li>
<li> <a href="#"> Membres </a> </li>
<li> <a href="#"> Partenaires </a> </li>
</ul>
<li class="li2">tondeuxiemetruc</li>
<ul class="acacher2">
<li>yo1</li>
<li>yo2</li>
</ul>
</ul>
</div>

CSS

.acacher1,.acacher2 {visibility:hidden;}
li1:hover .acacher1, li2:hover .acacher2{visibility:visible;}

Médite là-dessus ^^'
Merci beaucoup pour ton aide mais ça ne marche toujours pas (désolé!).

Je sais pas si c'est moi qui le fait pas bien ou si j'ai un problème ailleurs (déjà je comprend pas pourquoi mes intitulés d'onglets sont coupés au bout alors que j'ai pas touché à leur width...)

HTML :

<div id="menu2">
<ul>
<li class="li1"> L'association </li>
<ul class="hide1">
<li> <a href="#"> Qui sommes nous ? </a> </li>
<li> <a href="#"> Notre philosophie </a> </li>
<li> <a href="#"> Historique </a> </li>
<li> <a href="#"> Membres </a> </li>
<li> <a href="#"> Partenaires </a> </li>
</ul>
</ul>
</div>

<div id="menu3">
<ul>
<li class="li2"> Médiatek </li>
<ul class="hide2">
<li> <a href="#"> Musique </a> </li>
<li> <a href="#"> Galerie photo </a> </li>
</ul>
</ul>
</div>


CSS test 1 :

#head #banniere #menu2 .hide1 {visibility:hidden;}
#head #banniere #menu2 li1:hover .hide1 {visibility:visible;}

(idem pour menu3)


CSS test2 :

.hide1,.hide2,.hide3,.hide4 {visibility:hidden;}
li1:hover .hide1, li2:hover .hide2, li3:hover .hide3, li4:hover .hide4{visibility:visible;}

(idem pour menu3)
J'ai réglé le problème des intitulés tronqués en enlevant le overflow:hidden.

J'ai encore toutes ces propriétés qui se rapportent aux menus, le problème peut il venir de l'une d'entre elles?


#head #banniere {width:1000px;
margin:0 auto;
background:url(images/header.jpg) top left no-repeat;
height:175px;
position:relative}

#head #banniere #menu2 {position:absolute;
top:131px;
left:45px;
max-height:39px;}

#head #banniere #menu2 ul {float:left;
width:135px;
list-style:none;}

#head #banniere #menu2 ul li a {font-size:18px;
font-family:Myriad Pro;
color:#6e9f0e;
font-weight:bold;
text-decoration:none}

Autant pour moi, je suis allé un peu vite en besogne ^^' ce n'est pas visibility : hidden et visible, mais display:none et block.

Dis moi si tu as encore un souci.
En fait c'est le hover qui ne réagit pas même en mettant un changement de couleur il ne se passe rien. Du coup display:none et block ne marchent pas non plus...

Mets juste ça

#menu2 ul .hide1{display:none;}
#menu2 ul .li1:hover .hide1{display:block;}
Ca ne fonctionne pas...
J'avais appris à le faire comme ça :

div{background-color:thistle;
border:2px solid mediumvioletred;
width:100px;
max-height:40px;
overflow:hidden;
-moz-transition-property:max-height;
-moz-transition-duration:1s;
float:left;}

div:hover{max-height:505px;}
Merci beaucoup pour ton aide ! Mon problème est résolu grâce à toi !
Bonne continuation en tout cas !

De rien !