Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

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

Menu effet "rolling" en CSS

Code :

HTML


<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>


CSS


*{box-sizing:border-box}


.votre_menu{
padding:0;
margin:0;


}
	
	
.votre_menu li{
	
display: flex;
justify-content: center;
height: 50px;
line-height: 50px;
border-bottom: 1px solid hsla(0,0%,0%,.2);
text-transform: uppercase
	
}
	
.votre_menu li:last-child{
	
	border: none
		
	}
	
.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;
	}

.votre_menu li{

	
	border: none
		
	}

}
	
@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 ?

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.