AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Fnac : 2 Funko Pop achetées : le 3ème offert (large sélection de ...
Voir le deal
Le Deal du moment :
Fnac : 2 Funko Pop achetées : le 3ème ...
Voir le deal

    Bloc flottant latéral ouvrant "onclick" (CSS avec target)

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 24 Nov 2012 - 0:19

    Rappel du premier message :


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Hello x)

    A la demande de Michiyo et comme promis je poste le tutoriel permettant de réaliser un onglet dans le même type que celui-ci (le truc en jaune à gauche qui s'ouvre en hover ^^) mais qui s'ouvre au clic et non au survol. De plus, histoire de faire les choses entièrement, j'ai fait en sorte que le bouton "ouvrir" se change en "fermer" une fois ouvert ! (tant qu'à faire hein...)

    Voici donc l'aperçu :

    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 13 JIoAHnh
    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 13 DGzyuYo

    Vous avez donc là un espace que vous pourrez agrandir au besoin pour y mettre ce que vous souhaitez : top site, liens, news... à la limite et avec la bonne taille vous pouvez même y glisser votre CB ! x)



    Installation HTML

    Pour commencer, aller dans vos templates (Affichage), et ouvrez celui nommé "overall_header" (ou "haut de page").

    Repérez ce code (ligne 201) :

    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    Et ajoutez juste après lui le code de votre petite boite à onglet :

    Code:
    <div id="target_onglet"><div id="target_onglet2">
          <div id="onglet_clic">
          <span class="onglet_clic_navigation">
            <a href="#target_onglet" class="onglet_ouvrir"><img src="http://img15.hostingpics.net/pics/411044ongletouvrir.png" alt="lien" /></a>
            <a href="#target_onglet2" class="onglet_fermer"><img src="http://img15.hostingpics.net/pics/242659ongletfermer.png" alt="lien" /></a>
          </span>
          <div id="onglet_clic_contenu">
            <div id="onglet_contenu">
            Contenu de votre onglet.
            </div>
            </div>
        </div>
          </div></div>

    N'oubliez pas d'enregistrer puis de valider votre template modifié !


    Installation CSS

    Allez ensuite dans votre feuille CSS pour y mettre le morceau de code css suivant, à ajouter au reste de votre css si vous en avez déjà :

    Code:
    /* ONGLET DEVOILE EN CLIC */

    #target_onglet, #target_onglet2
    {
      position: fixed;
    }
    #onglet_clic
    {
      position: fixed;
      z-index: 999;
      width: 342px;
      height: 200px;
      margin-left: -310px;
      margin-top: 100px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    #onglet_contenu
    {
      width: 290px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      height: 190px;
      color: #1e466c;
      font-size: 11px;
    }
    .onglet_clic_navigation
    {
      display: block;
      float: right;
      width: 40px;
      height: 120px;
      overflow: hidden;
      background: url(http://img15.hostingpics.net/pics/974397ongletouvrir.png);
      margin-top: 40px;
    }
    .onglet_ouvrir
    {
      position: absolute;
      z-index: 3;
    }
    .onglet_fermer
    {
      position: absolute;
      z-index: 2;
    }
    #onglet_clic_contenu
    {
      width: 300px;
      height: 200px;
      overflow: hidden;
      background: #72a3cc;
      border: 1px solid #2f6ea5;
    }
    #target_onglet:target #onglet_clic
    {
      margin-left: -10px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    #target_onglet:target .onglet_ouvrir
    {
      z-index: 1;
    }
    #target_onglet2:target #onglet_clic
    {
      margin-left: -310px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    Votre boite est prête ! Voyons quelques points de personnalisation...


    Personnalisation

    1) Les tailles :
    Si vous souhaitez modifier la taille de votre bloc vous devez modifier plusieurs mesure :
    - la taille totale de la boite comprenant le contenu + le bouton (#onglet_clic)
    - la taille de votre contenu lui-même (#onglet_contenu)
    - l'importance de la marge négative qui fait disparaitre le bloc de la page lorsqu'il est fermé (#onglet_clic - margin-left: -310px;)

    2) Les boutons ouvrir/fermer :
    Ces boutons sont simplement des images, comme vous le verrez dans le html. Il suffit donc de faire vos propres boutons et de mettre leur adresse à la place des boutons actuels. Il est important que les deux fassent la même taille, mais ils ne se superposent pas donc vous pouvez jouer tant que vous voulez sur la transparence, y compris écrire juste le texte.
    Si jamais vous souhaitez changer la taille des boutons, pas de souci (du moment que les deux ont la même) mais il faudra alors changer :
    - le bloc comportant le bouton (.onglet_clic_navigation)
    - adapter la largeur totale du bloc de la boite (#onglet_clic) car elle est égale à la largeur de votre contenu + la largeur de l'onglet (+ quelques pixels de réajustement)
    - ...et si vous changez la largeur totale il faudra forcément changer le margin négatif qui rabat l'ensemble Wink

    Pour le reste, il s'agit juste de changement basique des couleurs de fond, de texte, de bordures... Vous pouvez aussi mettre une image de fond à la place de la couleur bleu du bloc du contenu.

    Voilà ! J'espère que ça vous sera utile, c'est une alternative à celui qui se déplie en hover, et même si l'écriture du css est un peu complexe au départ (pour moi pas pour vous XD) c'est un fonctionnement simple et sans javascript.

    En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code il n'en est pas moins conçu par quelqu'un d'autre, en l'occurrence moi puisque je l'ai rédigé en partant d'une feuille blanche, donc il est normal de ne pas simplement se l'approprier sans autre forme de respect. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça x)


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 16:18, édité 1 fois



    sign
    Akiyuki
    Akiyuki
    MasculinAge : 25Messages : 89

    Mar 20 Jan 2015 - 1:38

    Parfait ! Merci beaucoup ♥
    Ajartielle
    Ajartielle
    FémininAge : 35Messages : 87

    Jeu 22 Jan 2015 - 21:48

    Donc je pourrais me passer de Javascript ? Oh... Thank you ! Shocked
    Zélya
    Zélya
    FémininAge : 34Messages : 190

    Ven 23 Jan 2015 - 17:49

    bonsoir merci du partage



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 13 891727signaNanmoue
    Alyssa.B50
    Alyssa.B50
    FémininAge : 29Messages : 42

    Sam 24 Jan 2015 - 14:32

    merci ^^ vais pouvoir mettre une playlist sur le fo
    Hayate747
    Hayate747
    MasculinAge : 34Messages : 196

    Dim 1 Fév 2015 - 15:00

    Merci !!
    Ouat
    Ouat
    FémininAge : 40Messages : 74

    Mar 3 Fév 2015 - 16:57

    Merci :coeur:
    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Mer 11 Fév 2015 - 14:57

    Wahou un onglet sans JS ! Merci Very Happy



    Alumine
    okeane
    okeane
    FémininAge : 33Messages : 93

    Mar 24 Fév 2015 - 22:46

    merci =)
    Rosedesvents
    Rosedesvents
    FémininAge : 37Messages : 97

    Ven 13 Mar 2015 - 19:52

    Merci ! Very Happy
    ghostasylum
    ghostasylum
    FémininAge : 29Messages : 27

    Ven 13 Mar 2015 - 21:37

    Merci



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 13 Signature-daevasfashion-7562
    Cruelly
    Cruelly
    FémininAge : 30Messages : 2605

    Mer 18 Mar 2015 - 3:57

    Voilà ce que je cherche depuis un moment ! Merci ^^



    :heart: :heart:
    Mystick
    Mystick
    FémininAge : 39Messages : 100

    Mer 18 Mar 2015 - 13:09

    Merci pour le partage, c'est génial
    Haniwa
    Haniwa
    FémininAge : 29Messages : 206

    Mer 18 Mar 2015 - 17:51

    Merci
    Anonymous
    Invité

    Mer 25 Mar 2015 - 18:54

    La curiosité va me faire poster de partout o/
    Un grand merci pour toi :)
    Syx
    Syx
    MasculinAge : 25Messages : 204

    Dim 29 Mar 2015 - 13:23

    Sympa, je prends. Merci !




    ~
    LOUVE ☽
    LOUVE ☽
    FémininAge : 33Messages : 53

    Mer 8 Avr 2015 - 19:58

    Merci
    Heryon
    Heryon
    FémininAge : 29Messages : 23

    Lun 13 Avr 2015 - 19:53

    Un grand merci !
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Mer 15 Avr 2015 - 12:45

    merci
    Kanra
    Kanra
    FémininAge : 23Messages : 113

    Ven 17 Avr 2015 - 22:20

    Merci !
    aryanon
    aryanon
    MasculinAge : 26Messages : 50

    Ven 17 Avr 2015 - 23:47

    merci pour ce code! Very Happy ca va me sauver la vie en attendant de trouver exatement ce que je cherche ^^
    Anonymous
    Invité

    Sam 18 Avr 2015 - 10:46

    Merci beaucoup !
    Hylia
    Hylia
    FémininAge : 23Messages : 100

    Mer 29 Avr 2015 - 19:15

    Merci! =)



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 13 _hylia10
    Kobye
    Kobye
    FémininAge : 27Messages : 38

    Mer 6 Mai 2015 - 9:09

    merci ♥
    W.
    W.
    FémininAge : 25Messages : 127

    Mer 6 Mai 2015 - 15:23

    merci beaucoup !



    Je suis Charlie.
    avatar
    Ge.
    FémininAge : 33Messages : 21

    Lun 11 Mai 2015 - 4:06

    Merci du partage !
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 1:50