Souvent ils désirent mettre en place un menu déroulant qui se déploie au passage de la souris pour améliorer l'ergonomie de l'interface.
Par défaut les différents thèmes de Kiubi ne proposent pas cette fonctionnalité, mais celle-ci peut cependant être mise en place moyennant une bonne connaissance du code HTML et CSS.
Nous proposons dans cet article un tutoriel vous expliquant comment mettre en place pas à pas un menu déroulant au passage de la souris dans Kiubi. Ce code permet de mettre en place aisément un menu se déployant au passage de la souris et restituant 3 niveaux de profondeur d'arborescence  comme l'affiche  le site http://www.afrconseils.com/methode-de-travail.html au niveau de l'item "nos offres" dans le menu principal.

Précautions

Ce plugin a été testé et éprouvé, sa mise en place nécessite néanmoins un peu de technicité en termes de code HTML et CSS. Nous vous recommandons de procéder à une sauvegarde de votre site avant toute modification. Vous pouvez également nous contacter pour toutes demandes d'information.

Ce menu gère par défaut un affichage sur 3 niveaux de profondeur.

1. Mise en place du dossier spécifique à ce type de menu déroulant

  • Récupérer le répertoire  
  • Décompresser le répertoire
  • Transférer en ftp le répertoire sous "/theme/fr/widgets/site_web/menu_v"

2. Mise en place de l'appel au menu déroulant par l'administration du site

  • Connectez-vous à votre administration sous Kiubi
  • Accédez au gabarit de votre choix qui doit afficher ce menu déroulant (dans l'onglet "Apparences" > "Mise en page")
  • Au niveau du choix des widgets en haut de page sélectionnez le widget "Site Web / Navigation / Menu Vertical"
  • Réaliser un drag & drop pour venir positionner le widget "Site Web / Navigation / Menu Vertical" dans la zone qui vous intéresse.
  • Editer le widget pour le configurer
    • Dans la liste déroulante "modèle graphique" choisir : "menu_deroulant",
    • Dans la liste déroulante "menu" choisissez quel menu vous souhaitez afficher,
    • A l'aide des cases à cocher choisissez les niveaux à afficher quant à la profondeur de la restitution du menu (ce menu peut gérer un affichage sur 3 niveaux de profondeur, cocher ou non la case 4ème niveau n'a pas d'importance).
  • Enregistrer les modifications du gabarit

3. Votre menu est en place

Si vous vous connectez sur une page s'appuyant sur le gabarit que vous venez de mettre en place vous verrez un emnu déroulant apparaite au passage de la souris comme c'est le cas sur le site http://www.afrconseils.com/methode-de-travail.html au niveau de l'item "nos offres" dans le menu principal. Si ces informations vous ont aidé, n'hésitez pas à nous laisser un commentaire ! 

4. Modifier la mise en forme du menu et des sous menus

L'ensemble de la mise en forme de ce menu peut être modifiée, pour ce faire il vous suffité d'éditer la feuille de styles CSS : /theme/fr/widgets/site_web/menu_v/menu_deroulant/styles.css et de modifier les styles présents en bas de cette page après la portion de code : /* -- CSS de mise en forme / A modifier -- */ /* menu hover*/.

Nous reprenons ci-après l'ensemble de ce code CSS en indiquant sur quelles propriétés agit chacun des styles.

/* -- CSS de mise en forme / A modifier -- */ /* menu hover*/
#menu {
background: none; /*Couleur ou image de fond de la zone de menu*/
font-size: 12px; /* font-size par défaut du menu*/
padding-top:10px /* distance du menu principal avec l'élément supérieur */
}
#menu a {
color: #aaa; /*Couleur des liens du menus*/
padding: 5px 12px; /*Espacement des liens du menu*/
border-right:1px solid #666; /*séparateur des léments du menu*/
}
#menu ul ul {
top: 25px;/*Position du menu de niveau 2 apparaissant au passage de la souris (par rapport au bord supérieur de l'item du menu de niveau 1*/
width: 180px;/*Largeur de chaque item du menu de niveau 2*/
border-left:1px solid #666; /*Bordure gauche du menu de niveau 2*/
border-bottom:1px solid #666;/*Bordure basse du menu de niveau 2*/
}
#menu ul ul li {
min-width: 180px; /*Largeur minimum des éléments de liste du menu de niveau 2*/
}
#menu ul ul ul {
border-left:0px solid #666;/*Suppression de la bordure gauche pour les éléments du menu de niveau 3*/
}
#menu ul ul a {
background: #333; /*Couleur ou image de fond des items du menu de niveau 2*/
line-height: 1em;/*Hauteur de la ligne des items du menu de niveau 2*/
padding: 10px; /*Espacement des items du menu de niveau 2*/
width: 160px;/*Largeur des items du menu de niveau 2*/
}
#menu li a.actif{
background:#fff; /*Couleur de fond des items du menu de niveau 1 si lien actif*/
color:#000 /*Couleur des items du menu de niveau 1 si lien actif*/}
#menu li li a.actif{
background: #333;/*Couleur de fond des items du menu de niveau 2 si lien actif*/
color: #aaa/*Couleur des items du menu de niveau 2 si lien actif*/}
#menu li li li a.actif{
background: #333/*Couleur de fond des items du menu de niveau 3 si lien actif*/;
color: #aaa /*Couleur des items du menu de niveau 3 si lien actif*/}
#menu li:hover > a,
#menu ul ul:hover > a {
background: #333;/*Couleur de fond des items du menu de niveau 1 et 2 au passage souris*/
color: #fff;/*Couleur des items du menu de niveau 1 et 2 au passage souris*/
}