Come progettare il menu di un sito web

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:

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%.

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%.

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.

How to set it up:
Add two ME301 blocks to the page and apply the following settings:

Menu One (located on top of the page)
Main settings → Menu position behavior: Absolute.
Menu background → Menu background opacity: 0%.

Menu Two (appearing on scroll)
Main settings → Menu position behavior: Fixed on scroll.
Main settings → Reveal menu after scrolling N pixels
Reveal menu when the page is scrolled down in pixels: 600px.
Menu background → Menu background color. Pick a color.
Menu background → Menu background opacity: 70%.

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.

How to set it up:
Add a ME401/402/403/404/405 block to the page, set up the menu position behavior, the menu icon color, the menu background color, and the menu items background color.

For example, you may apply the following settings:
Main settings → Menu position behavior: Fixed on scroll.
Menu icon → Color. Pick black.
Menu background → Collapsed menu background color. Make it transparent.
Menu background → Expanded menu background color. Pick white.

How to set it up:

Add submenu items for the main block or use a combination of ME301 menu (or any other block with menu items) and ME601.

Main block submenu items

Add any menu block that contains menu items to the page.

Go to the Content tab of the block → List of menu items → Add subitems, and you will see the plus icons that will appear near the menu items.

Click the plus icon near an item that you need to add a subitem for, enter a subitem title, and assign a link.

Click the plus icon again to add a new subitem.

Menu subitems will be displayed on hover as a dropdown menu. In mobile versions, you can open the menu with a tap.

Important: the main menu item itself will not be clickable. If you want to make it clickable, create a duplicate subitem in the drop-down menu.

ME 601 block

Add the ME301 block to the page, configure the menu as described above, and add the ME601 block (Menu: second level).

The ME601 block allows you to add subitems to the main menu items. They will be displayed on hover as a dropdown menu. In mobile versions, you can open the menu with a tap.

How it works:
1) In the ME601 block, write a link that looks like #submenu:more
2) In the main menu: In the Link field, near the item you want to create subitems for, write #submenu:more.

Important: main menu item itself will not be clickable. If you want to make it clickable, create a duplicate subitem in the drop-down menu.

Please note: you can use any word for "#submenu:more", such as: #submenu:portfolio или #submenu:aboutus

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.

How to set it up:
Add a ME602 or ME603 block to the page. You can use these blocks to create tabs and show content when the user clicks a tab within the same page. Below, you need to add blocks in a sequence that will change when the user clicks a particular tab.

How it works:
1. Add tab titles in the Content panel of the ME602 or ME603 block.
2. Add the blocks' IDs that should be visible when you click the tab (separate them with a comma, no space).

Note: You can copy the block's ID in the Settings panel of the block — scroll down to the bottom of the panel to find it.

What it looks like:
By clicking the dot in the menu, you jump to a specific block on the page

What you can use it for:
For redirecting users to a specific section on the page with large amount of content

What it looks like:
Dropdown sidebar menu that contains sections and subsections. The menu has a fixed position that allows you to address it from any place on the page.

What you can use it for:
It allows you to create detailed navigation for website internal sections and subsections, as well as add search for pages.

How to set it up:

Add the ME901 block to the page, configure the styles of how the menu should be displayed by using the block settings.

The ME901 block allows you to add subsections to the main menu items. You need to specify the links to subsections in the Content tab of block > List of menu items.

As a link, you need to specify either the full address of the page including http:// or relative address — just the name of the page (such as /page7890.html или /about).

To create the navigation within the page, you can use anchor links (such as #contacts). To add an anchor to the page, use the Anchor link block from the Other category.

The menu stays open if the screen width is more than 1500 px.

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.

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.

You can create your own menu in Zero Block by configuring the elements as you like it and and then fixing the block.

To fix it, go to editing the Zero Block Settings → Position and Overflow→ select the Fixed value to fix the block.

You can fix the block at the top or at the bottom of the page, as well as configure it so that it appears in X px (Appear Offset). In this case, you can select an option for animation appearance — Fade in. This can be useful, for example, if you want that the website header appears in a few scrolls and not at once.

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!