Dernière mise à jour : août 2022

Le code :

<div class="menu-tabs print">	
<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
	
	}
	
	}