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 !

Retour à l'accueil