Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Les menus

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🔗

Source, inspiration, ressources :

Article (EN)🔗.

Autre exemple🔗.

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.