Opzioni di progettazione del menu, personalizzazione, suggerimenti ed esempi
Esplorate 10 design di menu per siti web, imparate a personalizzarli e scoprite come utilizzarli.
Questa guida si concentra sulla progettazione del menu: come si presenta e come funziona. Se volete imparare a progettare un menu per il sito web, a visualizzarlo su ogni pagina del vostro sito o a creare un menu di navigazione per una particolare pagina web, vi consigliamo di leggere un'altra guida:
Il menu di navigazione è un elenco di link che conducono a varie pagine del sito web o a sezioni specifiche all'interno di una determinata pagina web. Ogni link è una voce di menu. Il menu viene utilizzato per aiutare i visitatori del sito web a navigare tra le pagine del sito o tra le diverse sezioni di una pagina specifica.
Come si presenta: Un menu di questo tipo è appuntato nella parte superiore della pagina per non distrarre i visitatori del sito web dal contenuto, e possono trovarlo facilmente quando necessario perché è fissato in un punto specifico della pagina.
Come configurarlo:
Aggiungere un blocco ME301 alla pagina e applicare le seguenti impostazioni:
Impostazioni principali → Comportamento della posizione del menu: Assoluto. Sfondo del menu → Opacità dello sfondo del menu: 0%.
Fare clic qui per visualizzare un esempio di menu statico trasparente sul sito web
OPZIONI DI PROGETTAZIONE DEL MENU
Menu fisso
Come si presenta: Un menu di questo tipo è sempre visibile sulla pagina e vi si può accedere facilmente da qualsiasi punto della pagina. Di solito ha uno sfondo trasparente nella parte superiore della pagina (sulla copertina) che diventa opaco durante lo scorrimento.
Come configurarlo:
Aggiungere un blocco ME301 alla pagina e applicare le seguenti impostazioni:
Impostazioni principali → Comportamento della posizione del menu: Fisso su scorrimento. Sfondo del menu → Colore dello sfondo del menu. Scegliereun colore. Sfondo del menu → Opacità dello sfondo del menu: 0%. Sfondo del menu → Opacità dello sfondo del menu durante lo scorrimento: 80%.
Cliccare qui per visualizzare un esempio di menu fisso sul sito web
OPZIONI DI PROGETTAZIONE DEL MENU
Menu fisso in cima alla pagina, Menu che appare durante lo scroll
Come si presenta: Questo menu è simile a quello descritto in precedenza. Ciò che lo rende diverso è un altro menu che appare a scorrimento e che presenta un numero ancora maggiore di voci. Ad esempio, il menu di navigazione superiore contiene un logo, alcune voci di menu che conducono a diverse pagine del sito e alcuni link ai social media. Quando l'utente scorre la pagina, appare un'altra barra di menu, con un logo, un invito all'azione e un pulsante di richiamo.
Come configurarlo: Aggiungere due blocchi ME301 alla pagina e applicare le seguenti impostazioni:
Menu Uno (situato nella parte superiore della pagina) Impostazioni principali → Comportamento della posizione del menu: Assoluto. Sfondo del menu → Opacità dello sfondo del menu: 0%.
Menu Due (che appare durante lo scorrimento) Impostazioni principali → Comportamento della posizione del menu: Fisso su scorrimento. Impostazioni principali → Rivela il menu dopo lo scorrimento di N pixel Rivela il menu quando la pagina viene fatta scorrere in pixel: 600px. Sfondo del menu → Colore dello sfondo del menu. Scegliere un colore. Sfondo del menu → Opacità dello sfondo del menu: 70%.
Menu Uno
Menu Uno
Menu due
Menu due
Cliccare qui per visualizzare gli esempi di questi menu su un sito web
OPZIONI DI PROGETTAZIONE DEL MENU
Menu Hamburger
Come si presenta: Il menu hamburger è costituito dalle tre linee orizzontali nella parte superiore dello schermo. Quando l'utente fa clic su di esso, si apre per rivelare un menu di navigazione.
Per cosa si può usare: Questo menu è perfetto per il vostro sito web se volete che i visitatori si concentrino sul contenuto senza essere distratti da altri elementi di design. Il menu hamburger viene solitamente utilizzato in una versione mobile del sito web. È possibile impostare la visualizzazione del menu su diversi dispositivi.
Ad esempio, si può scegliere di far apparire un menu normale solo sulla versione desktop del sito e di rendere visibile il menu hamburger solo sui dispositivi mobili.
Come configurarlo: Aggiungere un blocco ME401/402/403/404/405 alla pagina, impostare il comportamento della posizione del menu, il colore dell'icona del menu, il colore dello sfondo del menu e il colore dello sfondo delle voci del menu.
Ad esempio, è possibile applicare le seguenti impostazioni: Impostazioni principali → Comportamento della posizione del menu: Fissa su scorrimento. Icona del menu → Colore. Scegliere il nero. Sfondo del menu → Colore dello sfondo del menu collassato. Rendere trasparente. Sfondo del menu → Colore dello sfondo del menu espanso . Scegliere il bianco.
Fare clic qui per visualizzare un esempio di menu per hamburger sul sito web
OPZIONI DI PROGETTAZIONE DEL MENU
Menu multilivello
Come si presenta: Quando si fa clic su una voce di menu, viene visualizzato un menu a discesa.
Per cosa si può usare: Siti web di grandi dimensioni con una struttura avanzata.
Come configurarlo:
Aggiungere voci di sottomenu per il blocco principale o utilizzare una combinazione di menu ME301 (o qualsiasi altro blocco con voci di menu) e ME601.
Voci di sottomenu del blocco principale
Aggiungere alla pagina qualsiasi blocco di menu che contenga voci di menu.
Andate nella scheda Contenuto del blocco → Elenco delle voci di menu → Aggiungi sottovoci e vedrete le icone più che appariranno vicino alle voci di menu.
Fate clic sull'icona più vicino a una voce per la quale dovete aggiungere una sottovoce, inserite un titolo per la sottovoce e assegnate un collegamento.
Fare nuovamente clic sull'icona più per aggiungere una nuova sottovoce.
Le sottovoci del menu vengono visualizzate al passaggio del mouse come menu a discesa. Nelle versioni mobili, è possibile aprire il menu con un tocco.
Importante: la voce di menu principale non sarà cliccabile. Se si desidera renderla cliccabile, creare una sottovoce duplicata nel menu a discesa.
Blocco ME 601
Aggiungere il blocco ME301 alla pagina, configurare il menu come descritto sopra e aggiungere il blocco ME601 (Menu: secondo livello).
Il blocco ME601 consente di aggiungere sottovoci alle voci del menu principale. Queste verranno visualizzate al passaggio del mouse come menu a discesa. Nelle versioni mobili, è possibile aprire il menu con un tocco.
Come funziona: 1) Nel blocco ME601, scrivere un link che assomigli a #submenu:more 2) Nel menu principale: Nel campo Link, vicino alla voce per la quale si desidera creare dei sottovoci, scrivere #submenu:more.
Importante: la voce del menu principale non sarà cliccabile. Se volete renderla cliccabile, create una sottovoce duplicata nel menu a discesa.
Nota bene: potete usare qualsiasi parola per "#submenu:more", come ad esempio: #submenu:portfolio или #submenu:aboutus
Fare clic qui per visualizzare un esempio di menu multilivello sul sito web
OPZIONI DI PROGETTAZIONE DEL MENU
Schede
Come si presenta: Una scheda attiva consente agli utenti di sfogliare i contenuti ad essa collegati senza lasciare la pagina web.
A cosa serve: Le schede consentono di mostrare diverse categorie dello stesso tipo di contenuto, ad esempio diverse categorie di lavori all'interno di un portfolio.
Come configurarlo: Aggiungere un blocco ME602 o ME603 alla pagina. È possibile utilizzare questi blocchi per creare schede e mostrare contenuti quando l'utente fa clic su una scheda all'interno della stessa pagina. Di seguito, è necessario aggiungere i blocchi in una sequenza che cambierà quando l'utente fa clic su una determinata scheda.
Come funziona: 1. Aggiungere i titoli delle schede nel pannello Contenuto del blocco ME602 o ME603. 2. Aggiungere gli ID dei blocchi che devono essere visibili quando si fa clic sulla scheda (separandoli con una virgola, senza spazi).
Nota: è possibile copiare l'ID del blocco nel pannello Impostazioni del blocco - scorrere fino alla parte inferiore del pannello per trovarlo.
Fare clic qui per visualizzare un esempio di questo menu sul sito web
Opzioni di progettazione del menu
Menu con navigazione a punti
Come si presenta: Facendo clic sul punto nel menu, si salta a un blocco specifico della pagina
Per cosa si può usare: Per reindirizzare gli utenti a una sezione specifica della pagina con una grande quantità di contenuto
Come configurarlo:
Aggiungere alla pagina il blocco ME604 della categoria Menu. Utilizzando questo blocco, è possibile creare la possibilità di navigare verticalmente tra le sezioni della pagina.
Attenzione: questo blocco è pensato solo per schermi di grandi dimensioni (a partire da 960 px).
Come funziona:
1) Aggiungete un blocco con un link di ancoraggio (nella categoria Altro) davanti a ogni sezione. È conveniente nominarle in base a ciò che comprendono, per esempio: about, team, gallery 2) Nell'elenco delle voci di menu, inserite i nomi e i link di ancoraggio con il simbolo # per ciascuna delle sezioni. Esempio di link di ancoraggio: #circa
Fare clic qui per visualizzare un esempio di questo menu sul sito web
opzioni di progettazione del menu
Pangrattato
Come si presenta:
Facendo clic su una voce di menu, si viene reindirizzati a una sezione specifica o a una pagina interna.
Per cosa può essere utilizzato:
Utilizzando il menu breadcrumbs, è possibile mostrare il percorso dalla pagina iniziale a quella che si sta visualizzando.
Come configurarlo:
Aggiungere alla pagina il blocco ME605 della categoria Menu. Nella scheda Contenuto del blocco, nei campi Testo 1, Testo 2, Testo 3, specificare il percorso di navigazione delle pagine del sito web, a partire dalla home page fino alla pagina che l'utente sta visualizzando. In basso, nei campi Link 1, Link 2, Link 3, specificare il link alla pagina per la voce di menu.
Come funziona: 1) Specificare l'indirizzo della pagina in Impostazioni pagina > Generale 2) Specificare il collegamento a una pagina separata per la voce di menu nel campo Collegamento
Menu fisso della barra laterale con le sottosezioni
Come si presenta: Menu a discesa della barra laterale che contiene sezioni e sottosezioni. Il menu ha una posizione fissa che consente di indirizzarlo da qualsiasi punto della pagina.
A cosa serve: Consente di creare una navigazione dettagliata per le sezioni e le sottosezioni interne del sito web, nonché di aggiungere una ricerca per le pagine.
Come configurarlo:
Aggiungere il blocco ME901 alla pagina, configurare gli stili di visualizzazione del menu utilizzando le impostazioni del blocco.
Il blocco ME901 consente di aggiungere sottosezioni alle voci del menu principale. È necessario specificare i collegamenti alle sottosezioni nella scheda Contenuto del blocco > Elenco delle voci di menu.
Come collegamento, è necessario specificare l'indirizzo completo della pagina che include http:// o l'indirizzo relativo, ovvero solo il nome della pagina (ad esempio /pagina7890.html или /about).
Per creare la navigazione all'interno della pagina, si possono usare i link di ancoraggio (come #contatti). Per aggiungere un'ancora alla pagina, utilizzare il blocco Anchor link della categoria Altro.
Il menu rimane aperto se la larghezza dello schermo è superiore a 1500 px.
Fare clic qui per visualizzare un esempio di questo menu sul sito web
OPZIONI DI PROGETTAZIONE DEL MENU
Menu con carrello, ricerca e preferiti
Come si presenta: Mostra gli articoli nel carrello, gli articoli aggiunti ai preferiti e un widget di ricerca nel menu vicino alla sezione di navigazione.
Per cosa può essere utilizzato: Il menu è utile per il Catalogo prodotti per visualizzare in modo conciso il carrello, il widget di ricerca del sito e i Preferiti.
Come configurarlo: Aggiungere il blocco ME401 alla pagina → scheda Contenuto → Carrello, Ricerca e Preferiti → selezionare le caselle di controllo per mostrare le icone necessarie nel menu.
Selezionare la casella di controllo "Non mostrare i pulsanti nativi dei widget" per visualizzare le icone solo nel menu.
Quindi aggiungere il blocco carrello ST100, il blocco widget di ricerca T985 e il blocco Preferiti ST110 e pubblicare la pagina.
Fatto.
Questa funzione funziona per tutti i blocchi di menu numerati ME4XX.
Fare clic qui per visualizzare un esempio di questo menu sul sito web
Opzioni di visualizzazione: Se si desidera mostrare sia le icone che il pulsante del widget Preferiti nel menu, deselezionare "Non mostrare i pulsanti del widget nativo" nella scheda Contenuto del blocco ME401.
È possibile nascondere l'icona del widget per i blocchi ST100 Carrello e T985 Ricerca nella scheda "Altre impostazioni" delle Impostazioni del blocco, selezionando la casella di controllo "Non mostrare il pulsante del widget". Pubblicare la pagina.
Fatto! Nel menu vengono visualizzate tre icone e un widget separato per i Preferiti. È possibile configurare la visibilità del widget del carrello o della ricerca in modo analogo.
Fare clic qui per visualizzare un esempio di questo menu sul sito web
opzioni di progettazione del menu
Create il vostro menu in Zero Block
È possibile creare il proprio menu in Zero Block configurando gli elementi a proprio piacimento e poi fissando il blocco.
Per fissarlo, andare a modificare le Impostazioni di Zero Block → Posizione e Overflow→ selezionare il valore Fisso per fissare il blocco.
È possibile fissare il blocco in alto o in basso nella pagina, nonché configurarlo in modo che appaia in X px (Offset di apparizione). In questo caso, è possibile selezionare un'opzione per l'aspetto dell'animazione - Dissolvenza. Ciò può essere utile, ad esempio, se si desidera che l'intestazione del sito web appaia in pochi scroll e non in una volta sola.
Ecco alcune opzioni chiave per il design dei menu. Se avete nuove idee e volete condividerle, inviate via e-mail il link al vostro sito web a team@tilda.cc con "Menu design" nell'oggetto. Grazie!
In bocca al lupo per i vostri esperimenti di design!
Il sito web che stavate sognando inizia proprio qui.