Guillaume Duverger - Développement & Graphisme - Blog

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

Dropdown menu avec propriété visibility

Code :

HTML


<nav class="menu-visibility">
<ul>
<li><a href="#">rubrique</a></li>
<li><a href="#">rubrique</a></li>
<li class=sous-rub><a href="#!">rubrique</a>
<ul class="liste">
<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>
<li><a href="#">rubrique</a></li>
</ul>
</nav>


CSS


.menu-visibility{
	
display: grid;
justify-items: start;
margin: 3rem auto 12rem auto;
		
	
	}

.menu-visibility ul {
	
padding: 0;
display:grid;
list-style: none;

}
	
.menu-visibility li{	
background-image: linear-gradient(white,#e8e8e8 50%);
display:flex;
justify-content: center;

	}
	
	
.sous-rub{

position: relative;
display: flex;
align-items: center
	
}
	

.sous-rub::after{
	
margin-right: 4px;
content: '';
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent currentcolor;
	
}
	
	
.sous-rub:hover .liste, 
.sous-rub:focus-within .liste {
	
opacity: 1;
visibility: visible;
	
}


.sous-rub ul{

box-shadow: 0 0 5px rgba(0, 0, 0, 0.41)

}
	
.menu-visibility li a {

color:currentcolor;
padding: 5px 20px;
text-decoration: none;

	
}

	
.liste {
	
left: 100%;
opacity: 0;
position: absolute;
top:0;
z-index:1;
visibility: hidden;
transition: opacity  .25s linear, visibility .25s linear
	
}
	


@media screen and (min-width:62.75rem){
	
.menu-visibility{
	
	justify-items: center
	
	}
	
.menu-visibility ul:not(.liste){
	
grid-template-columns: repeat(5,1fr);
	
	}
	

.liste {

left: 0;
right:0;
top:100%
	
}
	
.sous-rub::after{

transform: rotate(90deg)

}
		
	}
	

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.