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.

-17%
Le deal à ne pas rater :
Casque de réalité virtuelle Meta Quest 2 128 Go Blanc (+29,99€ ...
249.99 € 299.99 €
Voir le deal
Le Deal du moment :
Fnac : 2 Funko Pop achetées : le 3ème ...
Voir le deal

    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 9 JIoAHnh
    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 9 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
    avatar
    Njut
    FémininAge : 23Messages : 43

    Sam 8 Mar 2014 - 12:01

    Depuis le temps que je cherchais ça ! :)
    SvenO
    SvenO
    MasculinAge : 30Messages : 78

    Sam 8 Mar 2014 - 19:58

    Merci !



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 9 703037Bann
    Kibara
    Kibara
    FémininAge : 24Messages : 8

    Dim 9 Mar 2014 - 12:17

    Merciiii !
    Gossip Coco
    Gossip Coco
    FémininAge : 41Messages : 7

    Mar 11 Mar 2014 - 10:01

    Super! Merci pour le tuto!
    avatar
    Lyly
    FémininAge : 32Messages : 18

    Mar 11 Mar 2014 - 10:14

    Merci ! *o*
    Je ne savais pas que c'était possible sans Javascript, tu me sauve la vie :)
    Shiney
    Shiney
    FémininAge : 26Messages : 26

    Mar 11 Mar 2014 - 17:37

    Merci !
    Presley♥Cash
    Presley♥Cash
    FémininAge : 32Messages : 80

    Mer 12 Mar 2014 - 22:43

    Vraiment génial ♥
    Merci :)
    Noruenu
    Noruenu
    FémininAge : 31Messages : 123

    Dim 16 Mar 2014 - 23:52

      Merci ! :3
    Tyra'
    Tyra'
    MasculinAge : 28Messages : 87

    Mer 19 Mar 2014 - 1:56

    Merci



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 9 Sans_t11
    Alonely
    Alonely
    MasculinAge : 29Messages : 43

    Mer 19 Mar 2014 - 14:32

    Merci
    Banpaia
    Banpaia
    FémininAge : 26Messages : 130

    Jeu 20 Mar 2014 - 19:14

    Merci !
    Percylove
    Percylove
    FémininAge : 28Messages : 259

    Sam 22 Mar 2014 - 5:09

    Merci beaucoup!



    Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Page 9 9a6v
    Kannone
    Kannone
    FémininAge : 27Messages : 25

    Sam 22 Mar 2014 - 11:28

    Merci beaucoup :3
    avatar
    Gedomaru
    FémininAge : 26Messages : 70

    Dim 23 Mar 2014 - 20:22

    Merci!
    Jacoon
    Jacoon
    FémininAge : 27Messages : 147

    Dim 23 Mar 2014 - 21:44

    Merci.
    nuanciel
    nuanciel
    FémininAge : 32Messages : 139

    Lun 24 Mar 2014 - 13:52

    merci beaucoup !!
    Ilfasidrel
    Ilfasidrel
    FémininAge : 25Messages : 36

    Mar 25 Mar 2014 - 18:17

    merci!
    Layla4
    Layla4
    FémininAge : 24Messages : 149

    Mar 25 Mar 2014 - 18:49

    Merci !
    Aoi Kiseki
    Aoi Kiseki
    FémininAge : 32Messages : 105

    Ven 28 Mar 2014 - 4:27

    merciii
    M.T
    M.T
    FémininAge : 34Messages : 53

    Ven 28 Mar 2014 - 16:35

    Merci beaucoup !
    avatar
    Nal Souclade
    MasculinAge : 25Messages : 167

    Sam 29 Mar 2014 - 11:09

    Merci beaucoup cap'tain !
    Irony
    Irony
    FémininAge : 26Messages : 102

    Jeu 17 Avr 2014 - 9:48

    Merci ! ^^
    Anonymous
    Invité

    Mar 22 Avr 2014 - 14:02

    Merci beaucoup ! :)
    Lou'
    Lou'
    FémininAge : 34Messages : 99

    Jeu 24 Avr 2014 - 14:47

    Un moyen de palier au bug du survol :love: 
    Merci Cap'taine  :hug: 
    avatar
    Puchlu
    MasculinAge : 35Messages : 98

    Sam 26 Avr 2014 - 21:25

    Un grand merci. :)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 10:30