Bonjour,
Je souhaiterais que le menu dont le code figure ci-dessous se ferme lorsque l'on clique sur "Choisissez la pièce à découvrir". Je n'arrive pas à trouver comment faire.
Merci par avance.
Cdt
Je souhaiterais que le menu dont le code figure ci-dessous se ferme lorsque l'on clique sur "Choisissez la pièce à découvrir". Je n'arrive pas à trouver comment faire.
Merci par avance.
Cdt
<style>
:root {--hauteur-menu: 60px;}
nav.nav-2 {display: inline-block; text-align: center; width: 100%;}
nav.nav-2 > ul {display: flex; text-align: center; height: var(--hauteur-menu);}
nav.nav-2 ul {list-style-type: none; height: auto;}
nav.nav-2 > ul > li {position: relative; height: 100%; flex: 1;}
nav.nav-2 > ul > li > a {transform: translate(-50%, -50%); font-family: "Raleway", "Open Sans", sans-serif;
border: 0.0625rem solid var(--glaz); border-radius: 60em; color: var(--glaz); padding:10px 25px;}
li a {text-decoration: none; }
.menu-deroulant > a:after{content: '?'; margin-left: 40px;display: inline-block;}
.sous-menu {margin-top: var(--hauteur-menu); width: 100%; text-align: center; overflow: hidden; max-height: 0;}
.sous-menu li {margin: 20px}
.sous-menu > li > a {font-family: "Raleway", "Open Sans", sans-serif; padding-left: 20px; width: 100%;
align-items: center; display: flex;}
nav.nav-2 > ul > li:hover > a{color: var(--glaz)}
.sous-menu > li:hover > a {
/*color: white;*/ color: var(--glaz);
}
@keyframes rotationFleche {
0% {transform: rotate(0deg);}
100%{transform: rotate(90deg);}
}
.menu-deroulant:hover > a:after{animation: rotationFleche 0.2s linear forwards;}
@keyframes apparitionSousMenu {
0% {
border: 1px solid var(--glaz); border-radius: 10px;}
30% {
border: 1px solid var(--glaz); border-radius: 10px;
}
100% {
max-height: 50em;
border: 1px solid var(--glaz); border-radius: 10px;;
}
}
.menu-deroulant:hover > .sous-menu {
animation: apparitionSousMenu 1s forwards;
}
</style>
<body>
<nav class="nav-2">
<ul>
<li class="menu-deroulant">
<a href="#">Choisissez la pièce à découvrir</a>
<ul class="sous-menu mt-40">
<li><a href="#jardin">Le jardin</a></li>
<li><a href="#piece-de-vie">La pièce de vie</a></li>
<li><a href="#chambres">Les 4 chambres</a></li>
<li><a href="#cuisine">La cuisine</a></li>
<li><a href="#salle-de-jeux">La salle de jeux</a></li>
<li><a href="#salle-d-eau">La salle d'eau</a></li>
<li><a href="#salle-de-bain">La salle de bain</a></li>
</ul>
</ul>
</nav>
</body>