Module coulissant sur le côté -

Module coulissant sur le côté
Par Kalyna dans Codages & Tutos le 19 Septembre 2017 à 19:18
►

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-*/
width: Xpx; /*-largeur de votre module-*/
height: Xpx; /*-Hauteur de votre module-*/
  position: fixed; /*-permet de fixer votre module, si vous descendez la page, le module ne bougera pas.-*/
  top: Xpx; /*-position de votre module depuis le haut-*/
  left: -Xpx; /*-position gauche négative, 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_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{
  left: 0%; /*-position 0%, votre module sera collé au bord du côté gauche-*/
  height: auto; /*- taille automatique-*/
  transition: 0.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-index: 1;" à 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.
```
  background: url(urlmotshootbox) no-repeat 100% 50%,
  url(urlfond) repeat 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 : module, module coulissant, menu coulissant
Commentaires
1

Rioko Sakura

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 ;)

Répondre

Voir les réponses

Kalyna

Mardi 10 Octobre 2017 à 23:47

Salut !

Comme dit dans le point 5, il s'agit d'une image ;)

De rien :)

Rioko Sakura

Mardi 10 Octobre 2017 à 23:52

Ah mince, j'ai lu trop vite et j'ai pas fait attention désolé xD

Kalyna

Mercredi 11 Octobre 2017 à 00:19

Pas grave xD
2

Rioko Sakura

Dimanche 15 Octobre 2017 à 00:50
Comment on utilise les paramètres "z-index: 1" dans le code ?
Répondre

Voir les réponses

Kalyna

Dimanche 15 Octobre 2017 à 07:57

La propriété: z-index: 1 = plus le chiffre est élevé plus il se met au premier plan. Si par exemple tu mets z-index: 2 a ton module "Derniers visiteurs" et z-index: 1 a la shoutbox c'est les derniers visiteurs qui seront devant si jamais ils se superposent. (c'était ça la question ? ^^)

Rioko Sakura

Dimanche 15 Octobre 2017 à 11:30

Non c'était pas la question mais je me suis mal exprimée... je ne sais pas quoi faire avec cette propriété ? Je mets juste Z-index : 1 dans le code CSS ou je dois la mettre avec d'autres "mots" ?

Kalyna

Dimanche 15 Octobre 2017 à 11:47

Tu l'ajoute juste dans tes deux codes.

Rioko Sakura

Dimanche 15 Octobre 2017 à 13:30

Oui mais où ? xD (on va s'en sortir)

Par exemple dans ce code :

#module_menuxxxxxx:hover{
  left: 0%; /*-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-*/
  }

Je le mets où ? Après "menuxxxx" ? Avant "{" ?

Kalyna

Dimanche 15 Octobre 2017 à 13:31

Bah non c'est une propriété donc comme toutes les propriétés tu le mets entre {} ^^

#module_menuxxxxxx:hover{z-index : 1;
  left: 0%;  /*-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-*/
  }

Rioko Sakura

Dimanche 15 Octobre 2017 à 13:37

Merci !! ;)

On a fini par se comprendre x)

Kalyna

Dimanche 15 Octobre 2017 à 13:39

Oui ! Mdr
3

xYuki-chan

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 ;)
Répondre

Voir les réponses

Kalyna

Jeudi 22 Mars 2018 à 11:35

Salut !

De rien :)

Il s'agit d'une boîte déroulante, Papasti a fait un tuto sur son blog, voilà le lien.

xYuki-chan

Jeudi 22 Mars 2018 à 11:36

OHHH, c'est magique !! Merci beaucoup !! ^^

Kalyna

Jeudi 22 Mars 2018 à 11:37

De rien ! ^^
4

Miss.Seolhwa

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 :

#background: url('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 ?
Répondre

Voir les réponses

Kalyna

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 {
background: url('URL_IMAGE') no-repeat fixed 98% 50% ;}

Miss.Seolhwa

Vendredi 31 Mai 2019 à 10:16

Ah d'accord

Super, merci beaucoup de ta réponse ^^
5

xYuki-chan

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
Répondre

Kalyna

Mardi 23 Juin 2020 à 15:46

Coucou,

Hum, du coup ton image doit être à gauche du module si je ne me trompe pas ? Dans ce cas non, il faut changer.

Le premier pourcentage correspond à la position à la horizontale, et le deuxième à la verticale. Dans ton cas, ce doit être l'inverse de moi. 0% à l'horizontale.

xYuki-chan

Mardi 23 Juin 2020 à 16:12

Re,

Oui c'est ça, j'ai changé comme tu as dit je le vois toujours pas rip

Est-ce qu'on doit cacher le module totalement ? Je veux dire l'image se trouve dans le background du module si j'ai bien compris, du coup j'arrive à le voir lorsque j'édite mais ça ne s'affiche pas sur le site

Kalyna

Mardi 23 Juin 2020 à 17:05

Mince. Personnellement j'ajoute une bonne marge interne (padding) sur le côté et je cache le reste.

Sinon, tu peux copier/coller ton code ici, je peux y jeter un oeil si tu veux ;)

xYuki-chan

Mercredi 24 Juin 2020 à 00:14

Oui, je me disais bien que t'avais dû rajouter quelque chose comme ça, c'est le même système pour "déplacer un module".

#menu1 { /*-N° de votre module-*/
width: 300px; /*-largeur de votre module-*/
  height: 500px;  /*-Hauteur de votre module-*/
  position: fixed; /*-permet de fixer votre module, si vous descendez la page, le module ne bougera pas.-*/
  top: 20px; /*-position de votre module-*/
  right: -290px; /*-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-*/}

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

  #menu1 {
background: url('http://ekladata.com/YMqZ94uOaXkUE1JQUXaMNjnQCOs.png') no-repeat fixed 0% 98%;z-index: 3; ;}

Le background est provisoire c'est juste pour tester .6. As-tu une taille d'image à me conseiller ?

Kalyna

Mercredi 24 Juin 2020 à 00:52

Je n'ai pas eu a faire grand chose en fait. Pour moi, l'image "nous suivre" s'affiche bien maintenant :

#menu1 {
  width: 300px; /*-largeur de votre module-*/
  height: 500px;  /*-Hauteur de votre module-*/
  position: fixed;
  top: 20px;
  right: -320px;
  padding-left: 75px;
  background: url(http://ekladata.com/YMqZ94uOaXkUE1JQUXaMNjnQCOs.png) no-repeat 0% 50%;
transition:1s;  /*-transition, temps que prend le module à se fermer-*/
   z-index: 1;
}

  #menu1:hover{
  right: 0%;
  height:auto; /*- taille automatique-*/
  transition:2s;
  z-index: 2;}

Pour l'image, euh bah je suppose que ça dépend de ce que tu veux et de ton thème ? Perso c'est toujours assez discret. Comme sur mon ancien blog → là.

xYuki-chan

Mercredi 24 Juin 2020 à 01:15

Ohhhhhh, c'est génial merci <3 Je l'avais déjà mis en 50% en plus c'est bizarre .-et il me manquait la marge du coup hmmm je vois.

J'aime également l'idée que ce soit discret, donc je vais faire pareil je pense

Pour le fond de l'image, il faut que l'image elle-même ait une couleur de fond ? ou ça va avec la couleur du background du module ?

Kalyna

Mercredi 24 Juin 2020 à 01:20

De rien :)

Pas froncement, si tu laisses transparent ça prendra normalement le fond de ton menu. Donc, c'est comme tu veux.

xYuki-chan

Mercredi 24 Juin 2020 à 01:39

D'acc merci beaucoup en tout cas <3

Mais j'ai un autre problème maintenant .-. C'est plus du tout avec ce code, mais c'est juste mon menu d'en-tête qui ne s'affiche pas très bien avec les sous-menus...

Les sous-menus ne se trouve pas en dessous du titre du menu déroulant mais à gauche et ça m'a jamais fait ça pourrais-tu m'aider ? ^^" Je le veux en dessous du titre du menu déroulant mais il se trouve à gauche pour je ne sais quelle raison .-.

Kalyna

Mercredi 24 Juin 2020 à 01:44

Dit comme ça je vois pas trop. Il faudrait que je puisse voir le problème et surtout le code css... Le mieux serait que je vois le blog, si bien sûr tu peux me donner la permission.

xYuki-chan

Mercredi 24 Juin 2020 à 14:47

Oui, je sais xD Je vais te donner la permissions alors : http://kawaiidokidokiscantrad.ek.la

Je t'ai mis administrateur comme ça tu peux tout voir

Kalyna

Mercredi 24 Juin 2020 à 18:25

Ok merci, je vais y jeter un oeil.

Kalyna

Mercredi 24 Juin 2020 à 18:34

Normalement, le problème est réglé ;)

xYuki-chan

Mercredi 24 Juin 2020 à 20:40

OHHH, merci beaucoup c'est fantastique <3 Tu sais où est-ce que ça allait pas alors ? ^^" xD

Kalyna

Mercredi 24 Juin 2020 à 21:59

De rien :D Il manquait le codage pour le sous-menu (ul#menu ul et ul#menu ul a) et il fallait définir une taille pour les onglets (accueil, projets, recrutement etc.)

xYuki-chan

Jeudi 25 Juin 2020 à 02:28

Ahhhhhhhhhh, c'était si simple xD Merci encore <3 Je reviens si j'ai un autre problème >.>

Kalyna

Jeudi 25 Juin 2020 à 21:29

De rien. OK, aucun soucis ;)

Nom / Pseudo :

E-mail (facultatif) :

Site Web (facultatif) :

Commentaire :

Me prévenir par mail en cas de réponse
6

Sweet_Keur

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 {
background: url('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 :/
Répondre

Voir les réponses

Kalyna

Samedi 14 Novembre 2020 à 07:01

Salut !

peux-tu me donner ton code et le lien de ton image stp ? que je puisse y jeter un œil ;)

Sweet_Keur

Samedi 14 Novembre 2020 à 16:20

Merci beaucoup de ta considération ^^

C'est un calendrier que je veut plaçer :)

Voilà le premier code basé sur la première partie de code:

#module_menu_contenu168757076 {background: white;
padding: 10px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
width: 200px; position: fixed;
top: 280px; right: -200px; transition: 1s; z-index: 1;}

Voilà le code pour l'image:

.module_menu_contenu {
background-image: url('https://zupimages.net/up/20/46/pzxl.png')
no-repeat fixed 5% 5%;}

Et voila l'image :

https://zupimages.net/up/20/46/pzxl.png

Kalyna

Samedi 14 Novembre 2020 à 18:13

De rien ;)

Il faut mettre l'image dans le premier code. Normalement avec les corrections c'est bon.

#module_menu156014898 {
  background: url(https://www.zupimages.net/up/20/46/pzxl.png) no-repeat 0% 50% white;
  padding-left: 30px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  width: 200px;
  position: fixed;
  top: 280px;
  right: -200px;
  transition: 1s;
  z-index: 1;
}

Kalyna

Samedi 14 Novembre 2020 à 18:18

oups, pour le numéro de module pense à le changer, j'ai mis le miens pour le test.
Suivre le flux RSS des commentaires

Vous devez être connecté pour commenter