Come creare un menu appiccicoso espandibile al passaggio del mouse con Divi

Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo.

Questa settimana, come parte della nostra iniziativa di progettazione Divi in ​​corso, ti mostreremo come creare un menu appiccicoso in espansione al passaggio del mouse utilizzando il pacchetto di layout meccanico di Divi. Tratteremo due diversi esempi di design che puoi ricreare da zero e applicare a qualsiasi tipo di sito web che stai creando! Il menu verrà mostrato al passaggio del mouse sulle dimensioni dello schermo del desktop e attivato al clic sui dispositivi mobili.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Esempio 1

Desktop

Mobile

Esempio #2

Desktop

Mobile

Passaggi generali

Disabilita navigazione fissa

Vai a Opzioni del tema Divi

Inizieremo con alcuni passaggi generali. Questi passaggi sono gli stessi per entrambi gli esempi e sono necessari per ottenere il risultato desiderato.

Se hai intenzione di utilizzare un menu appiccicoso espandibile nella parte inferiore della pagina, potresti voler omettere la barra dei menu principale in alto. Per farlo, dovrai andare alle opzioni del tema di Divi.

Disabilita navigazione fissa

Lì, ti consigliamo di disabilitare l'opzione della barra di navigazione fissa per assicurarti che non rimanga spazio nella parte superiore della pagina.

• Barra di navigazione fissa: disabilitata

Nascondi la barra dei menu principale sulla pagina

Apri le impostazioni della pagina

Passa alla pagina a cui desideri aggiungere il menu appiccicoso espandibile e apri le impostazioni della pagina.

Aggiungi CSS personalizzato

Nascondi il menu principale aggiungendo le seguenti righe di codice CSS alla tua pagina.

#main-header {
display: none;
}

Aggiungi una nuova sezione alla fine della pagina

Qualunque esempio tu voglia ricreare, alcuni dei passaggi di base rimangono gli stessi. Il primo passo è aggiungere una sezione normale in fondo alla pagina.

Spaziatura

Apri le impostazioni della sezione e rimuovi tutto il riempimento superiore e inferiore personalizzato.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Elemento principale

Permettiamo all'intera riga di rimanere in fondo alla nostra pagina aggiungendo due singole righe di codice CSS all'elemento principale della riga.

bottom: 0px;
position: fixed;

Indice Z

E faremo in modo che la riga (e il modulo di testo che aggiungiamo nei prossimi passaggi) rimanga in cima a tutto il contenuto della pagina aumentando l'indice Z nelle impostazioni di visibilità della riga.

• Indice Z: 99

Aggiungi modulo codice alla colonna

Aggiungi codice CSS tra i tag di stile

L'ultima parte dei passaggi generali consiste nell'aggiungere un modulo di codice alla nuova riga. Il codice CSS che aggiungiamo all'interno di questo modulo di codice ci aiuterà a ottenere l'effetto rivelatore al passaggio del mouse. Incolla le seguenti righe di codice CSS all'interno del modulo:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Ricrea l'esempio n. 1

Aggiungi modulo di testo alla colonna

Aggiungi contenuto

Ora che abbiamo seguito tutti i passaggi, possiamo iniziare a concentrarci sui due diversi esempi di design, iniziando dal primo! Aggiungi un modulo di testo alla colonna della tua riga. Nella casella del contenuto, stiamo usando lo stile di paragrafo per mostrare la copia "≡ Menu". Stiamo, quindi, inserendo tutte le voci di menu in un elenco non ordinato. Aggiungeremo anche un collegamento a ciascuno dei titoli di pagina singolarmente.

Colore di sfondo predefinito

Passa alle impostazioni di sfondo del modulo e cambia il colore di sfondo.

• Colore di sfondo: #ffffff

Colore di sfondo al passaggio del mouse

Modifica questo colore di sfondo al passaggio del mouse.

• Colore di sfondo: rgba (255,255,255,0.83)

Sfondo sfumato

E aggiungi anche uno sfondo sfumato predefinito.

• Colore 1: RGB (255,255,255,0)
• Colore 2: #ffffff
• Posizione finale: 60%

Impostazioni di testo predefinite

Continua andando alla scheda Design e modificando le impostazioni del testo.

• Carattere del testo: Khand
• Peso del carattere del testo: grassetto
• Colore del testo: #021827
• Dimensione del testo: 3vh
• Orientamento del testo: al centro

Impostazioni testo al passaggio del mouse

Modifica alcune delle impostazioni del testo al passaggio del mouse.

• Colore del testo: rgba (255,255,255,0)
• Dimensione del testo: 0vh

Link alle impostazioni del testo

Quindi, vai alle impostazioni del testo del collegamento e cambia il colore del testo del collegamento.

• Colore del testo del collegamento: #000000

Impostazioni testo elenco predefinito

Passa alle impostazioni del testo dell'elenco predefinito e modificalo come preferisci. Assicurati di utilizzare "0px" per la dimensione del testo nel suo stato predefinito.

• Carattere elenco non ordinato: Khand
• Stile carattere elenco non ordinato: maiuscolo
• Allineamento del testo dell'elenco non ordinato: al centro
• Colore testo elenco non ordinato: rgba(255,255,255,0)
• Dimensioni testo elenco non ordinato: 0px
• Altezza riga elenco non ordinato: 0em
• Posizione stile elenco non ordinato: interno

Impostazioni testo elenco al passaggio del mouse

Quindi, modifica alcuni dei valori al passaggio del mouse per consentire la visualizzazione delle voci di menu.

• Colore testo elenco non ordinato: #000000
• Dimensioni testo elenco non ordinato: 2vh
• Altezza della linea non ordinata: 2.1em

