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 4 JIoAHnh
    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 4 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 4 Unchai10
    kitel
    kitel
    MasculinAge : 23Messages : 42

    le Dim 21 Avr 2013 - 10:12

    Bon tutoriel!!
    HeartLessB
    HeartLessB
    FémininAge : 20Messages : 78

    le Ven 26 Avr 2013 - 13:36

    Je veux voir
    Samluna
    Samluna
    FémininAge : 20Messages : 96

    le Dim 28 Avr 2013 - 19:23

    Wow ! Ca fait stylé *O* Merci !




    Priez pour Paris. Priez pour la liberté.
    Priez pour Paris. Priez pour l'égalité.
    Priez pour Paris. Pour la fraternité.

    #Pray for Paris
    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 4 Tumblr_n4vso3dRJP1qf9mevo1_500
    servity
    servity
    MasculinAge : 47Messages : 82

    le Lun 29 Avr 2013 - 11:18

    merci pour ce tutoriel



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 4 HadqjCkktw
    Azylis
    Azylis
    FémininAge : 27Messages : 115

    le Mer 1 Mai 2013 - 0:38

    Merci beaucoup ! Je sens que ça va être "utilisation immédiate" ! Razz



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 4 Pokamo10
    K'Aya
    K'Aya
    FémininAge : 20Messages : 427

    le Jeu 2 Mai 2013 - 17:48

      Merci Wink
    Valhalla
    Valhalla
    MasculinAge : 28Messages : 105

    le Dim 5 Mai 2013 - 17:27

    Merci
    Nithz
    Nithz
    MasculinAge : 27Messages : 32

    le Jeu 9 Mai 2013 - 11:14

    merci



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 4 Signat10
    immortel
    immortel
    MasculinAge : 24Messages : 31

    le Jeu 9 Mai 2013 - 20:05

    merci
    Amasis
    Amasis
    FémininAge : 46Messages : 307

    le Sam 11 Mai 2013 - 15:43

    Ca fait des plombes que je cherche un tuto pour remplacer les immondes widgets de FA! ham3
    Merci beaucoup!!
    Max Rénix
    Max Rénix
    MasculinAge : 24Messages : 56

    le Dim 12 Mai 2013 - 22:20

    merci
    Geci
    Geci
    FémininAge : 27Messages : 68

    le Lun 13 Mai 2013 - 21:56

    merci ^^



    Nalih
    Nalih
    FémininAge : 21Messages : 91

    le Mar 14 Mai 2013 - 20:29

    Merci ! :)
    defenrir
    defenrir
    MasculinAge : 36Messages : 76

    le Sam 18 Mai 2013 - 13:35

    merchi o/
    Crucible
    Crucible
    FémininAge : 29Messages : 36

    le Mar 21 Mai 2013 - 17:30

    Merci beaucoup pour ce tutoriel, extrêmement pratique !



    « ONCE, I DUG A PIT AND FILLED IT WITH CLOUDS. OR WAS IT CLOWNS ?
    DOESN'T MATTER. IT DIDN'T SLOW HIM DOWN.
    TO BE HONEST, IT WASN'T THE BEST IDEA.
    AND IT REALLY BEGAN TO SMELL. MUST HAVE BEEN CLOWNS.
    CLOUDS DON'T SMELL BAD. THEY TASTE OF BUTTER ! AND TEARS.
    »
    la-loca
    la-loca
    FémininAge : 26Messages : 86

    le Dim 26 Mai 2013 - 12:20

    Merci!!!



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 4 13031910
    Bridgess
    Bridgess
    FémininAge : 20Messages : 59

    le Dim 26 Mai 2013 - 12:26

    Merci ^^ C'est plus pratique avec :)
    Laluna
    Laluna
    FémininAge : 25Messages : 74

    le Jeu 30 Mai 2013 - 3:00

    Merciiii ! :3
    Noukii
    Noukii
    MasculinAge : 18Messages : 31

    le Ven 31 Mai 2013 - 19:00

    Merci !
    Sarius
    Sarius
    MasculinAge : 28Messages : 22

    le Lun 3 Juin 2013 - 19:37

    Merci juste ce que je cherchais.
    Fallen Swallow
    Fallen Swallow
    FémininAge : 26Messages : 46

    le Mar 4 Juin 2013 - 19:12

    Merci !
    Zaidko
    Zaidko
    FémininAge : 16Messages : 81

    le Mer 5 Juin 2013 - 11:11

    Merci Beaucoup ! Je cherchas un bon tuto dessus <3
    Ambre
    Ambre
    FémininAge : 26Messages : 62

    le Jeu 6 Juin 2013 - 17:26

    Merci :)



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 4 Ban310
    WizzyFree
    WizzyFree
    MasculinAge : 25Messages : 2004

    le Ven 7 Juin 2013 - 19:44

    Merci



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 4 828103KidInk
    Dellou
    Dellou
    FémininAge : 21Messages : 57

    le Dim 9 Juin 2013 - 13:20

    Merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Mer 19 Juin 2019 - 9:05