Menu responsive avec Flexbox
💡 Redimensionnez la fenêtre de votre navigateur
Code :
HTML
<ul class="menu_flex">
<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}
.menu_flex{
padding: 0;
margin:0;
list-style-type: none;
display: flex;
margin: 2rem auto;
flex-direction: column;
align-items: center
}
.menu_flex li a {
display: flex;
justify-content: center;
padding: 1rem;
text-decoration: none;
background:linear-gradient(white,#e8e8e8);
color: currentcolor
}
@media (min-width:62.75em) {
.menu_flex{
flex-flow: row;
}
.menu_flex li {
flex: 1
}
}
Support navigateurs :
Source, inspiration, ressources :
En savoir plus sur la valeur flex.
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.