• Modul liens NAVIGATION ▼
  • Accueil
  • Contact
• Module de liens ▼ ▼ ▼
  • Rubrique d'articles 1
  • Rubrique d'articles 2
  • Rubrique d'articles 3
  • Rubrique d'articles 4
  • Rubrique d'articles 5
• Derniers articles ▼ ▼ ▼
  • Article 3-0
  • Article 1-1
  • Article 2-1
  • Article 2-0
  • Article 1-0
• Newsletter
  
  
• Rechercher
  
  
•  
  Statistiques
  Visiteurs depuis le 07/04/2015 :
  Connectés : 1
  Record de connectés : 1

 Afin de réduire la hauteur de votre menu latéral, il s'agit de cacher le contenu de chaque module de menu et au passge de la souris sur le titre du module, le contenu se déroule.

Une fois le menu latéral constitué avec les outils de l'interface eklablog ( /!\ ici, le menu sur la gauche de l'article est factice, pour vous montrer le rendu mais les liens ne mènent nulle part !), 

A - clic droit souris sur le titre d'un module:
Pour exemple ici, clic sur "module de liens".

Dans la fenêtre -de dialogue du navigateur- qui s'ouvre, clic sur "examiner l'élément".
Dans le bas de la page, s'affiche sur fond blanc le code html de la page avec la ligne concernant le module en sélectionné/surligné.
Ainsi, on repère le  module de liens et son numéro; 
Dans notre exemple,   module_menu144577288

Comme il s'agit d'un id, son sélecteur (pour appliquer du CSS) sera:

#module_menu144577288

Nous voilà donc en possession du sélecteur qui va nous permettre d'appliquer un style bien particulier à notre module de menu "module de liens"" !

B - Il nous faut connaitre la hauteur des titres de nos modules ( à retrouver dans "modifier le thème" >> >"menu 1 ou 2" >> "titre module" > format.

Ici, les titres font 60px de haut.

Le principe:
Nous allons ajouter un CSS qui affiche le module avec une hauteur de 60px, la hauteur du titre;  
Puis un CSS qui affiche le module de sa réelle hauteur au survol du titre avec la souris:

/*effet Module derniers articles*/

 #module_menu144577290 { 

overflow: hidden; 
height: 62px;  /*60px etant la hauteur du titre du module*/
-webkit-transition: all 1.5s ease 0.15s; 
-moz-transition: all 1.5s ease 0.15s;
transition: all 1.5s ease 0.15s; }

#module_menu144577290:hover {height:218px; /*hauteur du module en entier*/}

/*FIN effet module derniers articles*/

N'hésitez pas à intervenir par le biais des commentaires si vous rencontrez quelques difficultés....