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.