:: Blank Theme sources :: Tutoriels
Système d'onglets simple
![Kim](https://2img.net/u/4215/47/92/78/avatars/2-54.png)
En ligne
Pronoun(s) : Elle/she
Messages : 169
Présentation
Un code complet de forum est mis à disposition dans lequel tous les templates et le CSS ont été optimisés et simplifiés pour personnaliser vos forums
Des fonctionnalités supplémentaires pré-installées et son design minimaliste suffisant permet d'avoir un forum prêt à l'emploi à la portée de tous.
En plus de codes commentés avec des explications, il s'accompagne d'une documentation complète qui vous guide dans l'installation étape par étape.
![:sparkles: ✨](https://cdn.jsdelivr.net/emojione/assets/png/2728.png?v=2.2.7)
Des fonctionnalités supplémentaires pré-installées et son design minimaliste suffisant permet d'avoir un forum prêt à l'emploi à la portée de tous.
En plus de codes commentés avec des explications, il s'accompagne d'une documentation complète qui vous guide dans l'installation étape par étape.
Le forum est ouvert à tous et sollicite votre participation !
C'est un projet qui se veut participatif et dans lequel tout le monde peut apporter sa pierre à l'édifice. Vous pouvez venir en aide aux autres, proposer vos propres tutoriels, astuces, tips, ... et partager vos forums.
C'est un projet qui se veut participatif et dans lequel tout le monde peut apporter sa pierre à l'édifice. Vous pouvez venir en aide aux autres, proposer vos propres tutoriels, astuces, tips, ... et partager vos forums.
Un code concis pour créer des onglets facilement ! Il peut être utilisé partout, que ce soit dans les templates, dans une page HTML ou directement dans vos posts.
Kim
Facile
HTML et CSS
Oui
![Kim](https://2img.net/u/4215/47/92/78/avatars/2-54.png)
En ligne
Pronoun(s) : Elle/she
Messages : 169
Installation
Codes
- Code:
<div class="tabs">
<input type="radio" name="tab" id="tab-1" checked><label for="tab-1">PREMIER ONGLET</label><div class="tab-content">CONTENU ONGLET 1</div>
<input type="radio" name="tab-tuto" id="tab-tuto2"><label for="tab-tuto2">DEUXIEME ONGLET</label><div class="tab-content">
CONTENU ONGLET 2</div>
</div>
- Code:
/* Conteneurs des onglets */
.tabs {
display: grid;
grid-template-rows: repeat(2, max-content);
grid-template-columns: repeat(30, minmax(min-content, auto));
gap: 5px;
margin: 0 auto;
/* Ne pas retirer */
& > br,
input[name*="tab"] {display: none;}
/* Onglet */
label[for*="tab"] {
grid-row: 1;
display: block;
text-transform: uppercase;
color: var(--contrastLighter);
font-size: 12px;
padding: 2px 10px;
text-wrap: nowrap;
cursor: pointer;
top: 0;
transition: all 0.25s;
}
/* Onglet au survol */
label[for*="tab"]:hover {
color: var(--contrast);
}
/* Onglet actif */
input[name*="tab"]:checked + label[for*="tab"] {
background: var(--neutralDark);
border-radius: 5px;
color: var(--contrast);
transition: all 0.35s;
}
/* Contenu d'un onglet */
.tab-content {
grid-row: 2;
grid-column: 1 / -1;
z-index: 1;
opacity: 0;
transition: all 0.35s;
background: var(--neutralDark);
border-radius: 5px;
padding: 5px 10px;
}
/* Contenu d'un onglet actif */
input[name*="tab"]:checked + label + .tab-content {
z-index: 2;
opacity: 1;
transition: all 0.35s;
}
}
Ajouter un onglet
Pour cela rien de plus simple, il suffit de rajouter une nouvelle ligne de code HTML dans la balise
- Code:
<input type="radio" name="tab" id="tab-3" checked><label for="tab-3">Onglet 3</label><div class="tab-content">Contenu de l'onglet</div>
![Kim](https://2img.net/u/4215/47/92/78/avatars/2-54.png)
En ligne
Pronoun(s) : Elle/she
Messages : 169
Modifications
Utiliser plusieurs tableaux sur une même page
Pour créer des nouveaux tableaux à onglets, il faut changer le contenu de l'attribut name="" par un nouveau nom unique. Dans l'exemple les onglets s'appellent tous tab , vous pourriez alors nommez le nouveau en étant plus spécifique sur son utilité.
Exemple : <input name="tab-character">
Il faut également changer le contenu des attributs id="" et for="" pour être différent des premiers onglets.
Exemple : <input id="tab-character1"> <label for="tab-character1">
Onglets à la verticale
Le code HTML reste le même. Seul le code CSS est à modifier :
- Code:
/* Conteneurs des onglets */
.tabs {
display: grid;
grid-template-columns: repeat(2, max-content);
grid-template-rows: repeat(30, minmax(min-content, auto));
gap: 5px;
margin: 0 auto;
/* Ne pas retirer */
& > br,
input[name*="tab"] {
display: none;
}
/* Onglet */
label[for*="tab"] {
grid-column: 1;
display: block;
text-transform: uppercase;
color: var(--contrastLighter);
font-size: 12px;
padding: 2px 10px;
text-wrap: nowrap;
cursor: pointer;
top: 0;
transition: all 0.25s;
}
/* Onglet au survol */
label[for*="tab"]:hover {
color: var(--contrast);
}
/* Onglet actif */
input[name*="tab"]:checked + label[for*="tab"] {
background: var(--neutralDark);
border-radius: 5px;
color: var(--contrast);
transition: all 0.35s;
}
/* Contenu d'un onglet */
.tab-content {
grid-column: 2;
grid-row: 1 / -1;
z-index: 1;
opacity: 0;
transition: all 0.35s;
background: var(--neutralDark);
border-radius: 5px;
padding: 5px 10px;
}
/* Contenu d'un onglet actif */
input[name*="tab"]:checked + label + .tab-content {
z-index: 2;
opacity: 1;
transition: all 0.35s;
}
}
/* Conteneurs des onglets */
.tabs {
display: grid;
grid-template-columns: repeat(2, max-content);
grid-template-rows: repeat(30, minmax(min-content, auto));
gap: 5px;
margin: 0 auto;
/* Ne pas retirer */
& > br,
input[name*="tab"] {
display: none;
}
/* Onglet */
label[for*="tab"] {
grid-column: 1;
display: block;
text-transform: uppercase;
color: var(--contrastLighter);
font-size: 12px;
padding: 2px 10px;
text-wrap: nowrap;
cursor: pointer;
top: 0;
transition: all 0.25s;
}
/* Onglet au survol */
label[for*="tab"]:hover {
color: var(--contrast);
}
/* Onglet actif */
input[name*="tab"]:checked + label[for*="tab"] {
background: var(--neutralDark);
border-radius: 5px;
color: var(--contrast);
transition: all 0.35s;
}
/* Contenu d'un onglet */
.tab-content {
grid-column: 2;
grid-row: 1 / -1;
z-index: 1;
opacity: 0;
transition: all 0.35s;
background: var(--neutralDark);
border-radius: 5px;
padding: 5px 10px;
}
/* Contenu d'un onglet actif */
input[name*="tab"]:checked + label + .tab-content {
z-index: 2;
opacity: 1;
transition: all 0.35s;
}
}
|
|