Bloc flottant latéral ouvrant "onclick" (javascript)

Sam 11 Jan 2014 - 5:11

Onyx

Age : 30Messages : 3350

Sam 11 Jan 2014 - 5:11

Rappel du premier message :

#html #css #javascript #jquery #position_fixe #transition #auteur_Onyx #toutes_les_versions

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

Bouh!

Autant j'aime bien le bloc flottant latéral ouvrant "onclick" (CSS avec target) d'Okhmhaka, autant je préfère passer par le javascript pour éviter d'avoir les "#target_onglet" dans ma barre d'adresse.

Du coup, j'ai laissé tombé l'idée d'utiliser le CSS3 pour ça et me voilà avec du javascript qui vous donnera le même résultat avec une méthode différente.

Sachant que tout le monde n'adore pas nécessairement faire du graphisme, vous avez l'option d'avoir un bouton pour ouvrir/fermer l'onglet fait avec des images ou avec du texte ^^

Je vous montre un petit exemple juste ici avec la méthode qui ne demande pas d'images.

Si le bouton est une image

Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :

Code:: <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Voici le code du bloc flottant que vous pouvez installer suite à cette balise :

Code:: <div id="ongleton"> <div class="ongleton_contenu"> Contenu du bloc </div> <img id="ongleton_ouvrir" src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" /> <img id="ongleton_fermer" src="http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png" style="display: none;" /> </div> <script type="text/javascript"> // </script>

Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
Puis, nous avons deux div, soit deux boutons.
La première image est le bouton pour ouvrir (id="ongleton_ouvrir").
La deuxième image est le bouton pour fermer (id="ongleton_fermer").
Enfin, nous avons le javascript qui fait fonctionner le tout.

Attention, dans le javascript, il faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :

Code:: $('#ongleton').css("left", "-212px");

Enfin, vous pourrez modifier à votre sauce le bloc flottant dans le CSS en y mettant le code suivant:

Code:: /*Bloc qui contient le bloc flottant et les boutons*/ #ongleton { position: fixed; height: 90%; /*Hauteur du bloc flottant*/ top: 5%; /*Espace du haut*/ left: -212px; z-index: 999; transition: 1s; -webkit-transition: 1s; } /*Bloc flottant*/ .ongleton_contenu { width: 200px; /*Largeur*/ height: 100%; padding: 5px; background-color: #1B2836; color: #9BB9D9; font-size: 13px; font-family: Time New Roman; border: 2px #6993BE solid; border-left: none; border-radius: 0 30px 30px 0; } /*Boutons Ouvrir et Fermer*/ #ongleton_ouvrir, #ongleton_fermer { position: absolute; top: 45%; left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/ z-index: 999; cursor: pointer; }

Voilà, votre bloc flottant est installé ^^

Si le bouton est un texte

Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :

Code:: <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Voici le code du bloc flottant que vous pouvez installer suite à cette balise :

Code:: <div id="ongleton"> <div class="ongleton_contenu"> Contenu du bloc </div> <div id="ongleton_ouvrir"> Ouvrir </div> <div id="ongleton_fermer" style="display: none;"> Fermer </div> </div> <script type="text/javascript"> // </script>

Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
Puis, nous avons deux div, soit deux boutons.
La première div est le bouton pour ouvrir (id="ongleton_ouvrir").
La deuxième div est le bouton pour fermer (id="ongleton_fermer").
Enfin, nous avons le javascript qui fait fonctionner le tout.

Attention, dans le javascript, il faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :

Code:: $('#ongleton').css("left", "-212px");

Enfin, vous pourrez modifier à votre sauce le bloc flottant et les boutons dans le CSS en y mettant le code suivant:

Code:: /*Bloc qui contient le bloc flottant et les boutons*/ #ongleton { position: fixed; height: 90%; /*Hauteur du bloc flottant*/ top: 5%; /*Espace du haut*/ left: -212px; z-index: 999; transition: 1s; -webkit-transition: 1s; } /*Bloc flottant*/ .ongleton_contenu { width: 200px; /*Largeur*/ height: 100%; padding: 5px; background-color: #1B2836; color: #9BB9D9; font-size: 13px; font-family: Time New Roman; border: 2px #6993BE solid; border-left: none; border-radius: 0 30px 30px 0; } /*Boutons Ouvrir et Fermer*/ #ongleton_ouvrir, #ongleton_fermer { position: absolute; top: 45%; left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/ z-index: 999; cursor: pointer; width: 100px; height: 20px; background-color: #1B2836; border: 2px solid #6993BE; border-bottom: none; text-align: center; color: #9BB9D9; padding: 5px; padding-top: 10px; border-radius: 30px 30px 0 0; margin-left: -42px; /*Pour coller le bouton contre le bloc flottant*/ -webkit-transform:rotate(90deg); /*Pour tourner le texte sur le côté (Chrome et Safari)*/ transform:rotate(90deg); /*Pour tourner le texte sur le côté*/ }