Guillaume Duverger - Développement & Graphisme - Blog

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

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 :

CSS transforms 3d

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.