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 du moment : -13%
(Black Friday) PC portable Gamer- ERAZER Deputy P60i ...
Voir le deal
649.99 €

    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 16 JIoAHnh
    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 16 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
    Magico
    Magico
    MasculinAge : 32Messages : 41

    Lun 7 Mar 2016 - 7:42

    Merci
    Aki'
    Aki'
    FémininAge : 28Messages : 258

    Sam 12 Mar 2016 - 11:45

    Merci
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 56Messages : 167

    Sam 26 Mar 2016 - 1:21

    Merci
    Madness of Wonderland
    Madness of Wonderland
    FémininAge : 24Messages : 60

    Dim 3 Avr 2016 - 16:38

    merci
    Kai Parker
    Kai Parker
    FémininAge : 26Messages : 154

    Sam 30 Avr 2016 - 18:18

    Merci beaucoup *^*

    Isalia
    Isalia
    FémininAge : 25Messages : 125

    Mer 11 Mai 2016 - 23:09

    Merci *^*
    Alexielios
    Alexielios
    FémininAge : 33Messages : 62

    Sam 14 Mai 2016 - 12:53

    Merci :)



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 16 Slytherin-House-member

    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 16 Tales-of-Phantasia-Fan
    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 16 Suikoden%2BII%2BFan
    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 16 Star-Wars-Fan
    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 16 Dominion%2BFan

    "People live their lives bound by what they accept as correct and true. That's how they define reality.
    But what does it mean to be correct or true?"
    Sighild
    Sighild
    FémininAge : 37Messages : 225

    Sam 14 Mai 2016 - 18:34

    Merci beaucoup! Ce sera très utile!
    Sweetdead
    Sweetdead
    FémininAge : 29Messages : 38

    Dim 15 Mai 2016 - 23:03

    Parfait, merci beaucoup ♥
    Aoko
    Aoko
    FémininAge : 30Messages : 38

    Lun 23 Mai 2016 - 0:46

    Merci beaucoup! Très pratique pour y mettre des choses importantes! Very Happy
    M.O
    M.O
    MasculinAge : 34Messages : 51

    Mar 24 Mai 2016 - 3:43

    Merci!
    avatar
    Hop80
    MasculinAge : 35Messages : 138

    Lun 6 Juin 2016 - 0:54

    Très sympa, je veut bien jeter un œil merci.
    Tinkky
    Tinkky
    FémininAge : 34Messages : 104

    Lun 6 Juin 2016 - 20:05

    Merci du partage ^_^
    Tink ♥
    Tink ♥
    FémininAge : 32Messages : 66

    Mer 15 Juin 2016 - 19:26

    Hey je pensais qu'on pouvait faire ça qu'avec la CB merci c'est génial Very Happy
    Kingdom.
    Kingdom.
    FémininAge : 25Messages : 54

    Lun 4 Juil 2016 - 21:37

    merci !
    Kaipy
    Kaipy
    FémininAge : 29Messages : 36

    Mar 5 Juil 2016 - 22:15

    Merci !!!
    Asarigolo
    Asarigolo
    MasculinAge : 31Messages : 29

    Mer 13 Juil 2016 - 9:58

    Thanks ♥
    Sorako
    Sorako
    FémininAge : 27Messages : 94

    Mer 13 Juil 2016 - 15:45

    Merci ^^
    Banshee Quinn
    Banshee Quinn
    FémininAge : 26Messages : 23

    Sam 16 Juil 2016 - 5:01

    Merci ♥
    Vixinte
    Vixinte
    FémininAge : 26Messages : 90

    Dim 17 Juil 2016 - 19:08

    MERCI !
    coconut groove
    coconut groove
    FémininAge : 37Messages : 112

    Mer 20 Juil 2016 - 18:56

    Hiiiiii! Merci. *.*
    Skylighty
    Skylighty
    FémininAge : 94Messages : 100

    Dim 24 Juil 2016 - 5:20

    MERCI
    ShiShi_Chan
    ShiShi_Chan
    MasculinAge : 35Messages : 51

    Jeu 28 Juil 2016 - 12:41

    Merki :o
    FROSTendoloris
    FROSTendoloris
    FémininAge : 31Messages : 206

    Jeu 4 Aoû 2016 - 14:36

    Merci du partage, je vais aller tester ça Very Happy



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 16 3oov
    Djeina
    Djeina
    FémininAge : 28Messages : 233

    Ven 12 Aoû 2016 - 6:26

    Merci du partage ^^
    Contenu sponsorisé


      La date/heure actuelle est Lun 2 Déc 2024 - 11:50