Menu responsive avec onglets (CSS tabs)
Utilisation du modèle Flexbox, en particulier la propriété order
. 💡 Redimensionnez la fenêtre de votre navigateur
contenu1
contenu2
contenu3
Code :
HTML
<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>
CSS
*{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 :
Vous rencontrez un problème avec cette démonstration ?
Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.