AccueilAccueil  PortailPortail  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Tableau d'accueil (simple)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Leks
Admin
avatar

Messages : 342
Top-Points : 10759
Date d'inscription : 17/09/2011

MessageSujet: Tableau d'accueil (simple)   Jeu 13 Oct - 17:29

Bonjour, je vous donne les codes pour avoir un tableau d'accueil très simple.

Code du message d'accueil :
Code:
<div id="mes_onglets">
            <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
                <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu">Mon contenu 1</div>
            <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
            <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
            <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
        </div></div></ul></div>
( Affichage -> Généralités )

Le css :

Code:
        .mon_onglet{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #fff;
          border: 1px solid #000;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;
        }
        .mon_onglet:hover{
          background: #b8efa1;
        }       
        .mon_onglet_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #fff;
          border-top: 1px solid #000;
          border-right: 1px solid #000;
          border-left: 1px solid #000;
          border-bottom: 1px solid #fff;
          cursor: pointer;
          margin-bottom: -1px;
          list-style: none;}         
        .clear{
          clear: both;
        }
        .mon_contenu{
          color: #000;
          background: #fff;
          border: 1px solid #000;
          padding: 10px;
          line-height: normal;
          font-size: 11px;}
        #mes_contenus, #mes_onglets{
          width: 400px;
          margin: auto;}
( Affichage -> Couleurs -> Feuille de style CSS )

Code javascript :
Code:
function changeOnglet(_this){
            var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
            for(var i = 0; i < getOnglets.length; i++){
                if(getOnglets[i].id){
                    if(getOnglets[i].id == _this.id){
                        getOnglets[i].className = 'mon_onglet_selected';
                        document.getElementById('c' + _this.id).style.display            = 'block';
                    }
                    else{
                        getOnglets[i].className = 'mon_onglet';
                        document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
                    }
                }
            }         
        }
( Modules -> Gestions des codes Javascript )

Et voilà le résultat : http://www.top-discussions.com/h2-accueil1
PS : Tableau trouvé sur forum.forumactif.com !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://top-discussions.actifforum.com
Riri
Membres


Messages : 28
Top-Points : 10150
Date d'inscription : 15/10/2011

MessageSujet: Re: Tableau d'accueil (simple)   Sam 15 Oct - 10:57

Merci pour ce tutoriel Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Leks
Admin
avatar

Messages : 342
Top-Points : 10759
Date d'inscription : 17/09/2011

MessageSujet: Re: Tableau d'accueil (simple)   Sam 15 Oct - 11:14

Merci Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://top-discussions.actifforum.com
Contenu sponsorisé




MessageSujet: Re: Tableau d'accueil (simple)   

Revenir en haut Aller en bas
 
Tableau d'accueil (simple)
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Top Discussions :: Salons des services :: Services de codages :: Tutoriels de codage-
Sauter vers: