06.80.46.86.18

Pour créer un menu sous DIVI, avec la page en cours encadré et une ligne dessous lorsque la souris passe dessus nécessite de réaliser un codage en CSS

Qu’est-ce qu’un menu avec encadré et ligne

Dans ce style de menu, nous allons placer une grande ligne “en blocs” qui s’anime depuis la section de menu sous l’élément de menu sur lequel la souris survole. Il place également une grosse boîte sur le lien de menu actif.

Divi menu boite et souligne hover

J’utilise moi-même ce style sur certains sites. Visuellement, ce n’est pas aussi subtil que le premier style, je pense que choisir le bon site pour l’utiliser serait la clé. Il est important de faire correspondre tout type de petit détail de conception, comme un effet de survol, à l’ambiance générale du site.

Comment réaliser un menu de ce style ?

Pour réaliser cette animation de menu encadré avec ligne en hover, ajoutez le code ci-dessous à la feuille de style de votre thème enfant ou à la boîte CSS personnalisée de Divi sous l’onglet général Options du thème. En ce qui concerne la facilité d’édition, la couleur est très facile à changer, mais si vous envisagez de modifier la largeur de la bordure, vous devrez également jouer avec les autres chiffres du CSS.

Le code est assez court pour réaliser cet effet :

#top-menu li > a:hover {
 box-shadow: 0 10px 0 0 #F15A29 !important; /*** COLOR AND THICKNESS OF THE LINE ON HOVER ***/
 padding-bottom: 34px;
 opacity: 1 !important;
}
#top-menu li li a {
 padding-bottom: 6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
 border: 10px solid #F15A29; /*** COLOR AND THICKNESS OF THE BOX ***/
 padding: 10px;
 margin-bottom: -10px;
}

Pour personnaliser votre site, sous DIVI, vous pouvez me contacter

Pin It on Pinterest

Share This