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 :
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.