-
Module coulissant sur le côté
►
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
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 ;)
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 ?
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
-
Mardi 23 Juin 2020 à 15:46
-
Mardi 23 Juin 2020 à 16:12
-
Mardi 23 Juin 2020 à 17:05
-
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 ?
-
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à.
-
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 ?
-
Mercredi 24 Juin 2020 à 01:20
-
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 .-.
-
Mercredi 24 Juin 2020 à 01:44
-
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
-
Mercredi 24 Juin 2020 à 18:25
-
Mercredi 24 Juin 2020 à 18:34
-
Mercredi 24 Juin 2020 à 20:40
-
Mercredi 24 Juin 2020 à 21:59
-
Jeudi 25 Juin 2020 à 02:28
-
Jeudi 25 Juin 2020 à 21:29
-
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 :/
Vous devez être connecté pour commenter
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 ;)
Salut !
Comme dit dans le point 5, il s'agit d'une image ;)
De rien :)
Ah mince, j'ai lu trop vite et j'ai pas fait attention désolé xD
Pas grave xD