• Module/Shoutbox coulissant sur le côté

    Module/Shoutbox coulissant ►  Module/Shoutbox coulissant

    Comme beaucoup m'ont demandé comment j'ai fait pour faire coulisser ma shoutbox, je me suis dit autant faire un tuto. (le code fonctionne pour n'importe quel module ou même le menu entier)

     

    Note: J'ai utilisé un code qui était sur mon ancien blog "Kaly no sekai" et je ne me souviens plus du tout où j'avais eu ce code (ça date de plusieurs années ^^), dans tous les cas ici je vais vous expliquer comment faire, pour les débutants, rassurez-vous c'est ultra-simple. 

     

    I- Globalement c'est quoi ce truc ?

    Pour les débutants ça peut paraître compliquer alors que pas du tout ! En fait, il suffit juste de déplacer son module (ou menu), puis de le cacher avec une position négative (ex: left: -250px;) et de le rendre visible au survol avec une valeur positive (left: 5px). Oui, c'est tout bête.

     

    II- Le code (pour shoutbox ou autre module.)

    1. Trouver le numéro de votre module. Tuto ici.

    2. Code de base du module caché:

    #module_menuXXXXXX /*-N° de votre module-*/

      widthXpx/*-largeur de votre module-*/
     
    height: Xpx;  /*-Hauteur de votre module-*/

      positionfixed; /*-permet de fixer votre module, si vous descendez la page, le module ne bougera pas.-*/
      topXpx; /*-position de votre module-*/
      left: -Xpx; /*-position négative depuis la gauche de votre module, mettre "right" si votre module est à droite.-*/
     transition:1s;  /*-transition, temps que prend le module à se fermer-*/}

    Ceci est le code de base, après vous pouvez le personnaliser (ombre, fond, bordures, transition etc), si comme moi vous souhaitez mettre un mot sur le côté ou en haut, il vous suffit d'ajouter une marge interne (padding-right: 20px;).

    Aussi, ne cachez pas tout le module, pensez à laisser un petit bout apparent pour qu'on puisse passer la sourit dessus. ;)

     

    3. Le module au survol (ouvert)

    #module_menuxxxxxx:hover{
      left0%;  /*-position, 0% votre module sera collé au bord du côté-*/
      height:auto/*- taille automatique-*/
      transition:0.6s/*-transition, temps que prend le module à s’ouvrir-*/
      }

     

    4. Attention.

    Il se peut que votre module soit "traversé" par vos articles, en gros vos articles seront devant votre module ce qui le rendra illisible. Ajouter la propriété "z-index1;" à vos codes, ça permettra de mettre en avant (1er plan) votre module. Plus le chiffre est élevé, plus il se met au premier plan.

     

    5. Texte/image

    Le mot "Shoutbox" (ou "Voir le menu" sur mon autre blog) n'est pas du texte mais une image.

     backgroundurl('URL_IMAGE'no-repeat fixed 98% 50% 

     

    6. Même chose pour le menu

     Si vous ne souhaitez pas déplacer un module mais tout un menu (#menu1) le code est le même, il suffit juste de modifier le sélecteur. Attention cependant au ne pas avoir un menu trop long ! Exemple ici.


  • Commentaires

    1
    Mardi 10 Octobre 2017 à 23:34

    Hey salut !! Merci pour les codes c'est très utile et intéressant.

    Mais dis-moi comment tu fait pour mettre un petit moi comme avec le "voir le menu" ?!

    Voilà... encore merci ;)

     

    • Voir les réponses
    2
    Dimanche 15 Octobre 2017 à 00:50
    Comment on utilise les paramètres "z-index: 1" dans le code ?
    • Voir les réponses
    3
    Jeudi 22 Mars à 11:27

    Hello !!

    Topisime ce code !! Merci ;)

    J'aurais aimé savoir comment fais-tu, quel code as-tu pour ton autre blog sur le menu coulissant tout en bas quand on passe sur "Y'a quoi sur le blog" il y a des choses qui s'affichent ?

    Merci ;)

    • Voir les réponses
    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :