Guillaume Duverger - Développement & Graphisme - Blog

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

Menus CSS style Lava Lamp

Code :

HTML


<ul class="lava">
<li><a href=#>Rubrique1</a></li>
<li><a href=#>Rubrique2</a></li>
<li><a href=#>Rubrique3</a></li>
<li><a href=#>Rubrique4</a></li>
<li><a href=#>Rubrique5</a></li>
</ul>


CSS

*{box-sizing:border-box}


	
.lava{

display: flex;
justify-content: center;
padding: 0;
list-style-type: none;
margin: 2rem auto

	}
	
.lava li a{
		
display: flex;
justify-content: center;
top: 0;
left: 0;
width: 6.25rem;
position: relative;
color: #4fade8;
text-decoration: none;
transition: right .2s ease
	
	}
	
.lava li a:before {
content: '';
position: absolute;
bottom: -10px;
transition: border-width .3s .2s;
border-width: 0
	
	}

.lava li a:hover:before{
	
	border-style: solid;
	border-color: transparent transparent #4fade8 transparent;
	border-width: 0 .625rem .625rem .625rem
	
	}
	
.lava li:last-child a:after{
	
content: '';
position: absolute;
right: inherit;
bottom: -10px;
width: inherit;
height: 3px;
background: #4fade8;
pointer-events: none;
transition: .5s cubic-bezier(.770,0,.175,1)
	
	}

.lava li:nth-child(1) ~ li:last-child a{
	
	right:25rem
		
	}
	
.lava li:nth-child(2):hover ~ li:last-child a{
	
	right:18.75rem
	
	}
	
.lava li:nth-child(3):hover ~ li:last-child a{
	
	right:12.5rem
	
	}
	
.lava li:nth-child(4):hover ~ li:last-child a{
	
	right:6.25rem
	
	}
	
.lava li:nth-child(5):last-child:hover a{
	
	right:0
	
	}

.lava li:hover ~ li:last-child a:after,
.lava li:last-child:hover a:after{
	
	background:#4fade8
	
	}


Ci-dessous un exemple du même effet en position verticale :

Code :

HTML


<ul class="lava_vertical">
<li><a href=#>Rubrique1</a></li>
<li><a href=#>Rubrique2</a></li>
<li><a href=#>Rubrique3</a></li>
<li><a href=#>Rubrique4</a></li>
<li><a href=#>Rubrique5</a></li>
<li class="effet_vertical"></li>
</ul>


CSS


*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}
/*menu lavalamp vertical*/

.lava_vertical{
margin:40px auto;
list-style:none;
height:200px;
width:200px}

.lava_vertical li{position:relative;z-index:2}

.lava_vertical li a{
z-index:1;
display:inline-block;
text-align:center;
color:#484848;
width:200px;
height:40px;
line-height:40px;
text-decoration:none;
font-size:14px}

.lava_vertical li:nth-child(2):hover ~ .effet_vertical{top:-160px}
.lava_vertical li:nth-child(3):hover ~ .effet_vertical{top:-120px}
.lava_vertical li:nth-child(4):hover ~ .effet_vertical{top:-80px}
.lava_vertical li:nth-child(5):hover ~ .effet_vertical{top:-40px}


li.effet_vertical {
top:-200px;
left:0;
z-index:1;
background:#f1f1f1;
transition:top .3s cubic-bezier(.770,0,.175,1);
width:200px;
height:40px;
box-shadow:0 2px 5px rgba(0,0,0,.15);
border-left:3px solid #e45e45}

/*fin menu lavalamp vertical*/

Maintenant, revisitons l'effet en lui donnant plus d'élasticité :

Code :

HTML


<ul class="lava_revisite">
<li><a href=#>Rubrique1</a></li>
<li><a href=#>Rubrique2</a></li>
<li><a href=#>Rubrique3</a></li>
<li><a href=#>Rubrique4</a></li>
<li><a href=#>Rubrique5</a></li>
<li class="elastique"></li>
</ul>


CSS


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


/*menu elastique*/

.cadre-lava-revisite{

display: flex;
justify-content: center;
margin: 5rem auto
	
	}
	

	
.lava_revisite li{

list-style-type: none;
border-bottom: 2px solid #7A5FFF
	
}
	
	
	
	
.lava_revisite li a{

color: currentcolor;
text-decoration: none
	
	}

.elastique {

position: absolute;
z-index: -1;
top: 0;
left: 0;
opacity: 0;
background-color: #7A5FFF;
width: 100%;
height: 100%;
transition: .7s cubic-bezier(.770,0,.175,1)}

	
	@media (min-width:62.75rem){
		
		
.lava_revisite {
position: relative;
display: flex;
justify-content: space-around;
width: 100%;
max-width: 500px
		
	}		
		
		
.lava_revisite li:nth-child(n):hover ~ .elastique{
	
	opacity: 1;
	width: calc(100%/5)
	
	}
	
.lava_revisite li a:hover{
	
	transition-delay: .3s;
	color: white;
		
	}
	

	
.lava_revisite li:nth-child(2):hover ~ .elastique {
	
	left: 20%;
	right: 60%
	
	}
	
.lava_revisite li:nth-child(3):hover ~ .elastique {
	
	left: 40%;
	right: 40%
	
	}
	
.lava_revisite li:nth-child(4):hover ~ .elastique {
	
	left: 60%;
	right: 20%
	
	}
	
.lava_revisite li:nth-child(5):hover ~ .elastique {
	
	left: 80%;
	right: 0
	
	}
	}

Source, inspiration, ressources :

Source / 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.