Cómo diseñar un menú web
Opciones de diseño de menús, personalización, consejos y ejemplos
Explore 7 diseños de menús para sitios web, aprenda a personalizarlos y descubra cómo puede utilizarlos.
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:
El menú de navegación es una lista de enlaces que llevan a varias páginas de su sitio web o a secciones específicas dentro de una página web concreta. Ayuda a los visitantes del sitio web a navegar entre las páginas del sitio web o diferentes secciones de una página específica.
Consejos generales
>
El menú debe ayudar a los visitantes del sitio web a encontrar la información rápida y fácilmente
>
El menú debe ser conciso
>
Reducir al mínimo el número de elementos del menú
>
No añada más de cinco elementos de menú a una barra de navegación
>
Los elementos del menú no deben tener más de una palabra
>
Es mejor si esa palabra es corta
>
No sobrediseñe la barra de navegación del menú, ya que no debe distraer al usuario del contenido de su sitio web.
Ejemplos de buenos diseños de menús
OPCIONES DE DISEÑO DEL MENÚ
Menú estático transparente sobre la cubierta
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.
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%.
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%.
Haga clic aquí para ver un ejemplo de menú estático transparente en el sitio web
OPCIONES DE DISEÑO DEL MENÚ
Menú fijo
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.
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%.
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%.
Haga clic aquí para ver un ejemplo de menú fijo en el sitio web
OPCIONES DE DISEÑO DEL MENÚ
Menú fijo en la parte superior de la página,
Menú que aparece al desplazarse
Menú que aparece al desplazarse
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.
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 un bloque 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)
Configuración principal → Comportamiento de la posición del menú: Fijo al desplazarse.
Ajustes principales → Revelar menú cuando la página se desplaza hacia abajo en píxeles: 600px.
Fondo del menú → Color de fondo del menú. Elija un color.
Fondo del menú → Opacidad del fondo del menú: 70%.
Añade un bloque 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)
Configuración principal → Comportamiento de la posición del menú: Fijo al desplazarse.
Ajustes principales → Revelar menú cuando la página se desplaza hacia abajo en píxeles: 600px.
Fondo del menú → Color de fondo del menú. Elija un color.
Fondo del menú → Opacidad del fondo del menú: 70%.
Haga clic aquí para ver ejemplos de estos menús en un sitio web
OPCIONES DE DISEÑO DEL MENÚ
Menú Hamburguesa
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.
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ú y el color del texto del elemento del menú.
Por ejemplo, puede aplicar los siguientes ajustes:
Ajustes principales → Comportamiento de la posición del menú: Fijo al desplazarse.
Elemento 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.
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ú y el color del texto del elemento del menú.
Por ejemplo, puede aplicar los siguientes ajustes:
Ajustes principales → Comportamiento de la posición del menú: Fijo al desplazarse.
Elemento 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.
Haga clic aquí para ver un ejemplo de menú de hamburguesa en el sitio web
OPCIONES DE DISEÑO DEL MENÚ
Menú multinivel
Qué aspecto tiene:
Aparece un menú desplegable cuando haces clic en un elemento del menú.
Para qué sirve:
Sitios web grandes con una estructura avanzada.
Aparece un menú desplegable cuando haces clic en un elemento del menú.
Para qué sirve:
Sitios web grandes con una estructura avanzada.
Cómo configurarlo:
Añade el bloque ME301 a la página, configura un menú similar al descrito anteriormente y, a continuación, añade Subelementos en el panel Contenido del bloque.
1. Abre el panel Contenido del bloque → Elementos del menú → Añadir subelementos.
2. Haga clic en el icono más situado junto a un elemento, introduzca un título de subelemento y asigne un enlace. Repita el proceso hasta añadir todos los subelementos necesarios.
3. Abra el panel Configuración del bloque → Configuración del submenú. Seleccione la casilla de verificación "Mostrar icono de menú de segundo nivel".
Tenga en cuenta que no se podrá hacer clic en el propio elemento del menú principal. Si quieres que se pueda hacer clic en él, crea un subelemento duplicado en el menú desplegable.
Añade el bloque ME301 a la página, configura un menú similar al descrito anteriormente y, a continuación, añade Subelementos en el panel Contenido del bloque.
1. Abre el panel Contenido del bloque → Elementos del menú → Añadir subelementos.
2. Haga clic en el icono más situado junto a un elemento, introduzca un título de subelemento y asigne un enlace. Repita el proceso hasta añadir todos los subelementos necesarios.
3. Abra el panel Configuración del bloque → Configuración del submenú. Seleccione la casilla de verificación "Mostrar icono de menú de segundo nivel".
Tenga en cuenta que no se podrá hacer clic en el propio elemento del menú principal. Si quieres que se pueda hacer clic en él, crea un subelemento duplicado en el menú desplegable.
Haga clic aquí para ver un ejemplo de menú multinivel en el sitio web
OPCIONES DE DISEÑO DEL MENÚ
Fichas
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.
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.
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.
Haga clic aquí para ver un ejemplo de este menú en el sitio web
OPCIONES DE DISEÑO DEL MENÚ
Menú con carrito, búsqueda y favoritos
Qué aspecto tiene:
Muestra los artículos en el carrito de la compra, los artículos añadidos a favoritos y un widget de búsqueda en el menú cerca de la sección de navegación.
Para qué se puede utilizar:
El menú es útil para el Catálogo de productos para mostrar de forma concisa la cesta de la compra, el widget de búsqueda del sitio web y los Favoritos.
Muestra los artículos en el carrito de la compra, los artículos añadidos a favoritos y un widget de búsqueda en el menú cerca de la sección de navegación.
Para qué se puede utilizar:
El menú es útil para el Catálogo de productos para mostrar de forma concisa la cesta de la compra, el widget de búsqueda del sitio web y los Favoritos.
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ñ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.
Esta función funciona para todos los bloques de menú numerados ME4XX.
Haga clic aquí para ver un ejemplo de este menú en el sitio web
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.
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.
Haga clic aquí para ver un ejemplo de este menú en el sitio web
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!
¡Suerte con tus experimentos de diseño!
El sitio web con el que sueñas empieza aquí.
