Dernière mise à jour : décembre 2022
Le code :
<div class="menu-tabs">
<input type="radio" id="tab1" name="tab-control" checked>
<input type="radio" id="tab2" name="tab-control">
<input type="radio" id="tab3" name="tab-control">
<input type="radio" id="tab4" name="tab-control">
<ul>
<li tabindex="0"><label for="tab1" role="button"><span>Rubrique</span></label></li>
<li tabindex="0"><label for="tab2" role="button"><span>Rubrique</span></label></li>
<li tabindex="0"><label for="tab3" role="button"><span>Rubrique</span></label></li>
<li tabindex="0"><label for="tab4" role="button"><span>Rubrique</span></label></li>
</ul>
<div class="contenu-tabs">
<div class="section-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet magna facilisis, tincidunt eros in, vulputate mi. Vestibulum id tincidunt urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Vivamus nec lectus libero. Aliquam pulvinar auctor mattis. Nam et blandit tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div class="section-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet magna facilisis, tincidunt eros in, vulputate mi. Vestibulum id tincidunt urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Vivamus nec lectus libero. Aliquam pulvinar auctor mattis. Nam et blandit tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div class="section-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet magna facilisis, tincidunt eros in, vulputate mi. Vestibulum id tincidunt urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet magna facilisis, tincidunt eros in, vulputate mi. Vestibulum id tincidunt urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
*,
*::before,
*::after{
box-sizing: border-box
}
ul{
padding-left:0;
margin:0;
list-style-type: none
}
input{
position:absolute;
left:-9999px
}
.menu-tabs{
background-color: white;
max-width: 960px;
margin: 4rem auto;
border: 1px solid #e5e5e5;
}
.menu-tabs> ul {
display: flex;
overflow-x: auto;
scrollbar-width:thin;
overscroll-behavior-inline: contain;
scroll-snap-type: x mandatory;
scroll-snap-type: inline mandatory;
scroll-padding:3rem;
}
.menu-tabs> ul li{
scroll-snap-align: start;
flex: 0 0 25%;
}
.menu-tabs> ul li label{
display: flex;
position: relative;
cursor: pointer;
height: 4rem;
align-items: center;
justify-content:center;
transition: background-color .4s;
background-color: #e5e5e5;
}
.menu-tabs> ul li label span{
display:inline-block;
max-width:90%;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.menu-tabs> ul li label::before,
.menu-tabs> ul li label::after{
position:absolute;
content:'';
height:4px;
width:100%;
top:0px;
}
.menu-tabs> ul li label::before{
background-color: #d1d1d1;
}
.menu-tabs> ul li label::after{
transform-origin: left;
transition: transform .4s;
transform: scalex(0)
}
.menu-tabs input:nth-of-type(1):checked ~ ul li:nth-child(1) label::after,
.menu-tabs input:nth-of-type(2):checked ~ ul li:nth-child(2) label::after,
.menu-tabs input:nth-of-type(3):checked ~ ul li:nth-child(3) label::after,
.menu-tabs input:nth-of-type(4):checked ~ ul li:nth-child(4) label::after{
transform:scalex(1);
background-color:#6753ea
}
.menu-tabs input:nth-of-type(1):checked ~ ul > li:nth-child(1) > label,
.menu-tabs input:nth-of-type(2):checked ~ ul > li:nth-child(2) > label,
.menu-tabs input:nth-of-type(3):checked ~ ul > li:nth-child(3) > label,
.menu-tabs input:nth-of-type(4):checked ~ ul > li:nth-child(4) > label{
cursor: default;
background-color: initial
}
.menu-tabs input:nth-of-type(1):checked ~ .contenu-tabs > .section-tab:nth-child(1),
.menu-tabs input:nth-of-type(2):checked ~ .contenu-tabs > .section-tab:nth-child(2),
.menu-tabs input:nth-of-type(3):checked ~ .contenu-tabs > .section-tab:nth-child(3),
.menu-tabs input:nth-of-type(4):checked ~ .contenu-tabs > .section-tab:nth-child(4){
display:grid;
}
.contenu-tabs{
min-height:400px;
padding:1rem
}
.section-tab{
display:none;
animation: anim-tabs .4s ease-in-out;
margin-top:2rem;
}
@keyframes anim-tabs{
from{
opacity: 0;
transform: translatey(5%)
}
to{
opacity:1
}
}