Thème DIVI : personnaliser le menu avec animation

Personnaliser le menu et l’animer en effet “barre” avec le thème DIVI nécessite d’ajouter du CSS dans votre thème

Pourquoi utiliser un menu personnalisé avec DIVI

Le thème DIVI est simple dans sa configuration de base.

Pour avoir un thème adapté à votre site internet il est nécessaire de réaliser des ajouts d’animations. Cette personnalisation commence par le menu, qui est la première impression qu’un visiteur se fait.

Personnaliser la largeur du sous menu avant de l’animer

Lors de l’utilisation d’un sous menu, la largeur est souvent trop petite pour réussir à afficher les éléments sur une seule ligne. Voici quelques lignes à ajouter à votre CSS personnalisé pour faire varier la largeur. Vous pouvez modifier les valeurs pour l’adapter à votre besoin

* largeur du sous menu */
#top-menu li li a {
	width:260px; /* largeur du lien intérieur */
}

.nav li ul {
	width:300px; /* largeur totale du cadre du menu */
} 

Comment réaliser cette animation en barre ?

Pour personnaliser votre menu avec le thème DIVI en créant une animation en barre, il suffit de copier et coller le code ci-dessous dans votre thème enfant ou dans le CSS du thème DIVI

Vous pouvez personnalisé ce CSS :

• vitesse de la transition
• couleur du fond
• couleur de la police
• couleur de la page en cours

/* Menu animé */
#top-menu li::before {
	content: "";
	position:absolute;
	top:0;
	left:0;
	height: 25px;
	background:#0c71c3; /* couleur du fond au survol */
	margin-top:-6px;
	width:0%;
	transition-duration:0.5s;
}

#top-menu li:hover::before {
	width:100%;
	left:0;
	opacity:1;
	margin-left:-10px;
}

#top-menu li li::before { /* positionner la barre pour les sous-menu */
	top:15px;
	left:20px;
}

#top-menu li li:hover::before {
	width:80%;
	left:35px;
	opacity:1;
	margin-left:-10px;
}

#top-menu > li:last-child {
	padding-right:20px;
}

#top-menu li a:hover {
	color:#fff; /* couleur du texte au survol */
	opacity:1;
}

#top-menu-nav ul li a:hover {
	opacity:1;
}

Pour avoir des informations sur la personnalisation de ce menu, vous pouvez me contacter

Consultez nos autres articles sur la personnalisation du menu en consultant notre blog