Guillaume Duverger Développeur & graphiste - Blog

Menu avec la pseudo-classe :focus-within

Dernière mise à jour : août 2022

Le code :



<ul class="nav-ex">
<li class="sous-menu">
<a href="">Rubrique</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</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</a>
<ul>
<li><a href="">lien 1</a></li>
<li><a href="">lien 2</a></li>
</ul>
</li>
</ul>




.nav-ex a:focus,
.nav-ex a:focus-within{outline: 2px dashed;outline-offset: -4px;}	
	
.nav-ex{

list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
border:1px solid #aaa;
border-radius:8px;
background:white;
box-shadow:0 0 5px rgba(0, 0, 0, 0.14)
	
	}

	
.nav-ex  li:not(:last-child){
	
	border-bottom:1px solid rgba(0, 0, 0, 0.14);
	
	}	
	
	
.nav-ex a {
	
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
color: currentcolor;
font-size:1.25rem;	
text-decoration: none;
	
}


	

.sous-menu  ul {
overflow: hidden;
background-color:#ebebeb;
max-height:0;
transition:max-height .6s ease-in-out
      
}
	
	
	

	
.nav-ex li a:not(:last-child){
	
	position: relative;
	
	}
	
.nav-ex li a:not(:last-child)::before {

position:absolute;
right:.5rem;
content:'';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom: 0;
border-top: 12px solid currentcolor;
top: 0;
bottom: 0;
margin: auto;
transition: 0.5s;
}	
	
.sous-menu:focus-within ul{

max-height: 300px;
	
}
	




@media screen and (min-width:64rem){

.nav-ex{
	
display: flex;
overflow:visible;

}

.nav-ex li{
	
flex:1;
transition:color .4s cubic-bezier(.2,0,0,1),
background-color .4s cubic-bezier(.2,0,0,1)
	
	}	
	
.nav-ex > li:not(:last-child){
	
border-bottom:unset;
border-right:1px solid rgba(0, 0, 0, 0.14);
	
	}	
	
.sous-menu {
	
position: relative;

	
	}
	
.sous-menu > ul{

position:absolute;
left: 0;
right:0;
top: 100%; 
z-index: 1;
opacity: 0;
will-change: opacity;
transition: opacity .4s 
      
}
	
	
	
.sous-menu:focus-within ul{ 
	
opacity: 1;

      }
	}
	




Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.

haut page