3 façons créatives de styliser la navigation de votre sous-menu vertical

Dans l'article d'aujourd'hui, nous allons vous proposer trois manières différentes de styliser le sous-menu de votre navigation verticale. Dans l'un des articles précédents, nous vous avons déjà montré comment créer une navigation verticale transparente qui chevauche votre site Web lorsque vous le regardez depuis un bureau.

Les exemples que nous allons partager seront créés au-dessus de cette navigation verticale transparente. De cette façon, vous aurez immédiatement la possibilité de créer votre navigation verticale transparente de A à Z. Tout au long de cet article, vous découvrirez différents paramètres de style qui peuvent donner vie à votre sous-menu vertical.

Avant de vous montrer les exemples, il peut être intéressant de voir le sous-menu sans aucun changement. Comme d'habitude, le sous-menu vertical reprend les paramètres des éléments du menu principal. Sans apporter de modifications supplémentaires, voici à quoi ressemble le sous-menu :

Voyons maintenant les trois exemples que nous allons vous montrer comment recréer.

Premier exemple :

Deuxième exemple :

Troisième exemple :

Étapes générales pour atteindre le sous-menu vertical

Abonnez-vous à notre chaîne Youtube

Avant de plonger dans les différents exemples que nous avons fournis, nous allons traiter deux étapes générales qui sont nécessaires avant de commencer. Avant de concevoir les éléments de sous-menu en fonction de vos besoins, vous devez faire deux choses : ajouter les éléments de sous-menu à votre menu et rechercher les différents identifiants CSS de nos éléments de sous-menu. Après avoir suivi ces étapes, nous partagerons le code CSS dont vous avez besoin pour obtenir les résultats de l'exemple.

Puisqu'il existe trois façons d'ajouter du code CSS à votre site Web Divi, nous traiterons chaque méthode individuellement. Cependant, vous pouvez utiliser votre méthode préférée pour ajouter le code CSS pour chacun des exemples.

Ajouter des éléments de sous-menu

La première chose que nous allons faire, si vous ne l'avez pas déjà fait, est d'ajouter les éléments du sous-menu. Dans notre exemple, nous n'avons ajouté que quelques éléments de sous-menu à l'élément de menu « nos modèles » pour vous montrer comment le faire. Cependant, vous pouvez également appliquer les modifications à d'autres éléments de menu.

Si vous êtes sur votre tableau de bord WordPress, accédez à Apparence > Menus . Si vous avez déjà créé un menu, utilisez-le. Sinon, commencez par créer un nouveau menu. Ensuite, ajoutez les éléments du menu principal à votre menu. Une fois que vous avez fait cela, vous pouvez ajouter les éléments du sous-menu. Ajoutez un élément de sous-menu et placez-le simplement sous l'élément de menu principal. Faites cela pour tous les éléments de sous-menu que vous souhaitez ajouter à votre navigation verticale.

Recherchez les identifiants CSS individuels de vos éléments de sous-menu

Dans nos exemples, nous devrons apporter des modifications CSS à chaque élément de sous-menu individuellement. C'est pourquoi nous devrons rechercher les identifiants CSS dans la source. Chaque article a un identifiant différent. Vous devez modifier le code CSS en fonction des identifiants CSS qui sont spécifiquement utilisés sur votre site Web. Ceux-ci peuvent différer de ceux qui sont utilisés dans ces exemples. C'est pourquoi nous vous montrerons brièvement où obtenir les identifiants afin que vous puissiez apporter les modifications à vos articles en particulier.

Allez sur votre page d'accueil, placez votre souris sur le menu et commencez à inspecter le code. Vous verrez l'ID CSS apparaître sur l'élément de menu sélectionné. Copiez chacun des identifiants CSS dans la liste des sous-menus et enregistrez-les pour plus tard.

Maintenant que vous avez effectué les deux étapes, vous pouvez passer à la création des exemples que nous avons créés.

Créer le premier exemple

Dans cette partie de l'article, nous allons vous montrer exactement comment recréer le premier exemple du sous-menu vertical. Comme vous pouvez le voir, la structure est vraiment simple, mais ajoute cette couleur supplémentaire à votre site Web. Les éléments du menu principal sont simples et utilisent une couleur d'arrière-plan transparente. Vous pouvez, bien sûr, garder cette même simplicité dans votre sous-menu. Ou, vous pouvez choisir d'y attirer un peu plus l'attention.

