AccueilFAQRechercherMembresGroupesS'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.


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

    Okhmhaka
    Okhmhaka
    FémininAge : 34Messages : 31851

    le 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 2 JIoAHnh
    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 2 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



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 2 Unchai10
    Pamplemousse
    Pamplemousse
    FémininAge : 28Messages : 31

    le Ven 11 Jan 2013 - 17:11

    Merci /Ô/



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 2 849596fdt5
    Ilmryn
    Ilmryn
    FémininAge : 22Messages : 36

    le Sam 12 Jan 2013 - 14:44

    Merci !



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 2 566836signaill
    Edward Speleers
    Edward Speleers
    FémininAge : 31Messages : 460

    le Dim 13 Jan 2013 - 12:47

    Ca m'intéresse, merci mille fois :)



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 2 Edkidd11
    Sephy
    Sephy
    FémininAge : 25Messages : 139

    le Lun 14 Jan 2013 - 1:56

    Merci pour cette astuce qui va changer ma vie!! =D'
    Skully NyNy
    Skully NyNy
    FémininAge : 30Messages : 19

    le Mer 16 Jan 2013 - 21:29

    Merci :)



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 2 Neverutopiasignature
    shala
    shala
    FémininAge : 27Messages : 213

    le Dim 20 Jan 2013 - 18:20

    merci



    tchapalow
    tchapalow
    FémininAge : 29Messages : 33

    le Lun 21 Jan 2013 - 15:46

    Je viens d'essayer par moi même durant une bonne heure, je jette l'éponge, je crois que j'ai besoin d'un tutoriel!
    Je remercie les gens tellement plus doués que moi!
    Offrande
    Offrande
    FémininAge : 27Messages : 194

    le Ven 25 Jan 2013 - 9:40

    Merci pour le partage, cela me fait pensé à la navigation sur N.U
    je trouve cela vraiment pratique quand on as un long forum comme le mien
    merci de tout coeur ! :love:
    Mitsuomi Takayanagi
    Mitsuomi Takayanagi
    Age : 26Messages : 76

    le Ven 25 Jan 2013 - 16:37

    Merci pour l'astuce :)



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 2 Bannol1xj5
    Zarwins
    Zarwins
    FémininAge : 23Messages : 155

    le Ven 25 Jan 2013 - 20:44

    Merci !



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 2 121217030106243656
    Léoshadow
    Léoshadow
    MasculinAge : 20Messages : 47

    le Lun 28 Jan 2013 - 18:40

    Merci Very Happy



    Mon texte Very Happy
    Anonymous
    Invité

    le Ven 1 Fév 2013 - 22:26

    Mercii ! =)
    bibi0712
    bibi0712
    FémininAge : 41Messages : 66

    le Sam 2 Fév 2013 - 21:18

    Bonsoir
    J'aimerais savoir si il est possible de le placer sur le bas du forum et d'y mettre la chatbox qui s'ouvrirait vers le haut et pas vers la droite ?
    Merci ^^
    Eien
    Eien
    FémininAge : 27Messages : 5

    le Dim 3 Fév 2013 - 18:36

    Merci
    lala zhang
    lala zhang
    FémininAge : 28Messages : 368

    le Lun 4 Fév 2013 - 18:39

    merci pour le tuto
    Adonaï
    Adonaï
    FémininAge : 24Messages : 39

    le Mar 5 Fév 2013 - 22:06

    Merci =)
    MlleNamiya
    MlleNamiya
    FémininAge : 24Messages : 35

    le Mer 6 Fév 2013 - 14:24

    Exactement ce que je cherche ! Merci =)
    Nobuko2
    Nobuko2
    MasculinAge : 43Messages : 43

    le Sam 9 Fév 2013 - 18:50

    Merci !
    Doan Lavita
    Doan Lavita
    FémininAge : 21Messages : 72

    le Lun 11 Fév 2013 - 19:03

    Depuis le temps que je me demandais comment on faisait! xD Merci^^



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 2 Freee10
    Lysa-Elaye
    Lysa-Elaye
    FémininMessages : 20

    le Lun 11 Fév 2013 - 23:43

    Je le cherchais, ce bouton "fermer" x-x
    Merci !! :)
    Dragma
    Dragma
    MasculinAge : 23Messages : 65

    le Mer 13 Fév 2013 - 18:46

    Merci du tuto !

    Ryosaki
    Ryosaki
    MasculinAge : 26Messages : 109

    le Ven 15 Fév 2013 - 23:39

    Merci



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 2 Tutog
    Nawak
    Nawak
    FémininAge : 21Messages : 112

    le Mar 19 Fév 2013 - 0:52

    Merci beaucoup! *O*



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 2 Umbrel10
    Melan
    Melan
    FémininAge : 39Messages : 17

    le Mar 19 Fév 2013 - 22:41

    Merci !!!
    Melan
    Melan
    FémininAge : 39Messages : 17

    le Ven 22 Fév 2013 - 4:11

    Je reviens vers vous pour vous signaler que ce module comporte un bug sous Google Chrome:
    Lorsque l'on arrive en bas de son pavé de texte et que l'on fait une correction avec la touche retour arrière l'onglet apparait dans le bloc... voir image : https://i.servimg.com/u/f75/18/11/61/06/gogo10.jpg
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Avr 2019 - 4:17