Guillaume Duverger - Développement & Graphisme - Blog

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

Menu animé avec box-shadow

Code :

HTML


<ul class="votre_menu">
<li>
<a class=ombre href=#>
Rubrique
</a>
</li>
<li>
<a class=ombre href=#>
Rubrique
</a>
</li>
<li><a class=ombre href=#>
Rubrique
</a>
</li>
<li>
<a class=ombre href=#>Rubrique
</a>
</li>
</ul>


CSS


*{box-sizing:border-box}

.votre_menu{

margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: column;
max-width: 37.5rem;
margin: auto;
	
	}
    
.votre_menu li a{
	
display: flex; 
justify-content: center;
padding: 1rem;
border:1px solid #aaa;
color: #8e8e8e;
text-decoration: none;
background: linear-gradient(to bottom,#dbdbdb,#bfbfbf);
	
	}


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

min-width: 100%;
flex-flow: row;
grid-gap: 1rem;
	
	}

.votre_menu li {

flex:1

}
 
.ombre{
	

position: relative;
transition: .3s transform;
transform: translateZ(0)
	
	}
    
.ombre:before{
	
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: radial-gradient(
ellipse,rgba(0,0,0,.35)0%,
rgba(0,0,0,0) 80%
);
transition: .3s transform, opacity
	
	}
	
.ombre:hover, 
.ombre:focus, 
.ombre:active{
	
	transform:translatey(-6px)
	
	}

.ombre:hover:before, 
.ombre:focus:before,
.ombre:active:before {
	
opacity: .4;
transform: translatey(6px);
animation:ombre 1.5s .3s linear infinite alternate
	
	}


@keyframes ombre{
	
	0%{
	
	transform:translatey(6px);
	opacity:.2
	
	}
	
	50%{
		transform:translatey(3px);
		opacity:.8
	
	}
	
	100%{
		
		transform:translatey(6px);
		opacity:.4
	
	}
	
	}

}

Support navigateurs :

CSS animation

Source, inspiration, ressources :

Inspiration

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.