• Tableau à onglets-CSS

    Un tableau ou menu horizontal, à onglets, tout en CSS ...
    Avec effet coulissant du contenu, Ooooooh!...c'est beau !!!
    Ici la largeur est fixé à 70%, modifiable via le code CSS:

    #page-wrap { width: 70%; margin: 10px auto; }

    La hauteur est de 450px, à vous d'adapter tout ça, à votre sauce ..!

    .tabs { position: relative; min-height: 450px; clear: both; margin: 25px 0; }

     

     




    <div id="menu-tab"><!----------------tableau-01---------------------------------->
    <div id="page-wrap">
    <div class="tabs"><!----------------onglet-01-accueil-------------------------->
    <div class="tab"><input id="tab-1" checked="checked" name="tab-group-1" type="radio" /> <label for="tab-1">Accueil</label>
    <div class="content">
    <p><a href="#">Retour Acceuil</a></p>
    <p><a href="#">Contact</a></p>
    <p><a href="#">Newsletter</a></p>
    </div>
    </div>
    <!----------------onglet-02-articles-------------------------->
    <div class="tab"><input id="tab-2" name="tab-group-1" type="radio" /> <label for="tab-2">Articles</label>
    <div class="content">
    <p>Exemple, une image, du texte</p>
    <br />
    <p><img src="http://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /></p>
    </div>
    </div>
    <!----------------onglet-03-forum-------------------------->
    <div class="tab"><input id="tab-3" name="tab-group-1" type="radio" /> <label for="tab-3">Forum</label>
    <div class="content">
    <p>Exemple, une image, et une video...</p>
    <br />
    <p><img src="http://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /> <iframe style="margin-left: 30px; box-shadow: 6px 6px 10px grey;" src="http://player.vimeo.com/video/36778024" frameborder="0" width="500" height="281"></iframe></p>
    </div>
    </div>
    <!----------------onglet-04-libre-------------------------->
    <div class="tab"><input id="tab-4" name="tab-group-1" type="radio" /> <label for="tab-4">Video-1</label>
    <div class="content">
    <p>Une vid&eacute;o de Constance..!</p>
    <br /> <iframe src="//www.youtube.com/embed/LU2BQY_Doio?rel=0" frameborder="0" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    <!----------------onglet-05-libre------------------------->
    <div class="tab"><input id="tab-5" name="tab-group-1" type="radio" /> <label for="tab-5">Video-2</label>
    <div class="content"><br /> <iframe src="//www.youtube.com/embed/I3W3mRs4ULQ?rel=0" frameborder="0" width="560" height="315" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    </div>
    <!----------------onglet-06-libre--------------------------
    <div class="tab"><input id="tab-6" name="tab-group-1" type="radio" /> <label for="tab-6">Codes</label>
    <div class="content">
    <p>Code CSS</p>
    <br /> <iframe src="//www.youtube.com/embed/LU2BQY_Doio?rel=0" frameborder="0" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    </div>---></div>
    </div>
    <p><br /><br /><br /></p>

    See the Pen Menu à onglets by Mike (@mikegmz) on CodePen.

    « Menu Accordéon-HTML/CSSImage au survol texte-CSS »

    Tags Tags : ,
  • Commentaires

    38
    Vendredi 19 Février 2021 à 14:51
    Bonjour, merci pour ce code. Mais j'ai simplement un petit soucis je voulais savoir comment je pouvais faire pour qu'au passage de la souris sur les onglets inactifs, la couleur change. (Je crois qu'il faudrait ajouter un :hover?) Je sais que le sujet date un peu et j'espère qu'il y aura quelqu'un pour m'aider. Merci beaucoup.
    37
    pierre
    Vendredi 12 Juin 2020 à 15:32

    Bonjour

    très bon tuto

    j'ai créé un design à l'aide de votre tuto

    comment espacer les onglets

    cordialement

    pierre

    36
    Vendredi 18 Octobre 2019 à 13:59
    C'est génial ce genre de code! :o Je pense que je testerai sur le forum sur lequel je suis, pour la signature d'un personnage! (l'espace étant limité, avoir plusieurs onglets sera très pratique pour tout caser!)
    35
    Samedi 2 Mars 2019 à 11:23

    Bonjour Mike !
    avec un grand merci parce que c'est drôlement bien fait !
    voir par là :
    http://repertoire.ek.la/accueil-p1251768↗
    Merci beaucoup et au plaisir :)

    34
    Jeudi 15 Novembre 2018 à 13:16

    Finalement j'ai trouvé : mettre la balise style et le code CSS dedans dans l'article juste avant le HTML, ça le fait !

    33
    Jeudi 15 Novembre 2018 à 13:15
    Bonjour,
    Je voulais tester pour alléger les index de mes rubriques (que je mets dans la zone description) mais ça ne fonctionne pas. Quand je copie-colle le code CSS dans Ajouter du CSS à ma feuille de style modifiée au moment de valider l'éditeur EB me dit que le code contient des erreurs et me demande de corriger. Par élimination j'ai déterminé que c'est le code au niveau des onglets actifs avec le signe ~ mais si on l'enlève, ça ne marche plus. Donc là je coince, je ne sais comment faire :/
    Merci de me répondre si votre blog est toujours actif.
    32
    Dimanche 20 Novembre 2016 à 01:21
    Merci beaucoup pour ce code !
    31
    Jeudi 5 Mai 2016 à 21:46
    Salut !

    Merci pour ce code qui est très utile, il permet de classer les informations sans charger les pages. Néanmoins, il y a quelque chose que je comprends pas : pourquoi le sixième onglet n'apparaît pas, alors qu'il est dans le code HTML ? j'ai essayé de me débrouiller toute seule, mais sans succès... Pourrais-tu m'aider stp ?

    Merci d'avance !
      • Vendredi 6 Mai 2016 à 21:48

        Ça fonctionne ! Merci beaucoup d'avoir pris le temps de me répondre et de m'aider.

        Bonne continuation !

      • Vendredi 6 Mai 2016 à 19:06

        Si on ajoute le 6ème onglet il faut retirer une balise de fermeture de l'onglet 5 (</div>).....
        Et idem si on ajoute un 7ème et 8ème onglet, on retire cette balise à l'onglet précédent, ça donne:

        <!------------------------------HTML--------------------------------------->

        <div id="menu-tab"><!----------------tableau-01---------------------------------->

        <div id="page-wrap">

        <div class="tabs"><!----------------onglet-01-A-B-C-D-------------------------->

        <div class="tab"><input id="tab-1" checked="checked" name="tab-group-1" type="radio" /> <label for="tab-1">A-B-C-D</label>

        <div class="content">

        <h1>A :</h1>

        <br />

        <p><a href="#">ABONNEMENT, ABONN&Eacute;S</a></p>

        <p><a href="#">Contact</a></p>

        <p><a href="#">Newsletter</a></p>

        </div>

        </div>

        <!----------------onglet-02-articles-------------------------->

        <div class="tab"><input id="tab-2" name="tab-group-1" type="radio" /> <label for="tab-2">E-F-G-H</label>

        <div class="content">

        <p>Exemple, une image, du texte</p>

        <br />

        <p><img src="http://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /></p>

        </div>

        </div>

        <!----------------onglet-03-forum-------------------------->

        <div class="tab"><input id="tab-3" name="tab-group-1" type="radio" /> <label for="tab-3">Forum</label>

        <div class="content">

        <p>Exemple, une image, et une video...</p>

        <br />

        <p><img src="http://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /></p>

        <p><iframe style="width: 90%; margin-left: 5%; box-shadow: 6px 6px 10px grey;" src="http://player.vimeo.com/video/36778024" frameborder="0" width="500" height="281"></iframe></p>

        </div>

        </div>

        <!----------------onglet-04-libre-------------------------->

        <div class="tab"><input id="tab-4" name="tab-group-1" type="radio" /> <label for="tab-4">Video-1</label>

        <div class="content">

        <p>Une vid&eacute;o de Constance..!</p>

        <br /> <iframe style="width: 90%; margin-left: 5%; box-shadow: 6px 6px 10px grey;" src="//www.youtube.com/embed/LU2BQY_Doio?rel=0" frameborder="0" width="300" height="315" allowfullscreen="allowfullscreen"></iframe></div>

        </div>

        <!----------------onglet-05-libre------------------------->

        <div class="tab"><input id="tab-5" name="tab-group-1" type="radio" /> <label for="tab-5">Video-2</label>

        <div class="content"><br /> <iframe style="width: 90%; margin-left: 5%; box-shadow: 6px 6px 10px grey;" src="//www.youtube.com/embed/I3W3mRs4ULQ?rel=0" frameborder="0" width="300" height="315" allowfullscreen="allowfullscreen"></iframe></div>

        </div>

        <!----------------onglet-06-libre-------------------------->

        <div class="tab"><input id="tab-6" name="tab-group-1" type="radio" /> <label for="tab-6">Codes</label>

        <div class="content">

        <p>Code CSS</p>

        <br /><iframe src="//www.youtube.com/embed/LU2BQY_Doio?rel=0" frameborder="0" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></div>

        </div>

        </div>

        </div>

      • Vendredi 6 Mai 2016 à 18:33

        C'est bien ce qui me semblait, alors du coup j'ai fait comme tu as dit, mais le sixième onglet n'apparaît pas et ça fait un truc bizarre au niveau du header. En fait, Il y a un bloc blanc qui est sur le header. Je ne comprends pas d'où il sort...

        EDIT : Ah si tiens, j'avais mal regardé, mais j'ai bien un sixième onglet qui est apparu mais en dessous du bloc, c'est trop bizarre.

         

      • Vendredi 6 Mai 2016 à 09:31

        Le code html du 6ème onglet est inséré dans une balise commentaire <!------------> donc non exécuté par le navigateur.
        Il est considéré comme un commentaire.
        Pour l'activer, il suffit de refermer cette balise sur le titre par exemple (6ème onglet) et non pas à la fi du code :

        <!---------------6ème onglet---------------->

         

    30
    Dimanche 27 Mars 2016 à 10:04

    Pour la vidéo en utilisant ce code:

    <iframe style="border: 10px double #FCCF8D; border-radius: 20px;
    box-sizing: border-box;"
    src="http://www.youtube.com/embed/6Ugj9STi-dg?rel=0"
    frameborder="0" width="400" height="300"></iframe>
    ......................
    "Partager" code vidéo YouTube ceci est - https://youtu.be/6Ugj9STi-dg
    Pour modifier la vidéo, vous devez changer cette partie 6Ugj9STi-dg par l'autre vidéo

    29
    Jeudi 24 Mars 2016 à 15:31

    Bonjour et merci pour ce code... smile

    J'ai toutefois une question : Peut-on l'intégrer uniquement à un article comme un genre de sommaire ?

    ex : article introduction qui comprendrait les onglets : introduction, matériel, étapes, modèles

    Les onglets pointeraient vers d'autres articles ...

    D'avance, merci pour la réponse smile

      • Jeudi 24 Mars 2016 à 18:26

        Ouh lala !!! Mais c'est trop top ton truc !!! Merci beaucoup... Euhhhh par contre te demanderai peut-être un coup de main... car le seul css que j'ai fait c'est arrondir mes visiteurs mdrrr... 

        Merci beaucoup pour ce code !!! J'étais en train de m'énerver avec un tableau mais on voit pas bien les bords... Donc, je vais terminer de construire les articles à mettre en onglets ... 

        Super !!! super !!! Trop contente !!! coolbiggrinhappy 

        Dommage y a pas d'émoticone qui saute de joie ... !!!

      • Jeudi 24 Mars 2016 à 16:25
        Salut!

        Oui, oui, on peut faire comme ça !
    28
    Jeudi 18 Juin 2015 à 12:22

    Merci...GloriaV & LGR happy !!!

    27
    Jeudi 18 Juin 2015 à 11:57
    Adorable et très serviable. 1000 grâce à l'excellent travail. GloriaV
    26
    Jeudi 18 Juin 2015 à 10:26
    Merci pour ce tableau à onglet
    jy ai fait mon billet avec !!!
    bonne journée
    25
    Samedi 11 Avril 2015 à 17:20
    OK, merci. Bon week-end
    24
    Samedi 11 Avril 2015 à 16:02
    Merci pour cette réponse.
    23
    Samedi 11 Avril 2015 à 12:36

    Si vous avez des difficultés pour insérer le code CSS dans "Ajout CSS" via "Modifier apparence", placer ce code entre des balises "<style>" dans un module simple en mode "source" (<>).
    Exemple:

    <style>

    /*--coller ici le code css--*/

    </style>

    22
    Samedi 11 Avril 2015 à 12:22
    Même problème pour moi; lorsque je copie-colle le code, on me dit qu'il y a une erreur... Quelqu'un peut-il m'aider?
    21
    Mercredi 11 Mars 2015 à 16:26

    Bonjour. J'ai voulu refaire un tableau à onglets comme sur le modèle, quand je copie le code CSS j'ai un message d'erreur ....Quelqu'un peut-il m'aider ? Merci

    20
    Samedi 17 Janvier 2015 à 23:22

    merci bcp, pour ces codes. ^^

    19
    Vendredi 9 Janvier 2015 à 15:59

    Aucun pb sur ce code....!!!

    18
    Vendredi 9 Janvier 2015 à 13:08
    y a t-il une erreur sur ce code??? car chez moi le css disparait après avoir fonctionné d'1 minute
    17
    Dimanche 7 Décembre 2014 à 23:09
    OK, merci ça marche.... Super !
    16
    Dimanche 7 Décembre 2014 à 18:53

    Pour intégrer du code CSS:

    Apparence > Modifier thème > Ajout CSS (bas de page)

    ou directement en début d'article (mode source <>) entre des balises <style>:

    <style>....code CSS.....</style>

    15
    Dimanche 7 Décembre 2014 à 18:14
    Bonsoir
    J'ai le même souci : j'ai copié collé le code htlm sur la page htlm mais j'ai une page avec les rubriques, et non un tableau. Il fallait surement que j'intégre le code css, mais ... comment je fais ? Merci
    14
    Lundi 24 Novembre 2014 à 15:05

    Oui, on peut....ajout CSS:

    .tab { margin-top: -10px; }
    13
    Lundi 24 Novembre 2014 à 13:45
    Bien le bonjour,
    depuis la mise à jour sur eklablog les onglets sont légèrement mal mis, c'est possible de corriger cela ou pas ? :/ On dirait que les écritures des onglets ont été abaissée.
    12
    Dimanche 3 Août 2014 à 14:53
    Bonne vacances alors :)
    Et voila quand je le place directement dans l'article sa marche, en attendant faudra que je fasse comme cela ^^
    Un grand merci en tout cas.
    11
    Dimanche 3 Août 2014 à 07:14

    Une réponse vite fait sur le pouce, et oui je pars en vacances dans une heure ...!
    Bref, pas normal ton truc ..! Je pense plutôt à une défaillance côté serveur Ekla.
    Dans l'immédiat, tu places ton code CSS entre des balises <style> .....</style> en début d'article, juste avant le code HTML.

    Exemple:

    <!--------------------Code-CSS----------------->

    <style>

    Code CSS

    </style>

    <!--------------------Code-HTML----------------->

    <div .......code HTML ........
    .......................................</div>

    10
    Samedi 2 Août 2014 à 12:11

    Un grand merci, j'ai réussi à insérer le tableau :) Il ne me reste plus qu'un peu de pratique je pense !

    Edit: J'ai un autre problème, quand j'actualise la page de mon site le code CSS que j'ai placé dans Apparence > Modifier le thème > Ajout CSS (bas fenêtre) > Enregistrer disparaît :/ Pourtant j'ai d'autres codes CSS placé là et ceux la restent bien là. Et donc le tableau disparaît aussi quand j'actualise. Et excusez moi de vous dérangez autant ^^'

    9
    Samedi 2 Août 2014 à 08:24

    Salut !

    En général l'ajout de code CSS se fait comme ceci (recommandé):

    Apparence > Modifier le thème > Ajout CSS (bas fenêtre) > Enregistrer

    De cette manière, ce code CSS est actif sur tout le blog. 
    On parle alors de feuille de style CSS.

    Le code HTML se place dans un article (ou module simple, ou page) en mode édition-expert (icone:<>)
    Lorsque le code CSS est spécifique, je précise comment l'insérer.

    Pour insérer du contenu dans un onglet (ex: une video dans l'onglet "Video-2"), il faut insérer le code video après la balise
    <div class="content> ............</div></div>
    Comme ci-dessous en jaune:

    <!----------------onglet-05-libre------------------------->

    <div class="tab"><input id="tab-5" name="tab-group-1" type="radio" /> <label for="tab-5">Video-2</label>

    <div class="content"><br /> <iframe style="display: block; margin-left: auto; margin-right: auto;" src="//www.youtube.com/embed/I3W3mRs4ULQ?rel=0" frameborder="0" width="560" height="315" allowfullscreen="allowfullscreen"></iframe></div>

    </div>

    </div>

     

    8
    Samedi 2 Août 2014 à 01:05

    Re bonsoir,
    Merci pour m'avoir orienter ici , c'est exactement ce que je recherchais.
    Mais je ne comprends strictement rien dans le langage informatique à mon grand regret. Je dois copié collé le code css ou htlm dans mon article? J'ai essayé sa n'a rien donné ... /:

    Au passage très beau blog :)



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)