Menu avec la pseudo-classe :focus-within
Code :
HTML
<ul class="nav-ex">
<li class="sous-menu">
<a href="">Rubrique
<svg width="20" height="20" viewBox="0 0 451.847 451.847">
<path fill="currentcolor" d="M225.923 354.706c-8.098 0-16.195-3.092-22.369-9.263L9.27 151.157c-12.359-12.359-12.359-32.397 0-44.751 12.354-12.354 32.388-12.354 44.748 0l171.905 171.915 171.906-171.909c12.359-12.354 32.391-12.354 44.744 0 12.365 12.354 12.365 32.392 0 44.751L248.292 345.449c-6.177 6.172-14.274 9.257-22.369 9.257z"/>
</svg>
</a>
<ul>
<li><a href="">lien 1</a></li>
<li><a href="">lien 2</a></li>
<li><a href="">lien 3</a></li>
</ul>
</li>
<li class="sous-menu">
<a href="">Rubrique
<svg width="20" height="20" viewBox="0 0 451.847 451.847">
<path fill="currentcolor" d="M225.923 354.706c-8.098 0-16.195-3.092-22.369-9.263L9.27 151.157c-12.359-12.359-12.359-32.397 0-44.751 12.354-12.354 32.388-12.354 44.748 0l171.905 171.915 171.906-171.909c12.359-12.354 32.391-12.354 44.744 0 12.365 12.354 12.365 32.392 0 44.751L248.292 345.449c-6.177 6.172-14.274 9.257-22.369 9.257z"/>
</svg>
</a>
<ul>
<li><a href="">lien 1</a></li>
<li><a href="">lien 2</a></li>
</ul>
</li>
<li><a href="">Rubrique</a></li>
<li class="sous-menu">
<a href="">Rubrique
<svg width="20" height="20" viewBox="0 0 451.847 451.847">
<path fill="currentcolor" d="M225.923 354.706c-8.098 0-16.195-3.092-22.369-9.263L9.27 151.157c-12.359-12.359-12.359-32.397 0-44.751 12.354-12.354 32.388-12.354 44.748 0l171.905 171.915 171.906-171.909c12.359-12.354 32.391-12.354 44.744 0 12.365 12.354 12.365 32.392 0 44.751L248.292 345.449c-6.177 6.172-14.274 9.257-22.369 9.257z"/>
</svg>
</a>
<ul class="nav-ex__drop">
<li><a href="">lien 1</a></li>
<li><a href="">lien 2</a></li>
</ul>
</li>
</ul>
CSS
.nav-ex a {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
color: #444;
}
.sous-menu > ul {
overflow: hidden;
background-color:#ebebeb;
min-width: 100%;
max-height:0;
transition:max-height .6s ease-in-out
}
.sous-menu:focus-within ul{
max-height: 200px
}
.sous-menu > ul a {
white-space: nowrap;
}
@media screen and (min-width:62.75rem){
.nav-ex{
display: flex;
justify-content: space-evenly
}
.nav-ex a{
transition:color .4s cubic-bezier(.2,0,0,1),
background-color .4s cubic-bezier(.2,0,0,1)
}
.nav-ex a:hover,
.nav-ex a:focus {
background-color: var(--theme-couleur);
color: #fff
}
.nav-ex a svg{
margin-left:.5rem
}
.nav-ex > li {
display:inline-flex
}
.sous-menu {
position: relative;
z-index:1
}
.sous-menu > ul{
position:absolute;
left: 0;
top: 100%;
z-index: -1;
opacity:0;
transform: translateY(-10px);
will-change: transform,opacity;
transition:transform .2s ease-in-out,
opacity .4s ease-out
}
.sous-menu:focus-within ul{
opacity: 1;
transform: initial;
}
}
Support navigateurs :
focus-withinđ
Vous rencontrez un problÚme avec cette démonstration ?
Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.