[Wordpress] créer un menu déroulant
Résolu/Fermé
A voir également:
- [Wordpress] créer un menu déroulant
- Menu déroulant excel - Guide
- Créer un compte gmail - Guide
- Créer un compte google - Guide
- Créer un groupe whatsapp - Guide
- Créer un compte instagram - Guide
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
<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
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;.
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}
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;}
ul {visibility:hidden;height:tahauteur;width:talargeur;}
li:hover ul{visibility:visible;}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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>
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 ^^'
<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)
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}
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.
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...
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;}
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;}
