Come creare un menu a scorrimento verso il basso in Divi

Intestazioni di grandi dimensioni con molti link di navigazione possono occupare molto spazio prezioso sul tuo sito (soprattutto above the fold). Ecco perché i menu a comparsa e a scorrimento stanno diventando sempre più popolari. Il più delle volte, i menu che scorrono per la visualizzazione 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 e contemporaneamente spinge verso il basso il contenuto della pagina in modo che nulla venga nascosto alla vista.

In questo tutorial, ti mostreremo come creare un menu push scorrevole da zero utilizzando Divi Theme Builder. Una volta creato il menu, diventa uno strumento versatile per tutti i tipi di applicazioni poiché sarai in grado di riempire la sezione con qualsiasi contenuto desideri utilizzando Divi Builder.

Arriviamo ad esso!

Sbirciata

Ecco una rapida occhiata al menu push scorrevole che creeremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout della sezione nel tuo Divi Theme Builder, vai a Divi Theme Builder.

Fare clic sull'icona della portabilità.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il modello di sezione apparirà nel Divi Theme Builder.

Passiamo al tutorial, vero?

Costruire il menu push scorrevole con Divi Theme Builder

Creazione di un nuovo menu globale

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

Vai a Divi > Generatore di temi.

Quindi fare clic sull'area "Aggiungi intestazione globale" all'interno del modello di sito Web predefinito. Dal menu a discesa, seleziona "Crea intestazione globale".

Questo ti porterà all'editor del layout dell'intestazione globale.

Una volta che sei nell'editor del layout dell'intestazione globale, scegli l'opzione "Crea da zero.

Creazione del menu push

Il primo elemento che costruiremo insieme è la sezione del menu push. Questa sezione conterrà le voci di menu che si sposteranno verso il basso e verso l'alto quando si fa clic sul pulsante di attivazione/disattivazione del menu.

Impostazioni della sezione

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

Sfondo

• Colore di sfondo: #1a1e36

Imbottitura

• Imbottitura: 0px in alto, 0px in basso

Classe CSS

Nella scheda Avanzate, aggiungi la seguente Classe CSS che verrà utilizzata in seguito nel nostro codice JS.

• Classe CSS: et-push-menu

CSS personalizzato (tablet)

Successivamente, dobbiamo regolare l'altezza della sezione su dispositivi mobili utilizzando un'altezza calcolata per adattarsi alla barra di intestazione principale che aggiungeremo. Ciò essenzialmente farà sì che la sezione si estenda per l'intera altezza della finestra sul dispositivo mobile quando l'utente attiva o disattiva il menu.

Aggiungi il seguente CSS personalizzato all'elemento principale solo su tablet:

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

Aggiungi riga 1

Una volta terminate le impostazioni della sezione, creare una riga a una colonna all'interno della sezione.

Impostazioni riga 1

Quindi aggiorna le impostazioni della riga come segue:

Design

• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 1280 px
• Imbottitura: 3vh sopra, 3vh sotto
• 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:

Sotto Desktop...

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

Sotto Tablet...

display:flex;
flex-direction:column;
align-items:center;

Impostazioni colonna

Al termine delle impostazioni della riga, apri le impostazioni per la 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.

Pulsante Aggiungi

Ora siamo pronti per iniziare ad aggiungere le nostre voci di menu utilizzando i moduli dei pulsanti. Inizia aggiungendo un nuovo pulsante alla colonna.

Impostazioni dei pulsanti

Quindi aggiorna le impostazioni del pulsante come segue:

Contenuto

• Testo del pulsante: Design
• URL collegamento pulsante: # (sostituiscilo con il tuo URL personalizzato in seguito)

Design

• Colore del testo del pulsante: #ffffff
• Larghezza bordo pulsante: 0px
• Carattere pulsante: Montserrat
• Peso del carattere del pulsante: pesante
• Icona pulsante: [a tua scelta]
• Posizionamento dell'icona del pulsante: a sinistra

