Divi: Come creare un menu scorrevole ea pressione

Ti piacerebbe creare un menu scorrevole e push in DIV che non nasconde elementi della tua pagina?

Intestazioni di grandi dimensioni con molti collegamenti di navigazione possono occupare spazio prezioso sul tuo sito web. Questo è il motivo per cui i menu contestuali e a scorrimento stanno diventando sempre più popolari. Nella maggior parte dei casi, i menu che scorrono per essere visualizzati rimangono sopra il contenuto della pagina, nascondendo alcuni elementi. 

Tuttavia, un menu push scorrevole funziona in modo leggermente diverso. L'effetto di spinta scorrevole è unico in quanto il menu scorre dalla parte superiore della pagina spingendo contemporaneamente il pulsante contenuto dalla pagina verso il basso in modo che nulla sia nascosto alla vista.

In questo tutorial, ti mostreremo come creare un menu a scorrimento scorrevole da zero utilizzando Divi Theme Builder.

Andiamo!

Panoramica

Ecco una rapida occhiata al menu a scorrimento che creeremo in questo tutorial.

Costruisci il menu a scorrimento con il generatore di temi Divi

Creazione di un nuovo menu globale

Per creare il menu, creeremo una nuova intestazione globale all'interno di Divi Theme Builder.

Vai a Divi > Generatore di temi.

Leggi anche: Come creare un'intestazione globale con modulo di accesso in DIVI

Quindi fare clic sull'area "Aggiungi un'intestazione globale" nel file modello di sito web per impostazione predefinita. Dall'elenco a discesa, seleziona "Crea intestazione globale".

Creazione del menu push

Il primo elemento che costruiremo insieme è la sezione del menu push. Questa sezione conterrà le voci di menu che si alterneranno su e giù quando si fa clic sul pulsante di commutazione del menu.

Impostazioni della sezione

Apri le impostazioni della sezione predefinita e aggiorna le impostazioni come segue:

Sfondo

• Sfondo: #1a1e36

Margine interno

• Margine interno: 0px in alto, 0px in basso

Classe CSS

Nella scheda avanzata, aggiungi la seguente classe CSS che verrà utilizzata più avanti nel nostro codice JS.

• Classe CSS: et-push-menu

Aggiungi la linea 1

Una volta definiti i parametri della sezione, creare una riga a una colonna nella sezione.

Parametri della riga 1

Quindi, aggiorna i parametri di linea come segue:

dimensionamento

• Usa larghezza grondaia personalizzata: SÌ
• Spaziatura delle colonne: 1
• Larghezza massima: 100%
• Larghezza massima: 1 pixel

spaziatura

• Margine: 3vh in alto, 3vh in basso

confine

• Larghezza bordo inferiore: 1px
• Colore bordo inferiore: rgba(255,255,255,0.2)

CSS personalizzato

Nella scheda Avanzate, aggiungi il seguente CSS personalizzato all'elemento principale:

display:flex;
justify-content:center;
align-items:center;

Parametri della colonna

Una volta definite le impostazioni della riga, apri le impostazioni della colonna e aggiungi uno snippet CSS personalizzato all'elemento principale:

display:flex;
align-items:center;
justify-content:center;

Questo centrerà il contenuto della colonna sia verticalmente che orizzontalmente.

Aggiungere un pulsante

Ora siamo pronti per iniziare ad aggiungere le nostre voci di menu utilizzando il modulo Pulsante. Inizia aggiungendo un nuovo pulsante alla colonna.

Vedi anche la nostra guida su: Come creare un menu di navigazione verticale in DIVI

Impostazioni dei pulsanti

Quindi, aggiorna le impostazioni del pulsante come segue:

Contenuto

• Testo pulsante: Design

• URL collegamento pulsante: # (sostituisci in seguito con il tuo URL personalizzato)

Style

• Usa stili personalizzati per Button: SÌ
• Colore testo pulsante: #ffffff

• Larghezza bordo pulsante: 0 pixel
• Carattere pulsante: Montserrat
• Pulsante luce soffusa: pesante

• Pulsante icona: SÌ
• Pulsante icona: [A tua scelta]
• Mostra solo icona sul pulsante al passaggio del mouse: NO
• Posizione dell'icona del pulsante: sinistra

Colonna duplicata

Ora, per creare i pulsanti aggiuntivi per il menu, possiamo duplicare la colonna. Per questo progetto, duplichiamo la colonna 4 volte per darci un totale di 5 voci/pulsanti di menu in una riga di cinque colonne.

Aggiungi la linea 2

Una volta completata la prima riga, siamo pronti per aggiungere un'altra riga di pulsanti che possono essere utilizzati per un diverso insieme di voci di menu.

Leggi anche: Come aggiungere un modulo di contatto a un'intestazione globale in DIVI

Per creare la riga successiva, duplica la riga 1.

Elimina tutte le colonne tranne una

Quindi elimina tutte le colonne tranne una nella riga duplicata.

Parametri della riga 2

Aggiorna i parametri della riga 2 come segue:

• Larghezza massima: 1 pixel

• Larghezza bordo inferiore: 0px

Parametri della colonna

Quindi aggiungi un bordo alla colonna come segue:

• Larghezza bordo destro: 1px
• Colore bordo destro: rgba(255,255,255,0.2)

Aggiorna le impostazioni del pulsante

Una volta che la colonna ha il bordo destro, apri le impostazioni del pulsante e aggiorna quanto segue:

• Dimensione testo pulsante: 14px

• Pulsante Luce soffusa: testo in grassetto
• Spaziatura delle lettere dei pulsanti: 2 px
• Stile di copia del pulsante: TT
• Pulsante icona: NO

Colonna duplicata

