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 :
Aliexpress : codes promo valables sur tout le site
Voir le deal
Le Deal du moment :
Xiaomi Mi Smart Camera 2K Standard Edition (design ...
Voir le deal
11.39 €

    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 7 JIoAHnh
    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 7 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
    Clarisse
    Clarisse
    FémininAge : 24Messages : 3960

    Sam 2 Nov 2013 - 10:25

    Merci pour le tuto. :)
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mer 6 Nov 2013 - 2:02

    Merci !!!
    Anonymous
    Invité

    Dim 10 Nov 2013 - 0:00

    ça va m'être utile pour les top ça.

    Merci.
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 31Messages : 153

    Jeu 14 Nov 2013 - 14:06

    Merci beaucoup^^
    aFlametGirl
    aFlametGirl
    FémininAge : 32Messages : 39

    Dim 17 Nov 2013 - 13:10

    Aaah ce que je cherchais ! *o*
    Merci beaucoup capitaine :)



    최민호
    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 7 452404tumblrln2t64RPtJ1qdn2tro15001
    Nadia oupsss
    Nadia oupsss
    FémininAge : 38Messages : 13

    Dim 17 Nov 2013 - 14:28

    merci
    tamanegeek
    tamanegeek
    MasculinAge : 24Messages : 167

    Dim 17 Nov 2013 - 19:22

    Merci !
    mathou_inu
    mathou_inu
    FémininAge : 28Messages : 55

    Mar 19 Nov 2013 - 13:44

    Merci !



    Moriarty
    Moriarty
    FémininAge : 28Messages : 85

    Dim 24 Nov 2013 - 16:11

    merci !
    Naïshy
    Naïshy
    FémininAge : 22Messages : 65

    Dim 24 Nov 2013 - 18:15

    Merci beaucouw :3
    Babiroussa
    Babiroussa
    MasculinAge : 34Messages : 33

    Lun 25 Nov 2013 - 12:33

    Merci capitaine Sparrow-style Wink 
    Namco
    Namco
    FémininAge : 31Messages : 118

    Sam 7 Déc 2013 - 14:28

    Hooo merci !
    mini-mimi
    mini-mimi
    FémininAge : 27Messages : 75

    Sam 14 Déc 2013 - 16:23

    merci (:
    Plume'
    Plume'
    FémininAge : 25Messages : 166

    Lun 16 Déc 2013 - 19:06

    Mici =)
    Venise
    Venise
    FémininAge : 40Messages : 270

    Lun 23 Déc 2013 - 19:40

    merci beaucoup capitaine
    ketchup
    ketchup
    FémininAge : 26Messages : 11

    Lun 23 Déc 2013 - 21:18

    merci beaucoup :bril:
    Lady Doll
    Lady Doll
    FémininAge : 35Messages : 101

    Sam 28 Déc 2013 - 16:30

    merci =)
    Doupi
    Doupi
    FémininAge : 35Messages : 63

    Dim 29 Déc 2013 - 14:23

    Intéressant, super merci !!
    Black Laugh
    Black Laugh
    FémininAge : 23Messages : 14

    Sam 4 Jan 2014 - 10:58

    Tank you ;3



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 7 Signa_11
    pixelman
    pixelman
    FémininAge : 43Messages : 241

    Mer 8 Jan 2014 - 13:52

    Merci un petit onglet de ce type est toujours pratique.




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 10 Jan 2014 - 4:36

    Je veux voir! Merci ^^



    Crazy-Sweet
    Crazy-Sweet
    FémininAge : 32Messages : 131

    Ven 10 Jan 2014 - 14:42

    Merci cher Pirate : D !




    Our ice hearts beat
    Voir le monde dans un grain de sable. Et le paradis dans une fleur sauvage. Tenir l'infini dans le creux de sa main. Et l'éternité dans une heure - SIR WILLIAM BLAKE

    Feather
    Feather
    FémininAge : 27Messages : 17

    Dim 12 Jan 2014 - 1:14

    Merci
    avatar
    Tony_Wayne
    MasculinAge : 33Messages : 45

    Dim 12 Jan 2014 - 18:35

    Merci beaucoup je cherchais depuis une heure enfin trouver :) !!!
    DixieM.
    DixieM.
    FémininAge : 32Messages : 49

    Ven 17 Jan 2014 - 12:05

    :love: Merciii o/
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:27