Menu déroulant
Profil introuvable Le 20 juin 2016 à 15:57 (Édité le 25 janvier 2019 à 17:51)
Je voudrais savoir comment faire un menu déroulant en html/css.
De sorte à ce que quand on passe la souris sur un des titre du menu (:hover) celui ci déroule.
En espérant avoir été assez clair,
Z Fire
Profil introuvable Le 20 juin 2016 à 16:26
Voici le code du menu déroulant 😉:
Code HTML :
<!DOCTYPE HTML>
<html lang="fr-FR">
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="design.css"/>
<ul id="menu-demo2">
<li><a href="#">Lien menu 1</a>
<ul>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
</ul>
</li>
<li><a href="#">Lien menu 2</a>
<ul>
<li><a href="#">Lien sous menu 2</a></li>
<li><a href="#">Lien sous menu 2</a></li>
<li><a href="#">Lien sous menu 2</a></li>
<li><a href="#">Lien sous menu 2</a></li>
</ul>
</li>
<li><a href="#">Lien menu 3</a>
<ul>
<li><a href="#">lien sous menu 3</a></li>
<li><a href="#">lien sous menu 3</a></li>
<li><a href="#">lien sous menu 3</a></li>
<li><a href="#">lien sous menu 3</a></li>
</ul>
</li>
<li><a href="#">Lien menu 4</a>
<ul>
<li><a href="#">Lien sous menu 4</a></li>
<li><a href="#">Lien sous menu 4</a></li>
<li><a href="#">Lien sous menu 4</a></li>
<li><a href="#">Lien sous menu 4</a></li>
</ul>
</li>
</ul>
#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #65537A;
background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#menu-demo2 li:last-child{
background-color: #CFFF6A;
background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#2A2333;
}
#menu-demo2 li:nth-child(2) li{
background:#333A40;
}
#menu-demo2 li:nth-child(3) li{
background:#9F391A;
}
#menu-demo2 li:last-child li{
background:#677F35;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#65537A;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#729EBF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#F6AD1A;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#CFFF6A;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}
En espérant t'avoir aider 😉
Profil introuvable Le 20 juin 2016 à 16:30
Tu peux modifier ce code comme tu veux, c'est mon code que j'utilise pour mon site web, il n'y a pas de copyright sur celui-ci 😉
Si le sujet est résolu, merci de cliquer sur "Marquer ce topic comme résolu" 😉
Pour toute demande de questions, je suis disponible 😉
Bonne continuation 😉
Profil introuvable Le 20 juin 2016 à 16:30
Profil introuvable Le 20 juin 2016 à 16:33
Oui c'est vrai 😉 mais je peux t'expliquer en détails le code si tu veux 😉
Profil introuvable Le 20 juin 2016 à 16:43
Profil introuvable Le 20 juin 2016 à 16:49
La pseudo-classe ":first-child" permet de cibler un élément qui est le premier élément fils par rapport à son élément parent. Je ne sais pas si tu as compris :p
Profil introuvable Le 20 juin 2016 à 16:58
Je ne sais même pas comment définir un élément parent.
Par contre je sais maintenant ce que signifie le pseudo-classe ":last-child".
Profil introuvable Le 20 juin 2016 à 17:02
Voici un exemple :
Code CSS :
span:first-child {
background-color: lime;
}
<div>
<span>Ce <span> est vert !</span>
<span>Mais pas celui-là :(</span>
</div>
Ce <span> est vert ! Mais pas celui-là :(
Compris ? 😄
Sinon j'ai d'autres exemples si tu veux 😉
Balatharas Le 20 juin 2016 à 19:13
Profil introuvable Le 20 juin 2016 à 19:17
Je suis ravi que t'es pu apprendre quelque chose 😉 c'est pour cela que ce forum à été créer, pour nous entraider chacun 😉
