Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

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

Menu CSS multi-column

💡 Redimensionnez la fenĂȘtre de votre navigateur

Code :

HTML


<div class="demo">
<ul>
<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>
<li><a href="#!">Rubrique</a></li>
</ul>
</div>


CSS



.demo ul a {
	
display: flex;
justify-content: center;
background-image: linear-gradient(#fff, #ebebeb);
padding: .5rem; 
text-decoration: none;
	
}
	
	
@media screen and (min-width: 20rem) {
.demo ul {
columns: 2;
	}
}
	
@media screen and (min-width: 37.5rem) {
.demo ul {
columns: 3;
	}
}
	
@media screen and (min-width: 62.75rem) {
.demo ul {

columns: 6
	}
	
}

Support navigateurs :

CSS Multiple column layout

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.