Overlay Menù
Un overlay menu è un elemento di navigazione moderno che compare in sovrapposizione al contenuto della pagina quando l’utente lo attiva. Questo tipo di menù permette di mantenere l’interfaccia pulita e focalizzata, mostrando le opzioni di navigazione solo quando necessario. È particolarmente efficace nei design minimalisti e nelle versioni mobile dei siti web, dove l’ottimizzazione dello spazio e la chiarezza visiva sono fondamentali.
Ecco le sue caratteristiche principali:
1. Comportamento
- Appare sopra il contenuto esistente, senza ricaricare la pagina.
- Copre l’intero schermo.
- Si chiude cliccando un pulsante di chiusura, l’icona X del menù.
2. Obiettivi
- Offrire una navigazione chiara e pulita, specialmente su dispositivi mobili.
- Ridurre gli elementi visibili nella pagina, mantenendo un design più minimale.
- Dare massimo risalto al contenuto, evitando menù troppo ingombranti.
3. Vantaggi
- Usabilità mobile migliorata: è uno dei pattern più diffusi su smartphone.
- Esperienza utente più immersiva perché il menù domina l’attenzione quando necessario.
- Migliore gestione dello spazio: il menù non occupa spazio fisso nell'interfaccia.
Il mio non è un oggetto a pagamento
Il mio Overlay Menu non è un componente a pagamento, ma uno script personalizzato integrato in alcuni dei miei template. Nei modelli che includono questa funzionalità sono presenti sia il menù desktop tradizionale, sia l’icona hamburger che attiva l’overlay.
In base alle esigenze, è possibile scegliere se mostrarli entrambi, utilizzare l’overlay solo su dispositivi con schermi più piccoli (come tablet e smartphone) oppure adottare esclusivamente l’overlay menu su tutte le pagine del sito.
In base alle esigenze, è possibile scegliere se mostrarli entrambi, utilizzare l’overlay solo su dispositivi con schermi più piccoli (come tablet e smartphone) oppure adottare esclusivamente l’overlay menu su tutte le pagine del sito.
Solo Overlay Menù
Attivare questa opzione è molto semplice.
Dallo Step 2 (vedi punto 1 nell’immagine), accediamo al Contenuto del modello e poi alla sezione Header. Qui selezioniamo il menù principale (vedi punto 2 nell’immagine).
Una volta selezionato, clicchiamo su Mostra/Nascondi (vedi punto 3 nell’immagine) e scegliamo l’opzione “Nascondi per questa visualizzazione e per quelle inferiori”.
Dallo Step 2 (vedi punto 1 nell’immagine), accediamo al Contenuto del modello e poi alla sezione Header. Qui selezioniamo il menù principale (vedi punto 2 nell’immagine).
Una volta selezionato, clicchiamo su Mostra/Nascondi (vedi punto 3 nell’immagine) e scegliamo l’opzione “Nascondi per questa visualizzazione e per quelle inferiori”.
In questo modo, il menù principale verrà nascosto e resterà visibile solo l’hamburger menu, su tutte le risoluzioni.
Overlay Menù solo per Smart e Tablet
In questa modalità è necessario nascondere l’hamburger menu fino alla risoluzione in cui il menù principale non è più compatibile con lo spazio disponibile. A quel punto disattiveremo il menù principale e attiveremo l’hamburger seguendo il metodo descritto in precedenza, con alcune varianti. Vediamo i passaggi nel dettaglio.
Per prima cosa, partiamo dallo step con la risoluzione maggiore ed effettuiamo la disattivazione dell’oggetto HTML che contiene l’hamburger.
Dallo Step 2 (vedi punto 1 nell’immagine), accediamo al Contenuto del modello e successivamente alla sezione Header. Qui selezioniamo la risoluzione più ampia (vedi punto 2 nell’immagine) e, all’interno dell’header, individuiamo l’oggetto HTML corrispondente all’hamburger (vedi punto 3 nell’immagine).
Dallo Step 2 (vedi punto 1 nell’immagine), accediamo al Contenuto del modello e successivamente alla sezione Header. Qui selezioniamo la risoluzione più ampia (vedi punto 2 nell’immagine) e, all’interno dell’header, individuiamo l’oggetto HTML corrispondente all’hamburger (vedi punto 3 nell’immagine).
Dopo averlo selezionato, clicchiamo su Mostra/Nascondi (vedi punto 4 nell’immagine) e scegliamo l’opzione “Nascondi per questa visualizzazione” (vedi punto 5 nell’immagine).
Ripetiamo la stessa operazione per gli step successivi, fino a raggiungere la risoluzione in cui il menù principale passa automaticamente alla modalità hamburger. A questo punto dobbiamo nascondere il menù principale e attivare il nostro overlay menu.
Tutto qui: il risultato finale sarà una gestione fluida e coerente della navigazione, adattata in modo ottimale a ogni risoluzione.
L’Oggetto Menù di WebSite X5 genera automaticamente la navigazione del sito sulla base della Mappa del Sito. Si aggiorna in modo autonomo ogni volta che vengono modificate o aggiunte pagine e può essere inserito sia nel modello grafico sia nelle singole pagine. Il menù principale – generalmente l’unico necessario – viene solitamente posizionato nell’Header del sito.
L’Overlay Menù è collegato al menù di navigazione di WebSite X5 e, di conseguenza, si aggiorna automaticamente quando vengono aggiunte nuove pagine. Per questo motivo il menù principale non deve mai essere eliminato, ma semplicemente reso non visibile, come descritto in precedenza, qualora non si desideri mostrarlo nel sito.
L’Overlay menu mostra tutte le pagine linkabili nell’ordine in cui compaiono nel menu principale. I livelli non linkabili vengono automaticamente esclusi, eliminando i classici e fastidiosi effetti a fisarmonica. Se il menu contiene molte pagine, il contenuto dell’overlay diventeraà scrollabile, garantendo una navigazione semplice e intuitiva.
Puoi valutare il comportamento dell’overlay direttamente sui miei template. Cerca in particolare quelli che riportano la dicitura ‘Overlay Menù Free’.
Potrebbe interessarti anche: Come personalizzare un mio Template
0
recensioni