Guillaume Duverger - Développement & Graphisme - Blog

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

Menu CSS avec background-size

Petite technique très simple pour créer un menu avec des effets sympas grâce à la propriété background-size :

Code :

HTML


<div class=demo>
<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>

<ul class="votre_menu1">
<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>

<ul class="votre_menu2">
<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>

<ul class="votre_menu3">
<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


*{box-sizing:border-box}

ul{padding: 0}

.demo ul{
display: flex;
flex-direction: column;
justify-content: center;
margin: 2rem auto
	
	}
	
.demo li{

background: linear-gradient(#7d68e8,#3cddc4) no-repeat,#585858;
transition: background-size .2s ease-in-out;
	
	}

.demo li a{
	
display: flex;
justify-content: center;
text-transform: uppercase;
padding: 1rem;
color: white
	}		
   
/*******************************demo***********************************/


	
	
.votre_menu li {

background-size: 0 100%
	
	}

	

.votre_menu1 li {
	

background-size: 0 0
	
	}

.votre_menu li:hover,
.votre_menu1 li:hover,
.votre_menu2 li:hover {
	
background-size: 100% 100%
	
	}	

.votre_menu2 li {
	

background-size: 100% 0
	
	}

.votre_menu3 li {
	


background-size: 100% 100%
	
	}

.votre_menu3 li:hover {
	
background-size:100% 0
		
	}	


	



@media screen and (min-width:37.5rem){
		
.demo ul{	

flex-flow: row;

	}
		
	}

Source, inspiration, ressources :

Pour en savoir plus sur la propriété background-size, rendez-vous dans le cours propriétés CSS sur ce blog.

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.