Les couleurs utilisées correspondent à l'image d'arrière-plan avec la superposition de dégradé. Garder ce genre de cohérence des couleurs dans votre sous-menu est recommandé si vous essayez d'obtenir un résultat simple et modeste.

Ajouter le code CSS via les options de thème

Il existe différentes manières d'ajouter du code CSS à votre page. Vous pouvez, par exemple, ajouter le code CSS à une page en particulier. Vous pouvez également l'ajouter à l'ensemble du site Web via les options de thème ou le personnalisateur de thème. Pour cet exemple, nous allons simplement ajouter le code via les options du thème. Si vous êtes sur votre tableau de bord WordPress, allez dans Divi > Options du thème > Faites défiler l'onglet général et collez le code suivant dans la case CSS personnalisée :

.nav li ul {
border: none !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(60,105,205,0.1) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(60,105,205,0.3) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(60,105,205,0.5) !important;
border-radius: 5px;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0px 1px 0 !important;
text-align: center !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 5% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\e089" !important;
}

Remplacez les identifiants CSS suivants dans le code par ceux qui s'appliquent à votre sous-menu. Dans l'étape précédente de cet article, nous vous avons montré où vous pouvez les trouver.

Créer le deuxième exemple

L'exemple suivant, nous allons vous montrer comment créer un certain effet de dégradé. Les différentes couleurs utilisées correspondent à l'image d'arrière-plan utilisée. Nous avons ajouté un arrière-plan dégradé au sous-menu complet et des couleurs transparentes individuelles à chacun des éléments du sous-menu.

Ajouter le code CSS pour une page en particulier

Bien que vous souhaitiez probablement ajouter ce code à votre site Web complet, nous vous montrerons comment appliquer cet exemple à une page en particulier. Si vous ne souhaitez pas ajouter les lignes de code CSS à une page en particulier, n'hésitez pas à les ajouter via les options de thème (comme indiqué dans le premier exemple) ou via le personnalisateur de thème (comme indiqué dans l'exemple suivant).

Commencez par ouvrir ou créer la page où vous souhaitez ajouter le design du sous-menu. Maintenant, cliquez sur le bouton suivant dans le coin droit du constructeur Divi :

Dans l'écran qui apparaît, copiez et collez les lignes de code CSS suivantes dans le champ CSS personnalisé :

.nav li ul {
border: none !important;
background: -webkit-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -o-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -moz-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
padding: 3px !important;
width: 80% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(255,255,255,0.6) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(255,255,255,0.4) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(255,255,255,0.2) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0 1px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 80% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
} 

Remplacez les éléments de sous-menu suivants dans le code CSS par les vôtres :

Créer le troisième exemple

Le dernier exemple que nous allons partager sur la façon de créer a un effet de survol. En ajoutant cet effet de survol à votre sous-menu, vous interviendrez agréablement avec votre public sans trop encombrer votre menu principal. Étant donné que le sous-menu n'apparaît que lors du déplacement sur l'élément du menu principal. Vos visiteurs ne seront donc pas constamment confrontés à l'effet.

Ajouter le code CSS pour une page via le personnalisateur de thème

Pour le dernier exemple, nous allons vous montrer comment ajouter le code CSS via le personnalisateur de thème. Si vous êtes sur votre tableau de bord WordPress, allez dans Apparence > Personnaliser > CSS supplémentaire > et copiez et collez les lignes de code suivantes :

.nav li ul {
border: none !important;
width: 95% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205211:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213:hover
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 5px 0 5px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 95% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}

Prenez les identifiants CSS de vos éléments de sous-menu et remplacez ceux de l'exemple par les vôtres :

C'est ça! Votre conception devrait maintenant ressembler à l'exemple ci-dessus.

Dernières pensées

Dans cet article, nous vous avons montré quelques possibilités pour faire preuve de créativité avec votre navigation verticale. Plus précisement; nous vous avons montré comment rendre votre sous-menu vertical superbe. Si vous suivez ce post, étape par étape, vous devriez pouvoir recréer parfaitement le sous-menu vertical. Si vous avez des questions ou des suggestions ; Faites-nous savoir dans la section commentaire ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !