Modèle:OngletsResponsive

<style> /* Conteneur onglets */ .onglets-responsive {

 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 0.5em;
 margin: 0;
 padding: 0;
 list-style: none;

}

/* Chaque onglet */ .onglets-responsive li {

 flex: 1 1 auto;
 min-width: 120px;
 max-width: 200px;
 box-sizing: border-box;
 text-align: center;
 padding: 0.5em 1em;
 border-radius: 1em;
 background-color: #cce0ff;
 border: 1px solid #2c4e7a;
 display: inline-block;

}

/* Onglet actif */ .onglets-responsive li.active {

 background-color: #99bbff;
 font-weight: bold;

}

/* Liens dans onglets */ .onglets-responsive li a {

 text-decoration: none;
 color: #0645ad;
 display: block;

}

/* Responsive pour petits écrans */ @media (max-width: 600px) {

 .onglets-responsive {
   flex-direction: column;
   align-items: stretch;
 }
 .onglets-responsive li {
   max-width: 100%;
   margin-bottom: 0.3em;
 }

} </style>

  • <a href="{{{url1|#}}}">Présentation</a>
  • <a href="{{{url2|#}}}">Contributions</a>
  • <a href="{{{url3|#}}}">Contributions par langues</a>
  • <a href="{{{url4|#}}}">Travail en cours</a>