Come progettare un menu del sito Web
Opzioni di progettazione del menu, personalizzazione, suggerimenti ed esempi
Esplora 7 design di menu per siti Web, scopri come personalizzarli e scopri come utilizzarli.
Questa guida si concentra sulla progettazione del menu: come appare il menu e come funziona. Se vuoi imparare come progettare un menu del sito web, visualizzarlo su ogni pagina del tuo sito web o creare un menu di navigazione per una particolare pagina web, ti consigliamo di leggere un'altra guida:
Il menu di navigazione è un elenco di collegamenti che portano a varie pagine del tuo sito Web o a sezioni specifiche all'interno di una determinata pagina Web. Aiuta i visitatori del sito Web a navigare tra le pagine del sito Web o le diverse sezioni di una pagina specifica.
Suggerimenti generali
>
Il menu dovrebbe aiutare i visitatori del sito Web a trovare le informazioni in modo rapido e semplice
>
Il menu dovrebbe essere conciso
>
Mantenere il numero di voci di menu al minimo
>
Aggiungere non più di cinque voci di menu a una barra di navigazione
>
Crea voci di menu non più lunghe di una parola
>
È meglio se quella parola è breve
>
Non sovradimensionare la barra di navigazione del menu in quanto non dovrebbe distrarre l'utente dal contenuto del tuo sito web
Esempi di buoni progetti di menu
Opzioni di progettazione del menu
Menù statico trasparente sopra la copertina
Che aspetto ha:
Tale menu è appuntato nella parte superiore della pagina per non distrarre i visitatori del sito Web dal contenuto e possono trovarlo facilmente quando necessario poiché è fissato in un punto specifico della pagina.
Tale menu è appuntato nella parte superiore della pagina per non distrarre i visitatori del sito Web dal contenuto e possono trovarlo facilmente quando necessario poiché è 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%.
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%.
Clicca qui per visualizzare un esempio di menu statico trasparente sul sito web
Opzioni di progettazione del menu
Menù fisso
Che aspetto ha:
Tale menu è sempre visibile sulla pagina ed è facilmente accessibile da qualsiasi punto della pagina. Di solito ha uno sfondo trasparente nella parte superiore della pagina (sulla copertina) che diventa opaco allo scroll.
Tale menu è sempre visibile sulla pagina ed è facilmente accessibile da qualsiasi punto della pagina. Di solito ha uno sfondo trasparente nella parte superiore della pagina (sulla copertina) che diventa opaco allo scroll.
Come configurarlo:
Aggiungere un blocco ME301 alla pagina e applicare le seguenti impostazioni:
Impostazioni principali → comportamento della posizione del menu: Risolto su scorrimento.
Sfondo del menu → Colore di sfondo del menu. Pick un colore.
Sfondo del menu → Opacità dello sfondo del menu: 0%.
Sfondo del menu → Opacità dello sfondo del menu sullo scorrimento: 80%.
Aggiungere un blocco ME301 alla pagina e applicare le seguenti impostazioni:
Impostazioni principali → comportamento della posizione del menu: Risolto su scorrimento.
Sfondo del menu → Colore di sfondo del menu. Pick un colore.
Sfondo del menu → Opacità dello sfondo del menu: 0%.
Sfondo del menu → Opacità dello sfondo del menu sullo scorrimento: 80%.
Clicca qui per visualizzare un esempio di menu fisso sul sito web
Opzioni di progettazione del menu
Menu fisso nella parte superiore della pagina,
Menu visualizzato sullo scorrimento
Menu visualizzato sullo scorrimento
Che aspetto ha:
Questo menu è simile a quello descritto sopra. Ciò che lo rende diverso è un altro menu che appare sullo scorrimento e presenta ancora più elementi. Ad esempio, il menu di navigazione in alto contiene un logo, alcune voci di menu che portano a diverse pagine del sito Web e alcuni collegamenti ai social media. Quando l'utente scorre la pagina, viene visualizzata un'altra barra dei menu con un logo, un invito all'azione e un pulsante di callback.
Questo menu è simile a quello descritto sopra. Ciò che lo rende diverso è un altro menu che appare sullo scorrimento e presenta ancora più elementi. Ad esempio, il menu di navigazione in alto contiene un logo, alcune voci di menu che portano a diverse pagine del sito Web e alcuni collegamenti ai social media. Quando l'utente scorre la pagina, viene visualizzata un'altra barra dei menu con un logo, un invito all'azione e un pulsante di callback.
Come configurarlo:
Aggiungere un blocco ME301 alla pagina e applicare le seguenti impostazioni:
Menu Uno (situato nella parte superiore della pagina)
Impostazioni principali → Comportamento posizione menu: Assoluto.
Sfondo del menu → Opacità dello sfondo del menu: 0%.
Menu Due (visualizzato sullo scorrimento)
Impostazioni principali → Comportamento della posizione del menu: Risolto sullo scorrimento.
Impostazioni principali → menu Mostra quando la pagina viene fatta scorrere verso il basso in pixel: 600px.
Sfondo del menu → Colore di sfondo del menu. Scegli un colore.
Sfondo del menu → Opacità dello sfondo del menu: 70%.
Aggiungere un blocco ME301 alla pagina e applicare le seguenti impostazioni:
Menu Uno (situato nella parte superiore della pagina)
Impostazioni principali → Comportamento posizione menu: Assoluto.
Sfondo del menu → Opacità dello sfondo del menu: 0%.
Menu Due (visualizzato sullo scorrimento)
Impostazioni principali → Comportamento della posizione del menu: Risolto sullo scorrimento.
Impostazioni principali → menu Mostra quando la pagina viene fatta scorrere verso il basso in pixel: 600px.
Sfondo del menu → Colore di sfondo del menu. Scegli un colore.
Sfondo del menu → Opacità dello sfondo del menu: 70%.
Clicca qui per visualizzare gli esempi di questi menu su un sito web
Opzioni di progettazione del menu
Menù Hamburger
Che aspetto ha:
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 puoi usarlo:
Tale menu è perfetto per il tuo sito web se vuoi 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 modalità di visualizzazione del menu su diversi dispositivi.
Ad esempio, puoi optare per un menu normale che appaia solo sulla versione desktop del tuo sito web e rendere il menu hamburger visibile esclusivamente sui dispositivi mobili.
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 puoi usarlo:
Tale menu è perfetto per il tuo sito web se vuoi 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 modalità di visualizzazione del menu su diversi dispositivi.
Ad esempio, puoi optare per un menu normale che appaia solo sulla versione desktop del tuo sito web e rendere il menu hamburger visibile esclusivamente 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 e il colore del testo della voce di menu.
Ad esempio, è possibile applicare le seguenti impostazioni:
Impostazioni principali → comportamento della posizione del menu: Risolto su scorrimento.
Voce di menu → Colore. Scegli il nero.
Sfondo del menu → Colore di sfondo del menu compresso. Rendilo trasparente.
Sfondo del menu → Colore di sfondo del menu espanso. Scegli il bianco.
Aggiungere un blocco ME401/402/403/404/405 alla pagina, impostare il comportamento della posizione del menu, il colore dell'icona del menu e il colore del testo della voce di menu.
Ad esempio, è possibile applicare le seguenti impostazioni:
Impostazioni principali → comportamento della posizione del menu: Risolto su scorrimento.
Voce di menu → Colore. Scegli il nero.
Sfondo del menu → Colore di sfondo del menu compresso. Rendilo trasparente.
Sfondo del menu → Colore di sfondo del menu espanso. Scegli il bianco.
Clicca qui per vedere un esempio di menu hamburger sul sito web
Opzioni di progettazione del menu
Menù multilivello
Cosa sembra:
Quando si fa clic su una voce di menu viene visualizzato un menu a discesa.
Per cosa puoi usarlo:
Grandi siti web con una struttura avanzata.
Quando si fa clic su una voce di menu viene visualizzato un menu a discesa.
Per cosa puoi usarlo:
Grandi siti web con una struttura avanzata.
Come configurarlo:
Aggiungete il blocco ME301 alla pagina, impostate un menu simile a quello descritto sopra, quindi aggiungete Sottovoci nel pannello Contenuto del blocco.
1. Aprire il pannello Contenuto del blocco → voci di menu → Aggiungi sottovoci.
2. Fare clic sull'icona più accanto a un elemento, immettere un titolo di sottoelemento e assegnare un collegamento. Ripetere l'operazione fino ad aggiungere tutti i sottoelementi necessari.
3. Aprire il pannello Impostazioni del blocco → Impostazioni sottomenu. Seleziona la casella di controllo "Visualizza icona menu di secondo livello".
Si prega di notare che la voce del menu principale non sarà cliccabile. Se si desidera renderlo selezionabile, creare una sottovoce duplicata nel menu a discesa.
Aggiungete il blocco ME301 alla pagina, impostate un menu simile a quello descritto sopra, quindi aggiungete Sottovoci nel pannello Contenuto del blocco.
1. Aprire il pannello Contenuto del blocco → voci di menu → Aggiungi sottovoci.
2. Fare clic sull'icona più accanto a un elemento, immettere un titolo di sottoelemento e assegnare un collegamento. Ripetere l'operazione fino ad aggiungere tutti i sottoelementi necessari.
3. Aprire il pannello Impostazioni del blocco → Impostazioni sottomenu. Seleziona la casella di controllo "Visualizza icona menu di secondo livello".
Si prega di notare che la voce del menu principale non sarà cliccabile. Se si desidera renderlo selezionabile, creare una sottovoce duplicata nel menu a discesa.
Clicca qui per visualizzare un esempio di menu multilivello sul sito web
Opzioni di progettazione del menu
Tab
Cosa sembra:
Una scheda attiva consente agli utenti di sfogliare i contenuti ad essa collegati senza uscire dalla pagina web.
Per cosa puoi usarlo:
Le schede ti consentono di mostrare diverse categorie dello stesso tipo di contenuto, come diverse categorie di lavori all'interno di un portfolio.
Una scheda attiva consente agli utenti di sfogliare i contenuti ad essa collegati senza uscire dalla pagina web.
Per cosa puoi usarlo:
Le schede ti consentono di mostrare diverse categorie dello stesso tipo di contenuto, come 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 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. Aggiungi gli ID dei blocchi che dovrebbero essere visibili quando fai clic sulla scheda (separali con una virgola, senza spazio).
Nota: puoi copiare l'ID del blocco nel pannello Impostazioni del blocco: scorri verso il basso fino alla fine del pannello per trovarlo.
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 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. Aggiungi gli ID dei blocchi che dovrebbero essere visibili quando fai clic sulla scheda (separali con una virgola, senza spazio).
Nota: puoi copiare l'ID del blocco nel pannello Impostazioni del blocco: scorri verso il basso fino alla fine del pannello per trovarlo.
Clicca qui per visualizzare un esempio di questo menu sul sito web
Opzioni di progettazione del menu
Menu con carrello, ricerca e preferiti
Cosa sembra:
Visualizza gli articoli nel carrello, gli articoli aggiunti ai preferiti e un widget di ricerca nel menu vicino alla sezione di navigazione.
Per cosa puoi usarlo:
Il menu è utile per ilCatalogo dei prodottiutenti per visualizzare il carrello della spesa, il widget di ricerca del sito Web e i Preferiti in modo conciso.
Visualizza gli articoli nel carrello, gli articoli aggiunti ai preferiti e un widget di ricerca nel menu vicino alla sezione di navigazione.
Per cosa puoi usarlo:
Il menu è utile per ilCatalogo dei prodottiutenti per visualizzare il carrello della spesa, il widget di ricerca del sito Web e i Preferiti in modo conciso.
Come configurarlo:
Aggiungere il blocco ME401 alla pagina → scheda Contenuto → Carrello, Ricerca e Preferiti → selezionare le caselle di controllo per visualizzare le icone necessarie nel menu.
Seleziona la casella di controllo "Non mostrare i pulsanti widget nativi" per visualizzare le icone solo nel menu.
Aggiungere il blocco ME401 alla pagina → scheda Contenuto → Carrello, Ricerca e Preferiti → selezionare le caselle di controllo per visualizzare le icone necessarie nel menu.
Seleziona la casella di controllo "Non mostrare i pulsanti widget nativi" per visualizzare le icone solo nel menu.
Quindi aggiungi il blocco carrello ST100, il blocco widget di ricerca T985 e il blocco Preferiti ST110 e pubblica la pagina.
Fatto.
Questa funzione funziona per tutti i blocchi di menu numerati ME4XX.
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 visualizzare entrambe le icone e il pulsante Preferiti widget nel menu, deselezionare "Non mostrare pulsanti widget nativi" nella scheda Contenuto del blocco ME401.
Se si desidera visualizzare entrambe le icone e il pulsante Preferiti widget nel menu, deselezionare "Non mostrare pulsanti widget nativi" nella scheda Contenuto del blocco ME401.
È possibile nascondere l'icona del widget per i blocchi ST100 Shopping cart e T985 Search: nella scheda "Altre impostazioni" nel blocco Impostazioni, selezionare la casella di controllo "Non mostrare il pulsante widget". Pubblicare la pagina.
Fatto! Nel menu vengono visualizzate tre icone e c'è un widget separato per i Preferiti. Puoi configurare la visibilità per il carrello o il widget di ricerca in modo simile.
Fare clic qui per visualizzare un esempio di questo menu sul sito Web
Ecco alcune opzioni chiave per la progettazione dei menu. Se hai nuove idee e desideri condividerle, invia un'e-mail con il collegamento al tuo sito Web a team@tilda.cc con la dicitura "Design del menu" nella riga dell'oggetto. Grazie!
Buona fortuna con i tuoi esperimenti di progettazione!
Buona fortuna con i tuoi esperimenti di progettazione!
Il sito web che hai sempre sognato inizia proprio qui