Come abbiamo fatto prima, duplichiamo la colonna per creare pulsanti e colonne aggiuntivi. Per questo disegno, duplichiamo la colonna 3 volte per darci un totale di 4 pulsanti in una riga di 4 colonne.

Rimuovi il bordo dall'ultima colonna

Dal momento che non vogliamo che l'ultima colonna abbia il bordo destro, apri le impostazioni per la colonna 4 e aggiorna la larghezza del bordo:

• Larghezza bordo destro: 0px

Creazione della barra di intestazione principale

Successivamente, creeremo la sezione principale della barra dell'intestazione. Questa barra di intestazione rimarrà sempre visibile e sarà ciò che contiene il logo del nostro sito, un invito all'azione e il nostro pulsante di attivazione/disattivazione del menu.

Aggiungi una sezione

Prima di aggiungere la nuova sezione, è buona norma aggiornare l'etichetta della sezione precedente per leggere "Sezione Menu Push".

Vedi anche: Come creare un'intestazione globale con Theme Builder in DIVI

Quindi crea una nuova sezione sotto la prima sezione.

Impostazioni della sezione

Ora aggiorna l'etichetta della nuova sezione per leggere "Sezione intestazione". Quindi apri le impostazioni della sezione e aggiorna quanto segue:

spaziatura

• Margine interno: 0px in alto, 0px in basso

Aggiungi una riga

Una volta impostata l'imbottitura della sezione, aggiungi una riga di tre colonne alla sezione.

Impostazioni linea

Apri il parametro di riga e aggiorna quanto segue:

dimensionamento

• Larghezza grondaia: 1
• Larghezza: 90%
• Altezza: 70px

spaziatura

• Margine interno: 0px in alto, 0px in basso

CSS personalizzato

Nella scheda Avanzate, aggiungi il seguente CSS personalizzato all'elemento principale:

display:flex;
align-items:center;

Questo centra verticalmente le colonne nella riga.

Aggiungere un pulsante

Per creare l'invito all'azione principale nella sezione dell'intestazione, possiamo utilizzare un pulsante della seconda riga nella sezione superiore. Copia il pulsante dalla colonna 1 della riga 2 della sezione superiore e incollalo nella colonna 1 della riga della sezione di intestazione.

Aggiorna le impostazioni del pulsante

Quindi apri le impostazioni del pulsante duplicato e aggiorna quanto segue:

• Testo pulsante: Registrazione

• Dimensione testo pulsante: 14px
• Colore testo pulsante: #1a1e36

• Pulsante icona: SÌ
• Pulsante icona: freccia destra (vedi screenshot)

Aggiungi un logo

Nella colonna centrale, aggiungi un modulo Immagine. Questo sarà il modo in cui aggiungeremo dinamicamente il logo del sito.

Passa il mouse sopra l'area dell'immagine e fai clic sull'icona "Usa contenuto dinamico". Dal menu a tendina, seleziona "Logo del sito".

Impostazioni immagine

Quindi, nella scheda Stile, aggiorna quanto segue:

• Allineamento immagine: centrato

• Altezza massima: 55 pixel

Aggiungi un'icona hamburger personalizzata

Potremmo usare un'icona normale attraverso un modulo di layout come interruttore di menu, ma per questo tutorial ho pensato di aggiungere un interruttore di menu personalizzato con un fantastico effetto di transizione.

Aggiungi un modulo di testo

Per creare l'icona del menu, utilizzeremo un modulo di testo con codice HTML personalizzato che sarà stilizzato con CSS esterno.

Vai avanti e aggiungi un modulo di testo alla colonna 3.

Aggiungi codice HTML al modulo di testo

Quindi aggiungi il seguente codice HTML al contenuto del modulo di testo:

<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>

Sfondo

Assegna al modulo di testo un colore di sfondo:

• Colore di sfondo: #1a1e36

Formattazione del testo

Quindi, aggiorna le impostazioni dello stile come segue:

• Larghezza: 70 pixel
• Allineamento del modulo: a destra
• Altezza: 70px

• Margine interno: 20px in alto, 20px in basso, 16px a sinistra, 16px a destra

Classe CSS

Nella scheda Avanzate, aggiungi la seguente classe CSS:

• Classe CSS: et-push-menu-toggle

Aggiungi codice

Per portare a casa la funzionalità di cui abbiamo bisogno per far funzionare questo menu push scorrevole, aggiungeremo i nostri CSS e jQuery personalizzati a un modulo Codice.

Vai avanti e aggiungi un modulo Codice alla colonna 3 sotto il modulo Testo.

Quindi incolla il seguente codice (NB: avvolgi questo codice in tag style affinché funzioni correttamente):

.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2 {
top: 10px;
}
.line-3 {
top: 20px;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}

Quindi copia e incolla questo codice direttamente sotto (importante: avvolgi questo codice nei tag di script affinché funzioni correttamente):

(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );

Aggiorna il testo del pulsante e i collegamenti

Infine, possiamo aggiornare tutti i pulsanti con il testo del pulsante necessario e gli URL dei collegamenti.

È fatta !

Salva le impostazioni

Non dimenticare di salvare il layout e le impostazioni di Theme Builder.

Risultato finale

Per vedere il risultato finale, controlla la pagina sul tuo sito web.

Rendi appiccicoso

Se vuoi una versione "sticky" del menu, aggiungi semplicemente il seguente snippet di codice CSS al modulo di codice (tra i tag di stile):

header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
  overflow-y: visible !important;
}

Ecco il risultato.

Scarica DIVI ora!!!

Conclusione

Ci auguriamo che questo menu a scorrimento a scorrimento vi piaccia. L'effetto è unico e apre la porta a intestazioni più creative. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...