[HTML & CSS] Organisation par Onglet

Bonjour,

Dans ce tuto, je vous propose d'apprendre comment faire une organisation par onglet. Cette organisation marche sur votre PA ou sur une page HTML.

I:- Les scripts -

Pour commencer, va sur ton Panneau d'Admin >> Module >> HTML >> Gestion des Pages HTML >> Créer une nouvelle page.
Avant, vérifie bien qu'il y a bien cette image : au-dessus du champ texte.

Ensuite à ces deux questions coche non:
Voulez-vous utiliser le haut et le bas de page de votre forum ?
Utiliser cette page en tant que page d'accueil ?

Puis tu colles ceci dans ta page HTML et tu enregistres:

Code:

//<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->

Tout est bon jusque là ??

Alors on continue.

Ensuite tu copies l'adresse de ta page HTML que tu colleras dans une balise sricpt que voici:

Code:

<script language="javascript" src="adresse de ta page html script onglet"></script>

Ce code, tu peux le placer à deux endroits:
- soit dans ton template overall_header_new juste avec la balise < /head> mais pour cela il faut que tu soit la fondatrice de ton forum;
- soit dans la description de ton forum.

C'est bon, on peut continuer ??

II:- Les Onglets -

Alors passons maintenant à la création de tes onglets. Pour cela, il te suffit de copier et de coller ce code dans ta PA:

Code:

<div class="systeme_onglets">

        <div class="onglets">
            <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
            <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
            <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
        </div>

        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>

            <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>

            <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>
        </div>
    </div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'quoi';
                change_onglet(anc_onglet);
        //-->
        </script>

La valeur que tu donneras à cette ligne: var anc_onglet = 'nom_de_longlet', qui se trouve en fin de code correspond à l'onglet qui s'affichera à chaque fois que tu rechargeras la page.

Pour finir, si tu souhaites rajouter des onglets, il te suffiras de rajouter ceci dans la partie "onglet":

Code:

<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>

et ceci dans la partie "contenu_onglet":

Code:

<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>

III:- Le CSS -

Il est évident que tu peux personnaliser tes onglets avec du CSS. Voici donc un code CSS de base modifiable bien évidemment:

Code:

.onglet
        {
                display:inline-block;
                margin-left:3px;
                margin-right:3px;
                padding:3px;
                border:1px solid black;
                cursor:pointer;
        }
        .onglet_0
        {
                background:#bbbbbb;
                border-bottom:1px solid black;
        }
        .onglet_1
        {
                background:#dddddd;
                border-bottom:0px solid black;
                padding-bottom:4px;
        }
        .contenu_onglet
        {
                background-color:#dddddd;
                border:1px solid black;
                margin-top:-1px;
                padding:5px;
                display:none;
        }

Si tu souhaites que les onglets changent au passage de la souris, remplace tous les onclick par onmouseover.

Voilà, nous arrivons à la fin de ce tuto. J'espère qu'il vous aura bien servi.

Pour voir le résultat, cliquez ici.