Spaziatura predefinita

Vai alle impostazioni di spaziatura successiva e dai una forma al modulo di testo.

• Margine sinistro: 45vw (desktop), 39vw (tablet), 33vw (telefono)
• Margine destro: 45vw (desktop), 39vw (tablet), 33vw (telefono)
• Imbottitura superiore: 2vw (Desktop), 4vw (Tablet), 6vw (Telefono)
• Imbottitura inferiore: 2vw (desktop), 4vw (tablet), 6vw (telefono)

Spaziatura al passaggio del mouse

Modifica questi stessi valori al passaggio del mouse.

• Margine sinistro: 14vw
• Margine destro: 14vw
• Imbottitura superiore: 8vw
• Imbottitura inferiore: 8vw

Bordo predefinito

Passa alle impostazioni del bordo e assicurati che ciascuno degli angoli arrotondati abbia un valore di "0px".

Confine al passaggio del mouse

Abilita le opzioni al passaggio del mouse sugli angoli arrotondati e modifica i valori in alto a sinistra e in alto a destra.

• In alto a sinistra: 50vw
• In alto a destra: 50vw

Scatola ombra

Continua dando al modulo una certa profondità usando un'ombra scatolata. Questo farà in modo che il menu non passi inosservato sulla pagina.

• Forza sfocatura ombra scatola: 1000 ms
• Colore ombra: rgba(0,0,0,0.68)

Classe CSS

Stiamo aggiungendo anche una classe CSS al modulo.

• Classe CSS: dt-menu

transizioni

Ultimo ma non meno importante, diminuisci la durata della transizione nelle impostazioni delle transizioni.

• Durata della transizione: 100 ms

Ricrea l'esempio n. 2

Aggiungi modulo di testo alla colonna

Aggiungi contenuto

Al secondo esempio! Qui, aggiungeremo di nuovo "≡ Menu" utilizzando lo stile di testo del paragrafo e le voci di menu utilizzando un elenco non ordinato. Aggiungeremo anche un collegamento a ciascuna delle voci di menu singolarmente.

Colore di sfondo predefinito

Passa alle impostazioni dello sfondo e cambia il colore di sfondo.

• Colore di sfondo: #ffffff

Colore di sfondo al passaggio del mouse

Modifica il colore di sfondo al passaggio del mouse.

• Colore di sfondo: #f71535

Impostazioni di testo predefinite

Quindi, vai alla scheda Progettazione e apporta alcune modifiche all'aspetto della copia del paragrafo.

• Carattere del testo: Khand
• Colore del testo: #021827
• Dimensione del testo: 3vh

Impostazioni testo al passaggio del mouse

Modifica queste impostazioni al passaggio del mouse.

• Colore del testo: rgba (255,255,255,0)
• Dimensione del testo: 0vh

Link alle impostazioni del testo

Passa alle impostazioni del testo e cambia il colore del testo del collegamento.

• Colore del testo del collegamento: #ffffff

Impostazioni testo elenco predefinito

Modifica anche le impostazioni di progettazione degli elementi dell'elenco non ordinati.

• Carattere elenco non ordinato: Khand
• Stile carattere elenco non ordinato: maiuscolo
• Allineamento del testo dell'elenco non ordinato: al centro
• Colore testo elenco non ordinato: rgba(255,255,255,0)
• Dimensioni testo elenco non ordinato: 0px
• Altezza riga elenco non ordinato: 0em
• Posizione stile elenco non ordinato: interno

Impostazioni testo elenco al passaggio del mouse

E modifica alcuni di questi valori al passaggio del mouse.

• Colore testo elenco non ordinato: #ffffff
• Dimensioni testo elenco non ordinato: 2vh
• Altezza riga elenco non ordinato: 2.1em

Spaziatura predefinita

Quindi, vai alle impostazioni di spaziatura e dai un po' di spazio al modulo.

• Margine destro: 88vw (desktop e tablet), 71vw (telefono)
• Imbottitura superiore: 6vw (desktop), 10vw (tablet), 18vw (telefono)
• Imbottitura inferiore: 4vw (desktop), 10vw (tablet), 12vw (telefono)
• Imbottitura sinistra: 1vw

Spaziatura al passaggio del mouse

Modificare i valori al passaggio del mouse.

• Margine destro: 59vw
• Imbottitura superiore: 13vw
• Imbottitura inferiore: 8vw
• Imbottitura sinistra: 1vw
• Imbottitura destra: 13vw

Frontiera

E per creare questo disegno a quarto di cerchio, cambieremo il bordo in alto a destra nelle impostazioni del bordo.

• In alto a destra: 50vw

Scatola ombra

Aggiungeremo anche un'ombra di riquadro per creare profondità sulla pagina.

• Forza sfocatura ombra scatola: 1000 px
• Colore ombra: rgba(0,0,0,0.68)

Classe CSS

Quindi, aggiungeremo una classe CSS nella scheda Avanzate.

• Classe CSS: dt-menu

transizioni

E diminuisci la durata della transizione nella scheda Avanzate per creare una transizione rapida.

• Durata della transizione: 100 ms

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Esempio 1

Desktop

Mobile

Esempio #2

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come creare un menu appiccicoso in espansione utilizzando il pacchetto di layout meccanico di Divi. Abbiamo gestito due diversi esempi di design che puoi ricreare e utilizzare su qualsiasi tipo di sito web che stai costruendo! Ci auguriamo che ti stia godendo questa iniziativa di design Divi in ​​corso, in cui ogni settimana cerchiamo di aggiungere qualcosa in più alla tua cassetta degli attrezzi di progettazione. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.