Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

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

Menu champignon (CSS transform)

Code :

HTML


<div class=cadre-demo>
<ul class="nom_de_votre_menu">
<li><a class="actif" href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>


CSS


.nom_de_votre_menu{

list-style-type: none;
padding: 0;
display: flex;
flex-direction: column;

margin:auto;
}
	
.nom_de_votre_menu li {

flex:1

}
	
@media (min-width:62.75rem){
		
.nom_de_votre_menu{
height:100px;
flex-flow: row;
align-items:flex-end;
justify-content: center; 
grid-gap:1rem
	}

.nom_de_votre_menu li a{	
	
border-radius:6px 6px 0 0;
height:40px;
transition:height .4s ease-in-out
	
	}
.nom_de_votre_menu li a:hover {
height:100px;

box-shadow:0 0 3px rgba(0,0,0,.5);
transition:.4s cubic-bezier(0,1.8,1,1.8);
}	
	
}
	

.nom_de_votre_menu li a{

display:flex;
padding:0 .5rem;
justify-content: center;
color:#797979;
border-bottom:1px solid rgba(0,0,0,.4);
background:linear-gradient(to bottom,#f2f2f2 5%,#e8e8e8 10%,#dcdcdc 50%,#b6b6b6 100%);
box-shadow:0 0 3px rgba(0,0,0,.2);
text-decoration:none;

	
	}

.nom_de_votre_menu li a.actif{

color:white;
background:linear-gradient(to bottom,#49c5ff 5%,#04a6f2 10%,#056998 100%)
	
	}    

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.