• Module ou menu 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. 

    Vous pouvez retrouver un aperçu sur mon blog Aoi Sora.

    I- Globalement c'est quoi ce truc ?

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

     

    II- Le code (pour 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-*/}

    Notes :

    1- Pour déplacer un menu, il vous suffit de changer le sélecteur #module_menunxxxx par #menu1 ou #menu2.

    2- Ceci est le code de base, 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;) et d'ajouter votre image.

    3- 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" dans mon exemple n'est pas du texte mais une image.

     #module_menuXXXXXX {
    backgroundurl('URL_IMAGE'no-repeat fixed x% x% ;}

    Valeurs à changer selon vos besoins.

     Le 1er pourcentage = valeur à l'horizontale.
     Le 2ème pourcentage = valeur à la verticale.

    Note : j'ai mis mes valeurs en % mais vous pouvez très bien les mettre en px (tout dépendra de la taille de votre module).

    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 a 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 2018 à 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
    4
    Jeudi 30 Mai 2019 à 22:20

    Super ! Je cherchais ce CSS en place, j'en suis presque tombée amoureuse ^^

    Juste, j'ai un problème avec ce CSS :

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

     

    C'est celui de ton article, on dit que le CSS n'est pas correcte et qu'on doit le modifier

    C'est à cause " URL DE L'IMAGE " ou autre chose ? 

    • Voir les réponses
    5
    Mardi 23 Juin 2020 à 02:09

    Coucou Kalyna,

    j'aurais aimé savoir si les valeurs pour l'étape "texte/image" sont les mêmes lorsque le module est à droite ou ? parce que je ne sais pas vraiment à quoi correspond les pourcentages à la fin du code. Et avec le code, je retrouve pas mon image xD

    Et comme j'ai mis un menu entier, quelle taille doit faire l'image du texte au juste ??

    Merci

    • Voir les réponses
    6
    Vendredi 13 Novembre 2020 à 22:30

    Salut Kalyna, merci énormément pour ce super tuto ! c:

    J'ai un tout petit problème, puis-je te déranger juste un peu ? x.x

    C'est par rapport à cette partie du code:
     #module_menuXXXXXX {
    backgroundurl('URL_IMAGE'no-repeat fixed x% x% ;}

    Quand j'ajoute l'image, elle deviens le fond de mon module, je me demande quoi mettre comme sélecteur dans #module_menuXXXXXX pour éviter ce problème :/

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


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :