Dernière mise à jour : décembre 2022
Le code :
<div class="menu">
<ul>
<li><a href="#!">Rubrique</a></li>
<li><a href="#!">Rubrique</a></li>
<li><input type="checkbox" id="label-1"><label for="label-1" aria-label="ouvrir sous-menu">Rubrique</label>
<ul class="sub-menu">
<li><a href="#!">Rubrique</a></li>
<li><a href="#!">Rubrique</a></li>
<li><a href="#!">Rubrique</a></li>
</ul>
</li>
<li><input type="checkbox" id="label-2"><label for="label-2" aria-label="ouvrir sous-menu">Rubrique</label>
<ul class="sub-menu">
<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>
*,
*::before,
*::after{
box-sizing: border-box
}
ul{
padding: 0;
list-style: none;
}
label{
cursor: pointer
}
.menu {
margin: 2rem auto;
}
.menu > ul {
display:grid;
}
.menu > ul > li a,
.menu > ul > li label{
background-color: #3c3c3c;
color: #fafafa;
display: flex;
justify-content: center;
padding: 15px;
text-decoration: none;
}
.menu > ul > li:not(:last-child){
border-bottom:1px solid #222
}
.menu > ul li:not(:last-child) ul li:not(:last-child) a{
border-bottom:1px solid #393939
}
.menu > ul li label{
position: relative;
}
.menu > ul li label::before {
position:absolute;
right:.5rem;
content:'';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom: 0;
border-top: 12px solid currentcolor;
top: 0;
bottom: 0;
margin: auto;
transition: .5s;
}
.sub-menu {
background:rgba(60, 60, 60, 0.8);
list-style: none;
max-height: 0;
overflow: hidden;
transition: .5s;
}
.menu > ul li input{
display: none
}
.menu > ul li input:checked+label ~.sub-menu {
max-height: 300px;
}
.menu > ul li input:checked+label::before {
rotate: -180deg;
}
.menu > ul .sub-menu li a{
background: rgba(60, 60, 60, 0.6);
font-size: 0.9em;
}
.menu > ul .sub-menu li a:focus {
background: rgba(60, 60, 60, 0.1);
}
@media (min-width: 50rem) {
.menu > ul {
grid-auto-flow: column
}
.menu > ul > li:not(:last-child) {
border-bottom: unset
}
}
@media (min-width: 64rem) {
.menu > ul li:nth-child(n+3):not(:last-child){
position: relative;
}
.menu li a:hover,
.menu li label:hover{
background-color:#6753ea
}
.menu > ul .sub-menu li a:hover{
background: rgba(60, 60, 60, 0.1);
}
.sub-menu{
transform: scaleY(0);
transform-origin: top;
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 1;
}
.menu > ul li:hover label::before,
.menu > ul li:hover input:checked+label::before{
rotate: -180deg;
}
.menu > ul li input:checked+label::before {
rotate: 0deg;
}
.menu > ul li:focus-within .sub-menu,
.menu > ul li:hover .sub-menu{
max-height: 300px;
transform: scaleY(1);
}
}