Dernière mise à jour : décembre 2022
Meilleur rendu sur Firefox. Bug résolu sur Chromium.
Le code :
<ul class=flexible>
<li>
<a href="">
<svg height="0" width="0" viewBox="0 0 512 512"></svg>
<span>Accueil</span>
</a>
<li>
<a href="">
<svg height="0" width="0" viewBox="0 0 512 512"></svg>
<span>Développement</span>
</a>
<li>
<a href="">
<svg height="0" width="0" viewBox="0 0 512 512"></svg>
<span>Graphisme</span>
</a>
<li>
<a href="">
<svg height="0" width="0" viewBox="0 0 512 512"></svg>
<span>Contact</span>
</a>
</ul>
*{
box-sizing: border-box
}
.flexible {
list-style-type :none;
padding-left: 0;
display: flex;
flex-flow: wrap;
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.3);
border-radius: 8px;
margin: auto
}
.flexible li{
background-color: white;
}
.flexible li a {
display:grid;
grid:4rem/60px 1fr;
place-items:center;
transition: grid-template-columns .4s ;
text-decoration: none;
color: #555;
text-shadow: 0 1px 0 white;
}
@media (min-width:62.75rem){
.flexible {
flex-flow: row
}
.flexible li:not(:last-child) {
border-right:1px solid rgba(0, 0, 0, 0.17);
}
.flexible li span{
padding:0 .5rem
}
.flexible li a {
grid-template-columns: 0 1fr;
}
.flexible li:hover a{
color:currentcolor;
grid-template-columns: 80px 1fr;
}
.flexible svg {
opacity:0;
transform:scale(0);
transition:opacity .4s ,transform .4s ;
}
.flexible li:hover svg {
opacity:1;
transform:scale(1);
}
}