• Module 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. (fonctionne également pour n'importe quel module, ou même tout un menu) Autre exemple, mon menu ici.

     

    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 (ou menu) de sorte qu'il soit invisible/hors de votre page, donc de le cacher avec une position négative (ex: left: -250px;), puis de le rendre visible au survol avec une valeur positive (left: 5px). 

     

    II- Le code (pour module.)

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

    2. Code de base du module caché :

    #module_menuXXXXXX /*- selecteur avec 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 depuis le haut-*/
      left-Xpx; /*-position gauche négative, mettre "right" si votre module est à droite.-*/
     transition1s /*-transition, temps que prend le module à se fermer-*/}

     Notes :

    1- Pour déplacer un menu, il vous suffit de changer le sélecteur #module_menuxxxx par #menu1 ou #menu2. (En fait, vous pouvez déplacer tout ce que vous voulez )

    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 pour faire de la place (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é gauche-*/
      heightauto/*- taille automatique-*/
      transition0.6s/*-transition, temps que prend le module à s’ouvrir-*/
      }

     

    4. Attention.

    Il est possible 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 votre module au premier plan. 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.

      backgroundurl(urlmotshootboxno-repeat 100% 50%,
      url(urlfondrepeat 0% 0%;

    → Valeurs à changer selon vos besoins.

     Le 1er pourcentage = valeur à l'horizontale.
     Le 2ᵉ 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 !


    Tags Tags : , ,
  • 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 ? 

      • Jeudi 30 Mai 2019 à 23:10

        Je ne l'ai pas précisé mais ce n'est pas un sélecteur, c'est pour ça qu'il n'y a pas de # devant background. Il suffit d'ajouter le code dans ton sélecteur #module_menuXXX.

        J'ai édité l'article pour que ce soit plus clair.

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

      • Vendredi 31 Mai 2019 à 10:16

        Ah d'accord

        Super, merci beaucoup de ta réponse ^^

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    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

    Vous devez être connecté pour commenter