Guía de aprendizaje: Creación de un enlace de menú desplegable

Puede crear y utilizar menús desplegables, o menús anidados, para mejorar el uso del Portal del desarrollador .

Antes de empezar

Debe tener un Portal del desarrollador habilitado y debe tener acceso de administrador para completar esta guía de aprendizaje. La guía de aprendizaje Creación del portal explica cómo habilitar el portal si todavía no lo ha hecho.

Acerca de esta guía de aprendizaje

En esta guía de aprendizaje, creará un enlace de menú desplegable en el menú Main navigation .

Nota:

Aunque se pueden crear enlaces de menú desplegable en el Portal del desarrollador, el menú desplegable no se expande por defecto. Para hacer que el menú desplegable se expanda, es necesario utilizar el módulo Superfish.

Esta guía de aprendizaje le guiará por los pasos siguientes:
  1. Añadir enlaces de menú al menú de navegación principal.
  2. Haga que el menú desplegable se expanda utilizando el módulo Superfish.

La primera página Main navigation se muestra así antes de realizar los cambios. Una captura de pantalla de la primera página original

Añadir enlaces de menú al menú de navegación principal

  1. Inicie sesión en el Portal del desarrollador como administrador.
  2. Navega hasta Estructura > Menús.
  3. En la lista de títulos, busque Main navigation. Haga clic en el icono de la flecha situado junto al menú Edición y seleccione Añadir enlace.

    Seleccione Añadir enlace en el menú desplegable

  4. Complete los siguientes pasos para añadir un nuevo enlace de menú:
    1. En el campo Menu link title, introduzca APIs.
    2. En el campo Link, introduzca /api.
    3. En Configuración de la pantalla, seleccione la casilla Mostrar como expandido.
    4. Pulse Guardar para guardar los cambios.

      Página para añadir un nuevo enlace de menú

      Importante: Asegúrese de que la casilla Mostrar como expandido está seleccionada ya que este es el enlace padre para los enlaces del submenú.
  5. Complete los siguientes pasos para añadir otro enlace de menú al menú de navegación principal:
    1. En la página Editar menú Navegación principal, haga clic en +Añadir enlace.
    2. En el campo Menu link title, introduzca API One.
    3. En el campo Link, introduzca /product/10/api/5.
    4. En Enlace padre, seleccione -- APIs.
    5. Pulse Guardar para guardar los cambios.

      Página para añadir API One

  6. Complete los siguientes pasos para añadir otro enlace de menú al menú de navegación principal:
    1. En la página Editar menú Navegación principal, haga clic en +Añadir enlace.
    2. En el campo Menu link title, introduzca API Two.
    3. En el campo Link, introduzca /product/10/api/9.
    4. En Enlace padre, seleccione -- APIs.
    5. En Configuración de la pantalla, seleccione 1en el campo Peso.
    6. Pulse Guardar.

      Página para añadir API Dos

  7. La jerarquía de los enlaces del menú tiene ahora este aspecto:

    Muestra el orden de los enlaces del menú para la navegación principal

  8. Vaya a la página de inicio. El enlace de menú APIs que has añadido al menú de navegación principal sí aparece, pero los enlaces de los submenús no se expanden al pasar el ratón por encima. Menú principal con enlace de API

Haga que el menú desplegable se expanda utilizando el módulo Superfish

Para que el menú desplegable se expanda cuando pase el cursor por encima del mismo, debe utilizar el módulo Superfish y configurar el Block Layout.

  1. Haz clic en Extender.
  2. En el campo Filter, introduzca superfish y marque la casilla Superfish.
  3. Haga clic en Habilitar para habilitar el módulo.

    Muestra la página de habilitación de superfish

  4. Navegue hasta Estructura > Diseño de bloques.
  5. En Bloquear, busque " Main menu, haga clic en el icono de flecha junto a Configurar y seleccione Desactivar.

    Muestra la página para desactivar el menú principal

  6. Haga clic en Colocar bloque para Navegación y busque main navigation en el cuadro. Los resultados filtrados pueden mostrar dos o más opciones. Pulse Colocar bloque para el Main navigation con la categoría Superfish.

    Muestra la página de bloques de contenido

  7. Desactive la casilla Display title y haga clic en Guardar bloque.

  8. Arrastre Main navigation para que esté bajo Site branding.

  9. Haga clic en Guardar bloques para guardar los cambios.
  10. Vaya a la página de inicio. El enlace de menú APIs que ha añadido al menú de navegación principal se expande ahora cuando pasa el cursor por encima del mismo.

    mostrar el menú principal final con la actualización

Qué ha hecho en esta guía de aprendizaje

Ha creado un enlace de menú desplegable en el menú Main navigation .

Qué hacer a continuación

Puede considerar cualquier otro uso del menú desplegable para mejorar la experiencia de los usuarios en el Portal del desarrollador.