Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Votre menu est l’une des premières choses que les visiteurs voient lorsqu’ils accèdent à votre site Web. Alors vous voulez qu’il ait un certain style, n’est-ce pas? Bien sûr, vous le faites! C’est pourquoi, dans l’article d’aujourd’hui, je vais partager trois façons d’ajouter de jolis effets de survol à votre menu en utilisant du CSS personnalisé.

Les effets de survol doivent être subtils, nous voulons un intérêt visuel, mais ce n’est pas la partie la plus importante du site, c’est votre contenu. Cela ajoutera juste la bonne quantité de «pop» à votre navigation Divi.

Non seulement allons-nous ajouter un bel effet de survol, mais nous allons également appliquer un style au lien de page actif. Par exemple, si l’utilisateur est sur la page d’accueil, une sorte de petit traitement de conception est appliqué au lien d’accueil dans le menu. Il s’agit d’un marqueur visuel commun placé sur les sites Web pour rappeler à l’utilisateur où il se trouve sur le site Web. Ce n’est pas strictement nécessaire, mais c’est une belle UX utile.

Commençons!

3 beaux effets de survol CSS à ajouter à vos menus Divi

Abonnez-vous à notre chaîne YouTube

Paramètres de personnalisation du thème

Tout d’abord, pour tous les styles que nous allons utiliser Paramètres par défaut pour le format d’en-tête. Si vous venez d’installer Divi, vous n’avez pas besoin de configurer ce paramètre. Il devrait être automatiquement réglé sur ce paramètre.

Style One – Ligne croissante en dessous

Dans ce style de menu, nous ajoutons une ligne qui semble croître de gauche à droite juste en dessous de l’élément de menu sur lequel le pointeur de la souris survole. Une ligne statique est également définie directement sous le lien de la page active.

inspiration

C’est un très bel effet qui fonctionne bien sur à peu près n’importe quel type de site. De plus, modifier le code de ce style pour changer la couleur et la largeur de la ligne est assez facile pour tous les utilisateurs de niveau. C’est un effet de survol assez populaire que j’ai vu sur les sites Web depuis des années. Je pense que c’est sa subtilité qui le rend si polyvalent qu’il peut être utilisé aussi bien sur un site immobilier que sur un site de musicien et tout le reste.

la mise en oeuvre

Ajoutez OU ajoutez le code suivant à votre feuille de style enfant Options de conception de Divi> Général> Champ CSS personnalisé::

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #15bf86; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

Style Two – Look épais « boxy » avec une ligne en dessous

Dans ce style de menu, nous plaçons une grande ligne « en blocs » animée par 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.

inspiration

J’utilise moi-même ce style pour un thème Divi kids que j’ai développé appelé Executive (je vais créer un lien vers la démo ci-dessous pour que vous puissiez voir le survol en action sur un site réel). Visuellement, ce n’est pas aussi subtil que le premier style. Je pense que le choix du bon site à utiliser serait essentiel. 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.

la mise en oeuvre

Ajoutez le code suivant à la feuille de style de votre thème enfant ou au champ CSS personnalisé de Divi dans l’onglet Options générales du thème. La modification simple de la couleur est très facile à modifier. Cependant, si vous souhaitez modifier la largeur de la bordure, vous devrez également jouer avec les autres nombres du CSS.

#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;
}

Style de boutons de fond tricolores

Ce style de menu transforme les éléments de menu en boutons avec des couleurs flottantes coordonnées. Il donne également au lien de menu actif une couleur différente et distincte.

inspiration

Ceci est bien sûr inspiré par les boutons. J’aime l’apparence de la navigation par bouton. Je pense aussi que, comme Style One, c’est un look assez polyvalent qui peut fonctionner sur presque tous les sites. Changer les couleurs d’arrière-plan est également assez facile.

la mise en oeuvre

Comme pour les deux autres styles ci-dessus, vous voudrez ajouter le code CSS personnalisé suivant à la feuille de style de votre thème enfant ou au champ CSS personnalisé de l’onglet Paramètres généraux du thème de Divi. Vous pouvez apporter vos propres ajustements et modifications au code (par exemple, les couleurs) en ajustant les valeurs à côté des parties commentées du code.

.et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
 padding-bottom: 15px;
}
#top-menu li {
 padding-right: 5px;
}
#et-top-navigation {
 padding: 20px 0 !important;
}
#top-menu li a {
 background: #C1B2AB; /*** CHANGES THE BACKGROUND COLOR ***/
 padding: 15px 20px;
 border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
 color: #fff !important;
}
#top-menu li a:hover {
 background: #559CAD !important; /*** CHANGES THE BACKGROUND COLOR ON HOVER ***/
}
#top-menu li.current-menu-item > a {
 background: #edc77b; /*** CHANGES THE BACKGROUND COLOR OF THE CURRENT PAGE LINK ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
 content: none;
}

Exemples de ces styles sur les sites Divi « In the Wild »

Voici quelques exemples de ces styles (ou très similaires) utilisés sur les sites Web de Live Divi.

Service d’ascenseur complet

Ce site utilise le traitement des lignes fines ailleurs pour les titres afin que le style flottant soit incorporé dans l’image plus grande d’une manière qui a du sens.

Consultez le site de service d’ascenseur complet

Le thème Executive Premium Divi Kids

Comme dans l’exemple ci-dessus, le style de ligne épaisse est utilisé ailleurs sur le site afin que les différents éléments de conception se complètent.

Découvrez le thème Executive Premium Divi Child

Endure Web Studios

D’accord, j’avais vraiment du mal à trouver un site qui avait des boutons pour chaque lien de menu. J’ai écrit le CSS pour ce didacticiel uniquement, mais Endure montre une utilisation populaire où un lien ressemble à un bouton. Le troisième style de ce didacticiel reprend cette idée et l’utilise pour tous les liens de navigation.

Voir le site Web d’Endure Web Studios

Emballer

Nous espérons que vous pourrez trouver une utilisation pour tout ou partie de ces styles de survol de menu sur vos sites Web Divi.

L’utilisation d’extraits de didacticiels comme celui-ci est géniale, car même les débutants peuvent facilement les implémenter, donnant même au site le plus simple le coup de pouce de conception personnalisé indispensable. Et bien que techniquement aucun d’entre eux n’utilise réellement une fonction d’animation, cela donne le sentiment que quelque chose est en cours d’animation, ce qui est très populaire et à la mode ces jours-ci.

Faites-nous savoir ce que vous aimeriez apprendre ensuite dans les commentaires ci-dessous. Abonnez-vous également à des didacticiels Divi faciles à mettre en œuvre à partir de Elegant Themes!





Source link

Recent Posts