Crear menús desplegables

Un menú desplegable, o submenú, muestra elementos adicionales al mantener el ratón encima o hacer clic en uno de sus elementos. Esta opción permite que el menú se mantenga limpio y organizado. Con esta guía, aprenderás a crear un menú desplegable.

En esta guía

1. Creación de un menú desplegable
2. Añadir un elemento del menú sin enlace

Creación de un menú desplegable

Para crear un menú desplegable, sigue estos pasos:

📌

Para determinar qué sección de esta guía debes seguir, ve al escritorio y consúltalo en la opción Apariencia situada a la izquierda. Si aparece Editor, deberás utilizar la sección Editor del sitio de esta guía. Si aparece otra opción, deberás utilizar las instrucciones de Escritorio o del Personalizador.

Elige la pestaña apropiada para tu interfaz de diseño:

Editor del sitioWP-AdminPersonalizador

En el Editor del sitio, tu menú proviene del bloque Navegación. Para crear un menú desplegable, sigue estos pasos:

1. En tu panel de administración, ve a Apariencia → Editor.
2. Haz clic en el lado derecho de la pantalla para abrir el área de edición.
   • También puedes elegir Patrones y escoger el encabezado u otra parte de la plantilla que contenga el menú.
3. Abre la vista de lista que aparece en la esquina superior izquierda de tu pantalla (es el icono con tres líneas horizontales paralelas).
4. Localiza el bloque Navegación (puede estar anidado en otros bloques como Encabezado, Grupo o Fila).
5. En los ajustes de la barra lateral de la derecha, mantener el cursor encima de un elemento del menú y haz clic en los tres puntos que aparecen.
   • Si no ves la barra lateral a la derecha, es posible que tengas que hacer clic en el icono Ajustes de la esquina superior derecha para que aparezcan los ajustes. Este icono tiene la forma de un cuadrado con dos columnas desiguales.
6. Haz clic en el enlace Añadir submenú.
7. Elige la primera página que quieres que aparezca en el menú desplegable.
8. Repite hasta que hayas añadido todos los elementos del menú.
9. Haz clic en Guardar para guardar tus cambios.

Ralentiza o acelera el vídeo utilizando los controles de la esquina inferior derecha tras hacer clic en Reproducir.

También puedes crear un menú desplegable con la barra de herramientas del bloque Navegación:

1. Haz clic en el elemento del menú que quieras convertir en desplegable.
2. Aparecerá una barra de herramientas sobre este, que contiene el botón Añadir submenú (el icono es una flecha curva con tres líneas horizontales al lado).
3. Haz clic en el botón Añadir submenú de la barra de herramientas para transformar el elemento en un menú desplegable.
4. Haz clic en el icono + o en la opción Añadir enlace que aparece para añadir enlaces nuevos al menú desplegable que acabas de crear.
5. Haz clic en Guardar para guardar tus cambios.

Ralentiza o acelera el vídeo utilizando los controles de la esquina inferior derecha tras hacer clic en Reproducir.

En los sitios con temas clásicos, puedes seguir estos pasos para añadir menús desplegables con WP-Admin:

1. Dirígete al panel de administración.
2. Ve a Apariencia → Menús.
3. Asegúrate de seleccionar el menú correcto en la parte superior de la pantalla.
4. Haz clic y arrastra un elemento del menú a la derecha para «anidarlo» debajo del elemento que está justo encima.
5. Haz clic en el botón «Guardar menú» para guardar tus cambios.

Para deshacer esta operación, puedes arrastrarlos de nuevo hacia la izquierda. Cuando hayas terminado, haz clic en Guardar menú.

En los sitios con temas clásicos, puedes crear menús desplegables con el Personalizador siguiendo estos pasos:

1. Añade todos los elementos del menú que deseas tener en el menú de tu sitio.
2. Haz clic en el enlace «Reordenar» que aparece debajo de los elementos del menú.
3. Haz clic en la flecha hacia la derecha (>) para anidar una página debajo de la anterior y crear un elemento desplegable.
4. Cuando estés satisfecho con tu menú desplegable, haz clic en el botón «Hecho«.
5. Haz clic en el botón «Guardar cambios» para publicar los cambios en el sitio.

Tutorial en vídeo

Añadir un elemento del menú sin enlace

Tienes la posibilidad de crear un elemento del menú en el que no se puede hacer clic. Esta opción resulta muy útil a la hora de crear menús desplegables. El truco consiste en utilizar el símbolo # como enlace del elemento del menú. Aún se puede hacer clic en el elemento, pero no dirige a una página nueva. Sigue estos pasos para crear un elemento de menú «sin hacer clic».

📌

Para determinar qué sección de esta guía debes seguir, ve al escritorio y consúltalo en la opción Apariencia situada a la izquierda. Si aparece Editor, deberás utilizar la sección Editor del sitio de esta guía. Si aparece otra opción, deberás utilizar las instrucciones de Escritorio o del Personalizador.

Elige la pestaña apropiada para tu interfaz de diseño:

Editor del sitioWP-AdminPersonalizador

En el Editor del sitio, tu menú proviene del bloque Navegación. Sigue estos pasos para crear un elemento del menú sin hacer clic:

1. En tu panel de administración, ve a Apariencia → Editor.
2. Elige la plantilla que contiene el menú que quieres editar.
3. Abre la vista de lista que aparece en la esquina superior izquierda de tu pantalla (es el icono con tres líneas horizontales paralelas).
4. Localiza el bloque Navegación (puede estar anidado en otros bloques como Encabezado, Grupo o Fila).
5. Elige el elemento del menú que quieras transformar en un enlace en el que no se pueda hacer clic o añade un nuevo elemento del menú.
6. Aparecerá una barra de herramientas encima del elemento del menú con el botón de enlace (el icono muestra dos eslabones de una cadena).
7. Para editar el enlace, haz clic en el icono del lápiz.
8. En el cuadro URL, introduce únicamente el símbolo #, como se muestra en la imagen de la derecha.
9. Pulsa Intro/Retroceso en el teclado para aplicar el cambio.

El GIF que aparece abajo muestra el proceso:

Para crear un elemento del menú sin enlace, añade un símbolo # en el campo URL.

En los sitios con temas clásicos, puedes seguir estos pasos para añadir un enlace sin hacer clic a tu menú usando WP-Admin:

1. Ve a Apariencia → Menús.
2. Elige el menú que quieras.
3. Haz clic en la sección «Enlaces personalizados» del encabezado «Añadir elementos del menú».
4. En el campo URL, introduce el símbolo #, como se muestra en la imagen de la derecha.
5. En el campo Texto del enlace, introduce el texto que quieres que aparezca en el menú, como se muestra en la imagen de la derecha.
6. Haz clic en el botón «Añadir a menú«.
7. Haz clic en el botón «Guardar menú«.

En los sitios con temas clásicos, puedes seguir estos pasos para añadir un enlace sin hacer clic a tu menú usando el Personalizador:

1. Ve a Apariencia → Personalizar → Menús.
2. Elige el menú que quieras.
3. Haz clic en el botón «Añadir elementos«.
4. Haz clic en la opción Enlaces personalizados.
5. En el campo URL, introduce el símbolo #, como se muestra en la imagen de la derecha.
6. En el campo Texto del enlace, introduce el texto que quieres que aparezca en el menú, como se muestra en la imagen de la derecha.
7. Haz clic en el botón «Añadir a menú«.
8. Haz clic en el botón «Guardar cambios«.