Menu déroulant

Ce topic a été résolu
Profil introuvable

Profil introuvable Le 20 juin 2016 à 15:57 (Édité le 25 janvier 2019 à 17:51)

Salut,
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

Profil introuvable Le 20 juin 2016 à 16:26

Bonjour 'Z_Fire',

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>
Code CSS :

#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;
}
Enregistre le fichier CSS comme ceci : "design.css" car dans le code html, il est appelé avec ce nom. Pour changer le nom du fichier css, il faut changer le nom dans le code html.

En espérant t'avoir aider 😉
Profil introuvable

Profil introuvable Le 20 juin 2016 à 16:30

Re:

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

Profil introuvable Le 20 juin 2016 à 16:30

Merci beaucoup ! 😄 Je teste, t'informe et essaie de comprendre (ça sert à rien de coder si on comprend rien).
Profil introuvable

Profil introuvable Le 20 juin 2016 à 16:33

Re:

Oui c'est vrai 😉 mais je peux t'expliquer en détails le code si tu veux 😉
Profil introuvable

Profil introuvable Le 20 juin 2016 à 16:43

à quoi sert la commende ":first-child" que tu appliques dans ton code ?
Profil introuvable

Profil introuvable Le 20 juin 2016 à 16:49

Re:

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

Profil introuvable Le 20 juin 2016 à 16:58

Pas trop... 😰
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

Profil introuvable Le 20 juin 2016 à 17:02

Re:

Voici un exemple :

Code CSS :

span:first-child {
    background-color: lime;
}
Code HTML :

<div>
  <span>Ce &lt;span&gt; est vert !</span>
  <span>Mais pas celui-là :(</span>
</div>
Résultat :

Ce <span> est vert ! Mais pas celui-là :(

Compris ? 😄

Sinon j'ai d'autres exemples si tu veux 😉
Balatharas

Balatharas Le 20 juin 2016 à 19:13

@Jrem971 merci pour tes explications tu m'as appris quelque chose 😉
Profil introuvable

Profil introuvable Le 20 juin 2016 à 19:17

Hey 'Beignet' ! 😀

Je suis ravi que t'es pu apprendre quelque chose 😉 c'est pour cela que ce forum à été créer, pour nous entraider chacun 😉
Profil introuvable

Profil introuvable Le 20 juin 2016 à 19:44

@Jerem971
Oui j'ai compris! 😄
Profil introuvable

Profil introuvable Le 20 juin 2016 à 19:54

Re :

Super 'Z_Fire' 😉, bonne continuation 😉
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte