3 modi creativi per modellare la navigazione del sottomenu verticale

Nel post di oggi, ti forniremo tre diversi modi per modellare il sottomenu della tua navigazione verticale. In uno dei post precedenti, ti abbiamo già mostrato come realizzare una navigazione verticale trasparente che si sovrapponga al tuo sito web quando lo guardi da un desktop.

Gli esempi che condivideremo saranno realizzati in cima a quella navigazione verticale trasparente. In questo modo, avrai immediatamente la possibilità di creare la tua navigazione verticale trasparente dalla A alla Z. Durante questo post, sperimenterai diverse impostazioni di stile che possono dare vita al tuo sottomenu verticale.

Prima di mostrarvi gli esempi, potrebbe essere interessante vedere il sottomenu senza alcuna modifica. Come di consueto, il sottomenu verticale riprende le impostazioni delle voci del menu principale. Senza apportare ulteriori modifiche, ecco come appare il sottomenu:

Ora, diamo un'occhiata ai tre esempi che ti mostreremo come ricreare.

Primo esempio:

Secondo esempio:

Terzo esempio:

Passaggi generali per ottenere il sottomenu verticale

Iscriviti al nostro canale Youtube

Prima di immergerci nei diversi esempi che abbiamo fornito, affronteremo due passaggi generali necessari prima di iniziare. Prima di progettare gli elementi del sottomenu in base alle tue esigenze, devi fare due cose: aggiungere gli elementi del sottomenu al tuo menu e cercare i diversi ID CSS dei nostri elementi del sottomenu. Dopo aver eseguito questi passaggi, condivideremo il codice CSS necessario per ottenere i risultati di esempio.

Poiché ci sono tre modi per aggiungere codice CSS al tuo sito web Divi, gestiremo ogni metodo individualmente. Tuttavia, puoi utilizzare il tuo modo preferito per aggiungere il codice CSS per ciascuno degli esempi.

Aggiungi voci di sottomenu

La prima cosa che faremo, se non l'hai già fatto, è aggiungere le voci del sottomenu. Nel nostro esempio, abbiamo aggiunto solo alcune voci di sottomenu alla voce di menu "I nostri modelli" per mostrarti come farlo. Tuttavia, puoi applicare le modifiche anche ad altre voci di menu.

Se sei nella dashboard di WordPress, vai su Aspetto > Menu . Se hai già creato un menu, usa quello. In caso contrario, inizia creando un nuovo menu. Quindi, aggiungi le voci del menu principale al tuo menu. Dopo averlo fatto, puoi aggiungere le voci del sottomenu. Aggiungi una voce di sottomenu e mettila semplicemente sotto la voce di menu principale. Fallo per tutte le voci del sottomenu che desideri aggiungere alla tua navigazione verticale.

Cerca gli ID CSS individuali delle voci del sottomenu

Nei nostri esempi, dovremo apportare alcune modifiche CSS a ciascuna voce del sottomenu individualmente. Ecco perché dovremo cercare gli ID CSS nella fonte. Ogni articolo ha un ID diverso. Devi modificare il codice CSS in base agli ID CSS che sono specificamente utilizzati sul tuo sito web. Questi potrebbero differire da quelli utilizzati in questi esempi. Ecco perché ti mostreremo brevemente dove ottenere gli ID in modo che tu possa apportare le modifiche ai tuoi articoli in particolare.

Vai alla tua home page, posiziona il mouse sul menu e inizia a ispezionare il codice. Vedrai l'ID CSS apparire nella voce di menu selezionata. Copia ciascuno degli ID CSS nell'elenco dei sottomenu e salvali per dopo.

Ora che hai eseguito i due passaggi, puoi passare alla creazione degli esempi che abbiamo realizzato.

Crea il primo esempio

