Guillaume Duverger - Développement & Graphisme - Blog

Menu responsive avec onglets (CSS tabs)

Utilisation du modèle Flexbox, en particulier la propriété order. 💡 Redimensionnez la fenêtre de votre navigateur

Code :

<div class="cadre-tabs">
<input name="tabs" type="radio" id="tab-1" checked="checked">
<label for="tab-1" class="label">Rubrique</label>
<div class="cadre">
<h2>contenu1</h2>
</div>
<input name="tabs" type="radio" id="tab-2">
<label for="tab-2" class="label">Rubrique</label>
<div class="cadre">
<h2>contenu2</h2>
</div>
<input name="tabs" type="radio" id="tab-3">
<label for="tab-3" class="label">Rubrique</label>
<div class="cadre">
<h2>contenu3</h2>
</div>
</div>

*{box-sizing:border-box}

.cadre-tabs{

display: flex;
flex-flow: wrap
	
	}
    
input[name="tabs"] {
	
position: absolute;/*on cache les input*/
opacity: 0
	
	}
    
.label{
	

width: 100%;
height: 4rem;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--couleur2);
color: currentColor
	
 }
    

input[name="tabs"]:checked + label{
	
background-color: var(--couleur1)
	
	}

.cadre-demo{
	
display: none;
padding: 20px 30px;

	
	}

	
	
input[name="tabs"]:checked + label + .cadre-demo{
animation:anim 1s linear;
display: block;
width:  100%;

	
	}   
    
	@keyframes anim{
		from{
			opacity: 0
		}
		
		to{
			
		 opacity: 1
		
		}
	
	}  
    
@media screen and (min-width:37.5rem){
	

	
.label{
	
position: relative;
cursor: pointer;
background: none;
width: 11rem;
filter: drop-shadow(2px -2px 2px rgba(0, 0, 0, 0.26))
	
	}
  
.label:before,
.label:after{
	
	position: absolute
	
	}
	
	
.label:before{
	
content: 'Rubrique';
margin-left: -1rem;
z-index: 1
	
	}
	
input[name="tabs"]:checked + label{
	
	background: none;
	color: white;
	}
    

    
.label:after{
content: '';
border-style: solid;
left: 0;
right: 0;
bottom: 0;
border-width: 0 50px 60px 0;
border-color: transparent transparent #ebebeb transparent
	
	}

input[name="tabs"]:checked + label:after{
	
content: '';
border-color: transparent transparent #7d68e8 transparent
	
	}
    
.cadre-demo{
	
background-color: white;
filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.33));
order: 1
		
	}
    
}
   

Support navigateurs :

Flexbox