Aller au contenu principal
Partagez cette démonstration :

Extensible CSS Grid menu

Dernière mise à jour : décembre 2022

Meilleur rendu sur Firefox. Bug résolu sur Chromium.

Le code :



<ul class=flexible>
<li>
<a href="">
<svg height="0" width="0" viewBox="0 0 512 512"></svg>
<span>Accueil</span>
</a>
<li>
<a href="">
<svg height="0" width="0" viewBox="0 0 512 512"></svg>
<span>Développement</span>        
</a>
<li>
<a href="">
<svg height="0" width="0" viewBox="0 0 512 512"></svg>
<span>Graphisme</span>      
</a>
<li>
<a href="">
<svg height="0" width="0" viewBox="0 0 512 512"></svg>
<span>Contact</span>
</a>
</ul>





*{

box-sizing: border-box
}
	


.flexible {

list-style-type :none;
padding-left: 0;
display: flex;
flex-flow: wrap;
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.3);
border-radius: 8px;
margin: auto
	
}
	

.flexible li{

background-color: white;

}
	

.flexible li a {
	
display:grid;
grid:4rem/60px 1fr;
place-items:center;
transition: grid-template-columns .4s ;
text-decoration: none;
color: #555;
text-shadow: 0 1px 0 white;
	
}
		

	
@media (min-width:62.75rem){
		
.flexible {

flex-flow: row
	
	}
	
.flexible li:not(:last-child) {

border-right:1px solid rgba(0, 0, 0, 0.17);

	}
	

.flexible li span{

padding:0 .5rem

}	

.flexible li a {

grid-template-columns: 0 1fr;

 
}
	
.flexible li:hover a{

color:currentcolor;
grid-template-columns: 80px 1fr;
	
}
	
.flexible svg {

opacity:0;
transform:scale(0);
transition:opacity .4s ,transform .4s ;
	
}	
	
.flexible li:hover svg {
	
opacity:1;
transform:scale(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.