• Tableau à onglets - CSS

    Un tableau à onglets, tout en CSS....

    Tableau à onglets - CSS

    On y met tout contenu:
    Texte, liens, vidéo, audio, etc...
    Avec apparition en "effet slide"...
    Pratique et utile.

     

    « Menu Rotatif CSSLecteur video JwPlayer »

  • Commentaires

    13
    Mardi 12 Avril 2016 à 14:31

    c'est par ici ke je te passe le bonjour lol

    Tu connais la chanson,

    ♪je vais bien ,

    tout va bien ♫

    ♫Tout est okéééé♫♪ mdr !!

    @+

      • Mardi 12 Avril 2016 à 19:36

        yes ..... !!!

    12
    Sliver
    Mercredi 9 Décembre 2015 à 17:08

    Bonjour,

    Dans les onglets je voudrais mettre une image à la place du texte mais du coup tout bug les onglets ne sont plus du tout pareille. Quelqu'un à une idée?

    Merci d'avance

    11
    Mardi 1er Décembre 2015 à 10:12

    Bonjour Mike, je serai intéressée par ton menu coulissant pour tablette, où puis je le trouver ? 

    Merci à toi et bon mardi, Flo

      • Mardi 1er Décembre 2015 à 11:08

        Salut Flo !

        Ah, oui....j'ai un peu oublié de faire un article pour ce menu !!!!
        Je colle les codes ci-dessous en attendant.
        Donc on utilise un menu-droite, qui est caché et activé par js .
        Bien entendu pour les tablettes il faut activer la version standard ...!

        <!----------------------Menu-lateral-On-Off--------------------------------->

        <style><!--

        #menu1 {

         position:fixed;

         right:-265px;

         top:40px;

         width:0px;

         border:2px solid grey;

         background-color:#282724;

         z-index:100;

         transition:0.5s;

         }

         #menu1:before {

         position:relative;

         right:25px;

         content:"◄";

         background-color:white;

         

         padding:2px;

         z-index:110;

         

         }

         /*-------------------

         #menu1:hover {

         right:0px;

         border:1px dotted grey;

         transition:1s;

         }

         

         #menu1:hover#menu1:before {

         content:"►";

         color:white;

         background-color:brown;

         }--------------------------*/

         #ulmodules {

         margin-right:-250px;

         }

         .module_contenu_block {

         overflow: visible; 

        width: 100%;

        }

        #menu1 a{color:white;font-style:normal;}

        #menu1 a:hover{color:grey;}

         /*-------------------Menu-On-Off------------------*/

         

        #menu-on {

        position:fixed;

         top:30px;

         right:30px;

         background-color:white;

         border-radius:5px;

         padding:0px 2px;

           padding-right: 8px;

         box-shadow: 6px 6px 10px black;

         transition:1s;

         }

         #menu-on:hover {

         background-color:#2ecc71;

         color:white;

         box-shadow: -6px 6px 10px black;

         transition:1s;

         }

         #menu-off {

         display:none;

        position:fixed;

         top:30px;

         right:30px;

         background-color:white;

         border-radius: 5px;

         padding:0px 2px;

         box-shadow: 6px 6px 10px black;

         transition:1s;

         }

         #menu-off:hover {

        background-color:#c0392b; 

         color:white;

         box-shadow: -6px 6px 10px black;

         transition:1s;

         }

         #menu-off a, #menu-on a { 

         font-weight: initial; 

         font-style: normal; 

         text-decoration: none; 

         font-variant: normal; 

         color: #081501; 

         transition:1s;

         }

         #menu-off a:hover, #menu-on a:hover { 

         color:white;

         transition:0.5s;

         }

        --></style>

         

        <div id="menu-on" title="Voir menu" onclick="$('menu1').style.right = '0px';$('menu-off').style.display = 'block';$('menu-on').style.display = 'none';$('menu1').style.width = '250px';"><a href="#nogo"><img style="width: 30px;" src="http://ekladata.com/CHkmfpA3qK52iSwAlpBeDX12n1g.png" alt="" />ON</a></div>

        <div id="menu-off" title="Cacher menu" onclick="$('menu1').style.right = '-265px';$('menu-off').style.display = 'none';$('menu-on').style.display = 'block';$('menu1').style.width = '0px';"><a href="#nogo"><img style="width: 30px;" src="http://ekladata.com/CHkmfpA3qK52iSwAlpBeDX12n1g.png" alt="" />OFF</a></div> 

    10
    Mercredi 24 Juin 2015 à 16:03

    Bonjour

    Géniale cette présentation, ça réduit la longueur des articles en les condensant !

    Je te l'emprunte pour faire des tests et si ça marche, j'adopte pour mes articles de randonnées et même ceux de tourisme, pourquoi pas.

    Merci de ton aide, c'est très sympa de mettre des sources en "libre service", surtout lorsqu'ils sont de qualité

    Maintenant je vais essayer de comprendre ce que tu as fait !

    @lain

    9
    Vendredi 15 Mai 2015 à 21:09

    Tu parles ke je l'ai vu , c la classe  lol

    mais bon jaime bien mon menu coulissant ke jai fait d'apres ton deezer coulissant, tu te rappelles !!!

     

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    8
    Vendredi 15 Mai 2015 à 20:37

    Bah ouaips, LGR c'est plus rapide !!!
    Comment va ???
    T'as vu aussi mon menu latéral droit coulissant....spécial tablette et smartphone.
    Et oui, le hover CSS c'est pas pratique avec les écrans tactiles.
    Sinon, va falloir se mettre grave à Bootstrap (http://getbootstrap.com/).
    Y a plus que ça maintenant sur les sites et ici (because : sites responsives...Responsive Web design)...
    @+

    7
    Vendredi 15 Mai 2015 à 15:34

    c cool ici aussi , effet interactif avec ces codes css

    je prends ton code et je teste lol voir jy jaurai utilisation sur un de mes blogs

    merci @ +

    j'ai trouvé pour

    LGR

    C4EST INITIAL DE MON PSEUDO, ke j'peux etre nul mdr !!!

    6
    Samedi 7 Mars 2015 à 13:30

    Très utile, merci du code !

    5
    Dimanche 4 Janvier 2015 à 10:04

    pourquoi chez moi il se désactive souvent??

    4
    Dimanche 4 Janvier 2015 à 08:48

    Salut!

    Non, tout en CSS ....pas besoin de JS.

    3
    Samedi 3 Janvier 2015 à 23:52

    slt chef juste pour savoir, est ce qu'il faut activer son javascript avant de l'intégrer?

    Suivre le flux RSS des commentaires


    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)

Cet article vous a plu ?
Abonnez-vous !!!

Newsletter