Potrebbe capitarti di voler creare un sito web con un menu bottom, cioè nella parte bassa dello schermo, e magari che con lo scroll si vada a posizionare in alto nella consueta posizione top del menu.
Mi è capitato di pensare a questa soluzione per un sito web che volevo fosse diverso dai soliti standard, anche se di norma la soluzione adottata da tutti, cioè con un menu in alto, ormai è entrata nell’uso consueto e quindi è familiare e User firendly.
Potresti però aver bisogno di creare uno sticky menu in basso, cioè un menù che stia appiccicato al bottom dello schermo, o un menu che mentre scrolli lo schermo si vada a posizionate in alto nella pagina.
Non avendo trovato alcun tutorial in italiano per creare un menu bottom che scorra in alto nella pagina, ho deciso di tradurre il tutorial in inglese sul sito ufficiale di Elegant themes.
Un menu bottom che salga allo scroll fino al top della pagina
Ecco in un video l’effetto finale che si otterrà:
Cosa ti occorre per cominciare
Per prima cosa ti occorre il tema DIVI, e devi caricarlo ed installarlo nel tuo sito in WordPress.
Successivamente devi creare una nuova pagina sul tuo sito web, che ospiterà il menù in basso, ed editarla tramite il DIVI Builder:
Quando hai attivato il Divi builder nella pagina, selezione “Build from scratch” per iniziare a creare la pagina da zero.
Creare un bottom sticky menu nella pagina
Seguirò in questo tutorial l’esempio che hai visto nel video, creando una sezione above the fold, cioè che riempia tutto lo schermo, poi una sezione che contiene lo sticky menu che rimanga appiccicato al bottom (parte bassa) della pagina, e una sezione Below the fold, sotto al menù per far vedere l’effetto dello scroll mediante il quale il menù sale e si va ad attaccare al top (parte alta) dello schermo.
Questo è solo per far vedere bene come funziona lo scroll come nell’esempio, ma se hai già creato la tua pagina puoi saltare questi passaggi e andare direttamente alla parte del tutorial dove è spiegato come creare il menù bottom e quali impostazioni dargli.
Creare la sezione Above the fold
Per creare la sezione a tutto schermo inserisci una nuova sezione (in azzurro) e una unica riga (in verde), senza aggiungere anche un modulo (nero) con Divi builder.
Per far sì che la sezione (azzurra) sia a tutto schermo, andiamo ad editarla inserendo le seguenti opzioni:
- Background Color: #e9f9ff
- Background Image: [aggiungi tu una immagine]
e nella tab “design” inserisci nella parte dedicata al Dimensionamento e alla Spaziatura:
- Min Height: 100vh (desktop), auto (tablet and phone)
- Padding: 20vh top, 20vh bottom
Per identificare meglio la sezione Above the fold, puoi anche, come citato nel tutorial in inglese, inserire un testo o un titolo all’interno di questa sezione, scrivendo ad esempio “Above the fold” in grande.
Creare la sezione Below the fold
Per apprezzare al meglio il risultato come nell’esempio abbiamo bisogno di creare una sezione “below the fold”, cioè che appaia solo quando scrolliamo in basso la pagina.
Puoi semplicemente duplicare la sezione Above the fold e cambiare lo sfondo e il testo in grande per differenziarla dalla sezione above the fold.
Creare lo sticky menu bottom
Per creare il menu bottom appiccicato alla parte bassa dello schermo abbiamo bisogno di creare una terza sezione (azzurra), tra la sezione Above the fold e la sezione below the fold. Questa sezione conterrà una sola riga (verde) e per differenziarla dal resto puoi impostarle uno sfondo blu ad esempio.
Imposta la sezione che conterrà il menù con un padding pari a zero sia in alto che in basso, così sarà più bassa:
C’è bisogno poi, sempre nella sezione, di impostare un overflow sempre visibile, questo per fare in modo che in presenza di menù a tendina, essi siano sempre visibili in primo piano.
Quindi nella tab “Avanzate” devi inserire:
- Horizontal Overflow: Visible
- Vertical Overflow: Visible
Per impostazione predefinita, su mobile il menu a discesa si apre sotto l’icona del menu. Se noi lasciassimo le cose come sono, con una barra di menu in basso, parte del menu a discesa verrebbe nascosto dalla stessa barra.
Quindi per migliorare l’esperienza utente meglio far rimanere in alto la barra di navigazione.
Per fare questo dobbiamo assegnare una posizione assoluta alla barra su Smartphone e Tablet, mentre su Desktop la possiamo lasciare relativa:
- Position: Relative (desktop), Absolute (tablet and phone)
A questo punto possiamo impostare la barra di navigazione in modo che sia sticky, cioè appiccicata allo schermo o in basso (su desktop) o in alto (per smartphone e tablet).
Per fare questo nella sezione “Avanzate” -> “Effetti di scroll” impostiamo:
- Sticky Position: Stick to Top and Bottom (desktop), Stick to Top (tablet and phone)
Con questa impostazione per desktop (Stick to Top and Bottom) faremo in modo che allo scrollo il menù passi dall’essere appiccicato alla parte bassa dello schermo fino ad appiccicarsi alla parte alta dello schermo.
Fatto questo abbiamo completato le impostazioni della sezione in modo che sia in basso su Desktop e sticky, mentre sarà in alto per dispositivi mobili, e appiccicata alla parte alta dello schermo (sticky).
Creare il menu
Possiamo ora procedere a creare il nostro menù all’interno della sezione creata. All’interno della singola riga (verde), possiamo inserire il modulo di DIVI “menu”:
Potremo così inserire un menu naturalmente già creato con WordPress dalla sezione “Aspetto > menu”, aggiungere un logo e formattarlo a nostro piacimento.
Fatto questo, abbiamo finito, ed il risultato sarà come nell’esempio, con lo scroll presente come nel video inserito qui all’inizio dell’articolo.
