Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Les menus

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 :

flexbox

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.