Cómo diseñar un menú web

Esta guía se centra en el diseño del menú: cómo es y cómo funciona. Si quieres aprender a diseñar un menú web, mostrarlo en todas las páginas de tu sitio web o crear un menú de navegación para una página web concreta, te recomendamos que leas otra guía:

Qué aspecto tiene:
Este tipo de menú se fija en la parte superior de la página para no distraer a los visitantes del sitio web del contenido, y pueden encontrarlo fácilmente cuando sea necesario, ya que está fijado en un lugar específico de la página.

Cómo configurarlo:

Añade un bloque ME301 a la página y aplica los siguientes ajustes:

Ajustes principales → Comportamiento de la posición del menú: Absoluta.
Fondo del menú → Opacidad del fondo del menú: 0%.

Qué aspecto tiene:
Un menú de este tipo está siempre visible en la página y se puede acceder a él fácilmente desde cualquier lugar de la misma. Suele tener un fondo transparente en la parte superior de la página (en la portada) que se vuelve opaco al desplazarse.

Cómo configurarlo:

Añade un bloque ME301 a la página y aplica los siguientes ajustes:

Ajustes principales → Comportamiento de la posición del menú: Fijo al desplazarse.
Fondo del menú → Color de fondo del menú. Elijaun color.
Fondo del menú → Opacidad delfondo del menú : 0%.
Fondo del menú → Opacidad del fondo del menú al desplazarse: 80%.

Qué aspecto tiene:
Este menú es similar al descrito anteriormente. Lo que lo hace diferente es otro menú que aparece al desplazarse y que contiene aún más elementos. Por ejemplo, el menú de navegación superior contiene un logotipo, algunos elementos de menú que llevan a distintas páginas del sitio web y algunos enlaces a redes sociales. Cuando el usuario se desplaza por la página, aparece otra barra de menú con un logotipo, una llamada a la acción y un botón de devolución de llamada.

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

Qué aspecto tiene:
El menú hamburguesa son las tres líneas horizontales que aparecen en la parte superior de la pantalla. Cuando el usuario hace clic en él, se abre para revelar un menú de navegación.

Para qué puede utilizarlo:
Un menú de este tipo es perfecto para su sitio web si desea que los visitantes se centren en el contenido sin distraerse con otros elementos de diseño. El menú hamburguesa se suele utilizar en una versión móvil de la web. Puede configurar cómo aparece el menú en los distintos dispositivos.

Por ejemplo, puede optar por un menú normal que aparezca sólo en la versión de escritorio de su sitio web y hacer que el menú hamburguesa sea visible únicamente en los dispositivos móviles.

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

Qué aspecto tiene:
Una pestaña activa permite a los usuarios navegar por el contenido vinculado a ella sin salir de la página web.

Para qué sirve:
Las pestañas permiten mostrar varias categorías del mismo tipo de contenido, como diferentes categorías de obras dentro de un portafolio.

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.

Cómo configurarlo:
Añade el bloque ME401 a la página → pestaña Contenido → Carrito, Búsqueda y Favoritos → selecciona las casillas de verificación para mostrar los iconos que necesites en el menú.

Selecciona la casilla "No mostrar botones nativos del widget" para mostrar los iconos solo en el menú.

A continuación, añada el bloque de carrito de la compra ST100, el bloque de widget de búsqueda T985 y el bloque de favoritos ST110 y publique la página.

Listo.

Esta función funciona para todos los bloques de menú numerados ME4XX.

Opciones de visualización:
Si quieres mostrar tanto los iconos como el botón del widget Favoritos en el menú, desmarca la opción "No mostrar botones nativos del widget" en la pestaña Contenido del bloque ME401.

Puedes ocultar el icono del widget para los bloques ST100 Cesta de la compra y T985 Búsqueda-en la pestaña "Más ajustes" del bloque Ajustes, selecciona la casilla "No mostrar el botón del widget". Publica la página.

Listo. Se muestran tres iconos en el menú y hay un widget separado para Favoritos. Puede configurar la visibilidad de la cesta de la compra o el widget de búsqueda de forma similar.

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.

Estas son algunas de las principales opciones de diseño de menús. Si tiene nuevas ideas y quiere compartirlas, envíe por correo electrónico el enlace a su sitio web a team@tilda.cc con la palabra "Menu design" en el asunto. Gracias!

¡Suerte con tus experimentos de diseño!