Duplicazione della colonna

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

Aggiungi riga 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.

Per creare la riga successiva, duplica la riga 1.

Elimina tutte le colonne tranne una

Quindi elimina tutte le colonne tranne una all'interno della riga duplicata.

Impostazioni riga 2

Aggiorna le impostazioni per la riga 2 come segue:

• Larghezza massima: 1080px
• Larghezza bordo inferiore: 0px

Impostazioni 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

Dopo che la colonna ha il bordo destro, apri le impostazioni per il pulsante e aggiorna quanto segue:

• Dimensione del testo del pulsante: 14px
• Spaziatura delle lettere dei pulsanti: 2px
• Peso del carattere del pulsante: semi grassetto
• Stile carattere pulsante: TT
• Mostra icona pulsante: NO

Duplica la colonna

Proprio come abbiamo fatto prima, duplichiamo la colonna per creare pulsanti e colonne aggiuntivi. Per questo design, duplichiamo la colonna 3 volte per ottenere un totale di 4 pulsanti in una riga di 4 colonne.

Eliminazione del bordo dell'ultima colonna

Poiché non vogliamo che l'ultima colonna abbia il bordo giusto, apri le impostazioni per la colonna 4 e aggiorna la larghezza del bordo:

• Larghezza bordo destro: 0px

Creazione della barra dell'intestazione principale

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

Aggiungi sezione

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

Quindi crea una nuova sezione sotto la prima sezione.

Impostazioni della sezione

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

Imbottitura

• Imbottitura: 0px in alto, 0px in basso

Aggiungi riga

Dopo aver aggiunto il riempimento della sezione, aggiungi una riga a tre colonne alla sezione.

Impostazioni riga

Apri l'impostazione della riga e aggiorna quanto segue:

Dimensionamento

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

Imbottitura

• Imbottitura: Imbottitura: 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 centrerà verticalmente le colonne all'interno della riga.

Pulsante Aggiungi

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

Aggiorna le impostazioni del pulsante

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

• Testo del pulsante: Iscriviti
• Dimensione del testo del pulsante: 14px
• Colore del testo del pulsante: #1a1e36
• Mostra icona pulsante: S
• Icona del pulsante: freccia destra (vedi screenshot)

Aggiungi logo

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

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

Impostazioni immagine

Quindi, nella scheda Progettazione, aggiorna quanto segue:

• Allineamento immagine: centro
• Altezza massima: 55px

Aggiungi l'icona dell'hamburger personalizzata

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

Modulo Aggiungi testo

Per creare l'icona del menu, utilizzeremo un modulo di testo con dell'HTML personalizzato che avrà uno stile con CSS esterno.

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

Aggiungi modulo di testo HTML

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

Progettazione del testo

Quindi aggiorna le impostazioni di progettazione come segue:

• Larghezza: 70px
• Allineamento del modulo: a destra
• Altezza: 70 px
• Imbottitura: 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 il nostro CSS personalizzato e jQuery a un modulo di codice.

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

Quindi incolla il seguente codice (importante: avvolgi questo codice nei tag di stile per farlo funzionare 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 di esso (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 testo e collegamenti del pulsante

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

Questo è tutto!

Salva le impostazioni

Non dimenticare di salvare il layout e le impostazioni del generatore di temi.

Risultato finale

Per visualizzare il risultato finale, controlla una pagina live sul tuo sito.

Rendendolo appiccicoso

Se desideri una versione "appiccicosa" del menu, tutto ciò che devi fare è aggiungere il seguente frammento di CSS al modulo di codice (tra i tag di stile ):

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

E questo è il risultato.

Pensieri finali

Spero che ti piaccia questo menu push scorrevole. L'effetto è unico e apre le porte a intestazioni più creative lungo la strada.

Non vedo l'ora di sentirti nei commenti.

Saluti!