Guillaume Duverger Développeur & graphiste - Blog

Menu effet "rolling" en CSS

Dernière mise à jour : août 2022



<ul class="votre_menu">

<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>
<li><a href="#">Rubrique</a></li>

</ul>




*{box-sizing:border-box}


.votre_menu{
padding:0;
margin:0;


}
	
	
.votre_menu li{
	
display: flex;
justify-content: center;
height: 50px;
line-height: 50px;
text-transform: uppercase
	
}
	

	
.votre_menu li a{ 


color: #999;

	}

@media screen and (min-width:37.5em){
	
.votre_menu{
display: grid;
overflow: hidden;
margin: 2rem auto;
grid-template-columns: repeat(5,1fr); 
box-shadow: inset 0 0 8px rgba(0,0,0,.2);
border-radius: 8px;
	}



}
	
@media screen and (min-width:62.75em){

.votre_menu li a{
	
text-shadow:0 -50px #7d68e8;
line-height: 150px;
margin-top:-50px;
transition:.2s ease-in-out
	
	}

.votre_menu li a:hover{
	
	margin-top:0
	
	}


	
	}
	



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