In questa parte del post, ti mostreremo esattamente come ricreare il primo esempio del sottomenu verticale. Come puoi vedere, la struttura è davvero semplice, ma aggiunge quel colore in più al tuo sito web. Le voci del menu principale sono semplici e utilizzano un colore di sfondo trasparente. Ovviamente puoi mantenere la stessa semplicità nel tuo sottomenu. Oppure puoi scegliere di attirare un po' più di attenzione su di esso.

I colori utilizzati corrispondono all'immagine di sfondo con la sovrapposizione del gradiente. È consigliabile mantenere quel tipo di coerenza di colori nel sottomenu se stai cercando di ottenere un risultato semplice e modesto.

Aggiungi il codice CSS tramite le opzioni del tema

Esistono diversi modi per aggiungere codice CSS alla tua pagina. Puoi, ad esempio, aggiungere il codice CSS a una pagina in particolare. Puoi anche aggiungerlo all'intero sito Web tramite le Opzioni del tema o il Personalizzatore di temi. Per questo esempio, aggiungeremo semplicemente il codice tramite le Opzioni del tema. Se sei nella dashboard di WordPress, vai su Divi > Opzioni del tema > Scorri verso il basso la scheda generale e incolla il seguente codice nella casella CSS personalizzato:

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

Sostituisci i seguenti ID CSS nel codice con quelli che si applicano al tuo sottomenu. Nel passaggio precedente di questo post, ti abbiamo mostrato dove puoi trovarli.

Crea il secondo esempio

Il prossimo esempio che ti mostreremo come creare ha un certo effetto sfumato. I diversi colori utilizzati sono in linea con l'immagine di sfondo utilizzata. Abbiamo aggiunto uno sfondo sfumato al sottomenu completo e alcuni singoli colori trasparenti a ciascuna delle voci del sottomenu.

Aggiungi il codice CSS per una pagina in particolare

Anche se probabilmente vorrai aggiungere questo codice al tuo sito web completo, ti mostreremo come applicare questo esempio a una pagina in particolare. Se non vuoi aggiungere le righe di codice CSS a una pagina in particolare, sentiti libero di aggiungerlo tramite le Opzioni del tema (come mostrato nel primo esempio) o tramite il Personalizzatore di temi (come mostrato nell'esempio successivo).

Inizia aprendo o creando la pagina in cui desideri aggiungere il design del sottomenu. Ora, fai clic sul seguente pulsante nell'angolo destro del Divi builder:

Nella schermata che appare, copia e incolla le seguenti righe di codice CSS nel campo CSS personalizzato:

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

Sostituisci le seguenti voci del sottomenu nel codice CSS con le tue:

Crea il terzo esempio

L'ultimo esempio che condivideremo su come creare ha un effetto al passaggio del mouse. Aggiungendo questo effetto al passaggio del mouse al tuo sottomenu, interagirai con il tuo pubblico in un modo piacevole senza rendere troppo occupato il tuo menu principale. Poiché il sottomenu appare solo quando ci si sposta sulla voce del menu principale. I tuoi visitatori non saranno quindi costantemente confrontati con l'effetto.

Aggiungi il codice CSS per una pagina tramite la personalizzazione del tema

Per l'ultimo esempio, ti mostreremo come aggiungere il codice CSS tramite il Personalizzatore di temi. Se sei nella dashboard di WordPress, vai su Aspetto > Personalizza > CSS aggiuntivo > e copia e incolla le seguenti righe di codice:

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

Prendi gli ID CSS delle voci del tuo sottomenu e sostituisci quelli nell'esempio con i tuoi:

Questo è tutto! Il tuo design dovrebbe ora apparire come nell'esempio mostrato sopra.

Pensieri finali

In questo post, ti abbiamo mostrato alcune possibilità su come essere creativo con la tua navigazione verticale. Più specificamente; ti abbiamo mostrato come rendere fantastico il tuo sottomenu verticale. Se segui questo post, passo dopo passo, dovresti essere in grado di ricreare perfettamente il sottomenu verticale. Se hai domande o suggerimenti; fatecelo sapere nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!