Menu accordéon avec perspective CSS
Code :
HTML
<div class="nom_de_votre_menu">
<ul class="nav">
<li><a href="">Rubrique</></li>
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a>
<div class=perspective>
<ul>
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a>
<ul class="sous_menu">
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a></li>
</ul>
</li>
<li><a href="">Rubrique</a></li>
</ul>
</div>
</li>
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a>
</li>
</ul>
</div>
CSS
*{box-sizing: border-box}
ul{list-style-type: none;padding:0;margin:0}
.nom_de_votre_menu {
margin:2rem auto;
display: flex;
justify-content: center
}
.nav_demo{
background:linear-gradient(to left,#5f5f5f 0%,#000 100%);
box-shadow: 0 0 5px rgba(0,0,0,.2);
border-radius: .3rem
}
.nav_demo a{
display:flex;
justify-content: center;
padding:0 1.5rem;
align-items: center;
height: 40px;
text-decoration: none;
color: white
}
.nav_demo svg{
margin-left: .5rem;
transform: rotate(90deg)
}
.perspective{background:#5a5a5a}
.sous_menu{background:#727272}
@media screen and (min-width:62.75rem){
.nom_de_votre_menu {
margin-bottom: 16rem;
}
.nav_demo{
display: flex;
background: linear-gradient(#919191 0%,#5f5f5f 20%,#1f1f1f 100%);
position: relative;
perspective: 600px
}
.nav_demo a:hover{
opacity:.4
}
.perspective{
will-change: transform;
position: absolute;
top: 40px;
transition: transform .4s ease-in,opacity .4s ease-in;
opacity:0;
/*Ici on transforme la div et on la cache*/
transform-origin: 0 0;
transform: rotatex(-90deg);
backface-visibility: hidden
}
.perspective ul{
outline: 1px solid transparent;
}
.sous_menu{
opacity: 0;
visibility: hidden;
transition: opacity .4s;
will-change: opacity;
position: absolute
}
.perspective li:hover .sous_menu{
opacity:1;
visibility:visible;
box-shadow:0 5px 5px rgba(0,0,0,.2);
left:100%;
top:40px
}
.nav_demo li:hover .perspective{
box-shadow:0 0 10px rgba(0,0,0,.4);
transform: initial;
opacity: 1
}
.no-trans svg{
transform:none
}
}
Support navigateurs :
Source, inspiration, ressources :
A voir sur ce blog : Transformation 3D et perspective
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.