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)

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 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 :




    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



    avatar
    sunn-day
    MasculinAge : 22Messages : 38

    le Lun 24 Aoû 2015 - 0:59

    Wouahh merci !!
    avatar
    EOS
    MasculinAge : 24Messages : 34

    le Ven 28 Aoû 2015 - 13:26

    Merci
    avatar
    James K. Lindley
    MasculinAge : 26Messages : 45

    le Sam 5 Sep 2015 - 16:06

    Merci du partage
    avatar
    Dreamyland
    FémininAge : 20Messages : 87

    le Dim 6 Sep 2015 - 6:02

    Merciiii
    avatar
    TiGraou
    MasculinAge : 24Messages : 224

    le Lun 7 Sep 2015 - 14:19

    Merci
    avatar
    Lindaóma
    FémininAge : 19Messages : 150

    le Sam 12 Sep 2015 - 11:56

    Merci beaucoup !



    avatar
    Soupy
    FémininAge : 22Messages : 23

    le Dim 20 Sep 2015 - 18:20

    Merci énormément, pile ce que je cherchais !
    avatar
    Shaolan
    MasculinAge : 26Messages : 104

    le Ven 2 Oct 2015 - 10:09

    Merci
    Nardco
    MasculinAge : 56Messages : 51

    le Dim 11 Oct 2015 - 3:33

    Merci
    avatar
    Lessien
    FémininAge : 35Messages : 161

    le Dim 18 Oct 2015 - 18:27

    Merci :)
    avatar
    Fantôma
    MasculinAge : 15Messages : 67

    le Sam 24 Oct 2015 - 15:47

    Merciiiii ♥



    avatar
    Lilynufare
    FémininAge : 26Messages : 321

    le Sam 31 Oct 2015 - 23:18

    sympa merci :)
    avatar
    Utauko
    FémininAge : 20Messages : 42

    le Jeu 19 Nov 2015 - 18:30

    C'est génial **
    Pile ce qu'il me fallait !
    Merci, merci merci !
    avatar
    Grande
    FémininAge : 29Messages : 206

    le Sam 5 Déc 2015 - 13:42

    Merci =D



    avatar
    Akiro
    FémininAge : 24Messages : 54

    le Mar 29 Déc 2015 - 18:01

    Merci beaucoup d'avoir partager, ce code est vraiment sympathique et facilement personnalisable! Razz
    avatar
    LouetRinkin
    MasculinAge : 27Messages : 62

    le Mer 30 Déc 2015 - 9:24

    Merci.
    avatar
    Devil.
    FémininAge : 20Messages : 58

    le Mer 13 Jan 2016 - 20:54

    Un grand merci !
    avatar
    Voltino
    MasculinAge : 23Messages : 55

    le Sam 16 Jan 2016 - 1:48

    Merci
    avatar
    Illiana
    FémininAge : 21Messages : 97

    le Mer 20 Jan 2016 - 14:32

    Sanku !



    avatar
    Nartiifiice
    FémininAge : 19Messages : 88

    le Jeu 28 Jan 2016 - 21:18

    thanks
    avatar
    LyN[ss]
    FémininAge : 25Messages : 105

    le Sam 27 Fév 2016 - 18:16

    Merci pour le partage =)
    avatar
    Amu
    FémininAge : 20Messages : 16

    le Mer 2 Mar 2016 - 18:05

    Merci beaucouuuup ! o/






    Itsumo doori no aru hi no koto, Kimi wa totsuzen tachiagari itta, Konya hoshi wo mi ni yukou. 
    dusty scarecrow.
    avatar
    Min@
    FémininAge : 29Messages : 32

    le Sam 5 Mar 2016 - 15:04

    Merci
    avatar
    Frosty Blue
    FémininAge : 21Messages : 161

    le Dim 6 Mar 2016 - 9:22

    Merci ^^
    avatar
    Magico
    MasculinAge : 25Messages : 41

    le Lun 7 Mar 2016 - 7:42

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Sam 21 Oct 2017 - 1:35