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 : -35%
-35% TV OLED Evo 77” (195 cm) LG OLED77G4 ...
Voir le deal
2790 €

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

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

    Sam 24 Nov 2012 - 0:19


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

    Sam 24 Nov 2012 - 2:47

    Je ne savais pas que c'était possible sans JavaScript *-* Merci ! =)
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 24 Nov 2012 - 12:32

    Mais de rien x). Le "target" et moi on est bien copain maintenant Razz



    sign
    Chucky'
    Chucky'
    MasculinAge : 27Messages : 80

    Dim 25 Nov 2012 - 11:09

    merci



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) 1370524847-cooltext1062715975
    jey38830
    jey38830
    MasculinAge : 31Messages : 60

    Dim 25 Nov 2012 - 12:21

    Merci :)
    Kai Turindo
    Kai Turindo
    MasculinAge : 24Messages : 80

    Dim 25 Nov 2012 - 13:44

    Merci!
    A.Volk
    A.Volk
    FémininAge : 32Messages : 145

    Ven 30 Nov 2012 - 23:54

    Merci infiniment !
    C'est noël avant l'heure ! xD

    Edit : Juste une petite question : si l'on veut que l'onglet flottant se trouve à droite, on doit s'y prendre de quelle manière ? Est-ce seulement possible ? xD
    Arrogant Mischief
    Arrogant Mischief
    MasculinAge : 29Messages : 70

    Ven 30 Nov 2012 - 23:55

    Pile poil le code que je cherchais ! Merci !



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) Nu211
    Katsura
    Katsura
    MasculinAge : 40Messages : 190

    Lun 3 Déc 2012 - 17:01

    Merci Capitaine !
    Erza
    Erza
    FémininAge : 29Messages : 63

    Mar 4 Déc 2012 - 22:43

    Merci :33



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) 161
    "Un jour je serai la meilleure codeuse
    Je m’entraînerais sans répis
    Je ne serais jamais la Deu'z
    Et je raflerais tous les prix
    Je parcourrai la toile entiere
    Traquant avec espoir
    Le CSS et ses mystères
    Le secret de son pouvoir

    CODEPOWA !
    Je les saurais tous !
    Tsumei
    Tsumei
    MasculinAge : 34Messages : 116

    Mer 5 Déc 2012 - 16:27

    Merci !
    Cassis.7
    Cassis.7
    FémininAge : 28Messages : 19

    Ven 7 Déc 2012 - 14:22

    Merci ! (:



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) Fma10
    Alinoé
    Alinoé
    FémininAge : 32Messages : 35

    Dim 9 Déc 2012 - 19:37

    Merci ! Very Happy
    HeleneM
    HeleneM
    FémininAge : 31Messages : 195

    Mar 11 Déc 2012 - 20:24

    Merci
    Lolloe
    Lolloe
    FémininAge : 23Messages : 26

    Lun 17 Déc 2012 - 17:22

    Mercii
    Heine06
    Heine06
    FémininAge : 44Messages : 57

    Mar 18 Déc 2012 - 1:35

    Merci !!!
    GWOO
    GWOO
    MasculinAge : 29Messages : 31

    Mer 26 Déc 2012 - 18:11

    Merci
    Suzu-nee
    Suzu-nee
    FémininAge : 30Messages : 27

    Lun 31 Déc 2012 - 2:59

    Arigato, Sparrow-sama~



    signature supprimée car les liens externes sont interdits dans cette dernière, merci.
    bibi0712
    bibi0712
    FémininAge : 46Messages : 66

    Lun 31 Déc 2012 - 4:40

    Moi qui les ai toujours fait avec du javascript eh bien je veux bien voir comment faire sans ^^
    Merci
    Jigsaw.
    Jigsaw.
    FémininAge : 33Messages : 19

    Mar 1 Jan 2013 - 23:49

    merci du partage !
    Teseu
    Teseu
    MasculinAge : 29Messages : 54

    Sam 5 Jan 2013 - 5:24

    Merci beaucoup
    Soul
    Soul
    MasculinAge : 28Messages : 1723

    Sam 5 Jan 2013 - 8:51

    Yeeah Merci Very Happy
    Sarah W.
    Sarah W.
    FémininAge : 26Messages : 35

    Sam 5 Jan 2013 - 14:09

    Merci ♥
    alexee29
    alexee29
    FémininAge : 31Messages : 39

    Lun 7 Jan 2013 - 23:22

    Merci ^^!
    Neko Mimi
    Neko Mimi
    FémininAge : 34Messages : 165

    Ven 11 Jan 2013 - 15:42

    Merci =)



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


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