Guillaume Duverger - Développement & Graphisme - Blog

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

Menu avec dégradé radial

Code :

HTML


<ul class="nom_de_votre_menu">
<li><a class="active" href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Liens</a></li>
<li><a href="#">Contact</a></li>
</ul>


CSS


*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}

.nom_de_votre_menu{
	
display: flex;
flex-direction: column;

	
	}

.nom_de_votre_menu li a{
	
position: relative;
z-index: 1;
-webkit-box-reflect:below 0 linear-gradient(transparent 50%, rgba(0,0,0,.3)) /* reflet sur chrome + opera */;
display: flex;
justify-content: center;
color: #fff;
padding: 1rem 0;
line-height: normal;
text-decoration: none;
	
	}
	
	
.nom_de_votre_menu li a:not(.active){

background: linear-gradient(to top,#222,#606060);
box-shadow: inset 0 5px 0 rgba(111, 111, 111, 0.59);
transition: background .6s
	
	}
	
a.active,
a.active:hover{

box-shadow: inset 0 0 3px lightgreen;
background:radial-gradient(farthest-corner at 50% 100%,rgba(91,171,38,1) 0%, rgba(0,77,9, 1) 100%)
	
}
	
.nom_de_votre_menu li a:not(.active):before{

background:radial-gradient(farthest-corner at 50% 100%,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);
content: '';
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: -1;
transition: opacity .3s 

}

.nom_de_votre_menu li a:not(.active):hover:before {

opacity: 1;

}
	
@media screen and (min-width:62.75em){

	.nom_de_votre_menu{
	
	flex-flow: row
	
	}
	.nom_de_votre_menu li{
	
	width:calc(100%/5)
	
	}
	
	.nom_de_votre_menu li a{
	
	border-right:1px solid rgba(255,255,255,.1);
	
	}
	}

Support navigateurs :

CSS gradients

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.