Dernière mise à jour : décembre 2022
Le code :
<ul class="nav-ex">
<li class="sous-menu">
<a href="">Rubrique</a>
<ul>
<li><a href="">lien 1</a></li>
<li><a href="">lien 2</a></li>
<li><a href="">lien 3</a></li>
</ul>
</li>
<li class="sous-menu">
<a href="">Rubrique</a>
<ul>
<li><a href="">lien 1</a></li>
<li><a href="">lien 2</a></li>
</ul>
</li>
<li><a href="">Rubrique</a></li>
<li class="sous-menu">
<a href="">Rubrique</a>
<ul>
<li><a href="">lien 1</a></li>
<li><a href="">lien 2</a></li>
</ul>
</li>
</ul>
*,
*::before,
*::after{
box-sizing: border-box
}
.nav-ex a:focus,
.nav-ex a:focus-within{outline: 2px dashed;outline-offset: -4px;}
.nav-ex{
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
border:1px solid #aaa;
border-radius:8px;
background:white;
box-shadow:0 0 5px rgba(0, 0, 0, 0.14)
}
.nav-ex li:not(:last-child){
border-bottom:1px solid rgba(0, 0, 0, 0.14);
}
.nav-ex a {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
color: currentcolor;
font-size:1.25rem;
text-decoration: none;
}
.sous-menu ul {
overflow: hidden;
background-color:#ebebeb;
max-height:0;
transition:max-height .6s ease-in-out
}
.nav-ex li a:not(:last-child){
position: relative;
}
.nav-ex li a:not(:last-child)::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: 0.5s;
}
.sous-menu:focus-within ul{
max-height: 300px;
}
@media screen and (min-width:64rem){
.nav-ex{
display: flex;
overflow:visible;
}
.nav-ex li{
flex:1;
transition:color .4s cubic-bezier(.2,0,0,1),
background-color .4s cubic-bezier(.2,0,0,1)
}
.nav-ex > li:not(:last-child){
border-bottom:unset;
border-right:1px solid rgba(0, 0, 0, 0.14);
}
.sous-menu {
position: relative;
}
.sous-menu > ul{
position:absolute;
left: 0;
right:0;
top: 100%;
z-index: 1;
opacity: 0;
will-change: opacity;
transition: opacity .4s
}
.sous-menu:focus-within ul{
opacity: 1;
}
}