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.

Cómo configurarlo:
Añade dos bloques ME301 a la página y aplica la siguiente configuración:

Menú Uno (situado en la parte superior de la página)
Configuración principal → Comportamiento de la posición del menú: Absoluta.
Fondo del menú → Opacidad del fondo del menú: 0%.

Menú Dos (aparece al desplazarse)
Ajustes principales → Comportamiento de la posición del menú: Fija al desplazarse.
Ajustes principales → Revelar menú tras desplazarse N píxeles
Revelar menú al desplazarse la página en píxeles: 600px.
Fondo del menú → Color de fondo del menú. Elija un color.
Fondo del menú → Opacidad del fondo del menú: 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.

Cómo configurarlo:
Añade un bloque ME401/402/403/404/405 a la página, configura el comportamiento de la posición del menú, el color del icono del menú, el color de fondo del menú y el color de fondo de los elementos del menú.

Por ejemplo, puede aplicar los siguientes ajustes:
Ajustes principales → Comportamiento de la posición del menú: Fijo al desplazarse.
Icono del menú → Color. Elija negro.
Fondo del menú → Color de fondo del menú contraído. Que sea transparente.
Fondo del menú → Color de fondo del menú expandido . Elija blanco.

Cómo configurarlo:

Añade elementos de submenú para el bloque principal o utiliza una combinación de menú ME301 (o cualquier otro bloque con elementos de menú) y ME601.

Elementos de submenú del bloque principal

Añade a la página cualquier bloque de menú que contenga elementos de menú.

Ve a la pestaña Contenido del bloque → Lista de elementos del menú → Añadir subelementos, y verás los iconos más que aparecerán cerca de los elementos del menú.

Haz clic en el icono más cerca de un elemento para el que necesites añadir un subelemento, introduce un título de subelemento y asigna un enlace.

Vuelva a hacer clic en el icono más para añadir un nuevo subelemento.

Los subelementos del menú se mostrarán al pasar el ratón por encima como un menú desplegable. En las versiones móviles, puede abrir el menú con un toque.

Importante: no se podrá hacer clic en el elemento del menú principal. Si quieres que sea clicable, crea un subelemento duplicado en el menú desplegable.

Bloque ME 601

Añade el bloque ME301 a la página, configura el menú como se ha descrito anteriormente y añade el bloque ME601 (Menú: segundo nivel).

El bloque ME601 permite añadir subelementos a los elementos del menú principal. Se mostrarán al pasar el ratón como un menú desplegable. En las versiones móviles, puedes abrir el menú con un toque.

Cómo funciona:
1) En el bloque ME601, escribe un enlace parecido a #submenu:more
2) En el menú principal: En el campo Enlace, cerca del elemento para el que quieras crear subelementos, escribe #submenu:more.

Importante: el elemento del menú principal no será clicable. Si quieres hacerlo clicable, crea un subelemento duplicado en el menú desplegable.

Nota: puedes usar cualquier palabra para "#submenu:more", como por ejemplo: #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.

Cómo configurarlo:
Añade un bloque ME602 o ME603 a la página. Puedes utilizar estos bloques para crear pestañas y mostrar contenido cuando el usuario haga clic en una pestaña dentro de la misma página. A continuación, tienes que añadir bloques en una secuencia que cambiará cuando el usuario haga clic en una pestaña determinada.

Cómo funciona:
1. Añade títulos de pestañas en el panel Contenido del bloque ME602 o ME603.
2. Añade los ID de los bloques que deben ser visibles al hacer clic en la pestaña (sepáralos con una coma, sin espacios).

Nota: Puedes copiar el ID del bloque en el panel Configuración del bloque - desplázate hasta la parte inferior del panel para encontrarlo.

Qué aspecto tiene:
Haciendo clic en el punto del menú, se salta a un bloque específico de la página

Para qué se puede utilizar:
Para redirigir a los usuarios a una sección específica de la página con gran cantidad de contenido.

Qué aspecto tiene:
Menú desplegable de barra lateral que contiene secciones y subsecciones. El menú tiene una posición fija que permite dirigirse a él desde cualquier lugar de la página.

Para qué sirve:
Permite crear una navegación detallada por secciones y subsecciones internas del sitio web, así como añadir búsquedas por páginas.

Cómo configurarlo:

Añade el bloque ME901 a la página, configura los estilos de cómo debe mostrarse el menú utilizando los ajustes del bloque.

El bloque ME901 te permite añadir subsecciones a los elementos del menú principal. Es necesario especificar los enlaces a las subsecciones en la pestaña Contenido del bloque > Lista de elementos del menú.

Como enlace, es necesario especificar la dirección completa de la página incluyendo http:// o la dirección relativa - sólo el nombre de la página (como /page7890.html или /about).

Para crear la navegación dentro de la página, puede utilizar enlaces de anclaje (como #contactos). Para añadir un ancla a la página, utiliza el bloque Enlace de anclaje de la categoría Otros.

El menú permanece abierto si el ancho de la pantalla es superior a 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.

Puedes crear tu propio menú en Zero Block Cero configurando los elementos a tu gusto y luego fijando el bloque.

Para fijarlo, ve a editar la Configuración de Zero Block Block → Posición y desbordamiento→ selecciona el valor Fijo para fijar el bloque.

Puede fijar el bloque en la parte superior o inferior de la página, así como configurarlo para que aparezca en X px (Desplazamiento de aparición). En este caso, puede seleccionar una opción para el aspecto de la animación: Fundido de entrada. Esto puede ser útil, por ejemplo, si quieres que la cabecera de la web aparezca en varios scrolls y no de golpe.

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!