Pontificia Universidad Católica de Chile
Kit Digital
Sistema para diseñar y construir interfaces de sitios web para la UC
  • Inicio
  • Diseño
  • Desarrollo
  • Contenido
  • Ejemplos
  • Checklist
Kit Digital de la UC
  • Inicio
  • Diseño arrow_forward_ios
    • arrow_back_ios
      Diseño
    • Principios del Diseño
    • Experiencia de Usuario
    • Color
    • Tipografía
    • Grilla
    • Formas
    • Recursos
  • Desarrollo arrow_forward_ios
    • arrow_back_ios
      Desarrollo
    • Introducción arrow_forward_ios
      • arrow_back_ios Introducción
      • Instalación
      • Metodología
      • Compatibilidad de navegadores
      • Notas sobre las versiones distribuidas
    • Componentes de base arrow_forward_ios
      • arrow_back_ios Componentes de base
      • Grilla
      • Tipografía
      • Espaciado y Márgenes
      • Íconos
    • Componentes de navegación arrow_forward_ios
      • arrow_back_ios Componentes de navegación
      • Botones
      • Breadcrumbs
      • Etiquetas [Tags]
      • Header
      • Footer
      • Topbar y Footer glabales
      • Menú móvil
      • Menú desplegable
      • Menú lateral
      • Paginador
      • Pasos [Steps]
      • Pestañas [Tabs]
    • Componentes de contenido arrow_forward_ios
      • arrow_back_ios Componentes de contenido
      • Acordeón
      • Cards
      • Carrusel
      • Citas
      • Colapsables
      • Divisores
      • Cards de evento
      • Filtros
      • Listas
      • Tablas
    • Componentes de formulario arrow_forward_ios
      • arrow_back_ios Componentes de formulario
      • Formulario
    • Componentes de alerta arrow_forward_ios
      • arrow_back_ios Componentes de alerta
      • Mensajes y Alertas
      • Modales
      • Tooltips
  • Contenido arrow_forward_ios
    • arrow_back_ios
      Contenido
    • ¿Cómo optimizamos nuestros contenidos? arrow_forward_ios
      • arrow_back_ios ¿Cómo optimizamos nuestros contenidos?
      • Antes de empezar
      • ¿Cómo mejorar títulos y subtítulos?
      • ¿Cómo trabajar los textos?
      • ¿Con qué criterios incluir enlaces?
      • ¿Cómo optimizar las fotos?
    • Recursos online arrow_forward_ios
      • arrow_back_ios Recursos online
      • Bancos de imágenes gratuitos
      • Pautas de lenguaje fácil para hacer textos accesibles
      • Manual de estilo UC para textos
      • Autorización de uso de imagen
  • Ejemplos
  • Checklist
    Introducción
  • Instalación keyboard_arrow_right
  • Metodología keyboard_arrow_right
  • Comp. Navegadores keyboard_arrow_right
  • Notas sobre las versiones keyboard_arrow_right
    Componentes
    Base
  • Grillakeyboard_arrow_right
  • Tipografíakeyboard_arrow_right
  • Espaciado y márgeneskeyboard_arrow_right
  • Íconoskeyboard_arrow_right
  • Navegación
  • BotonesActualizadokeyboard_arrow_right
  • Breadcrumbskeyboard_arrow_right
  • EcosistemaNuevokeyboard_arrow_right
  • Etiquetas [Tags] keyboard_arrow_right
  • HeaderActualizadokeyboard_arrow_right
  • Footerkeyboard_arrow_right
  • Topbar y Footer globaleskeyboard_arrow_right
  • Menú móvilkeyboard_arrow_right
  • Menú desplegablekeyboard_arrow_right
  • Menú lateralNuevokeyboard_arrow_right
  • Paginadorkeyboard_arrow_right
  • Pasos [Steps]keyboard_arrow_right
  • Pestañas [Tabs]keyboard_arrow_right
  • Contenido
  • Avatareskeyboard_arrow_right
  • Acordeónkeyboard_arrow_right
  • CardsActualizadokeyboard_arrow_right
  • Carrusel principalActualizadokeyboard_arrow_right
  • Carrusel de cardsActualizadokeyboard_arrow_right
  • CitasActualizadokeyboard_arrow_right
  • Colapsableskeyboard_arrow_right
  • Divisoreskeyboard_arrow_right
  • Eventoskeyboard_arrow_right
  • Filtroskeyboard_arrow_right
  • GaleriaNuevokeyboard_arrow_right
  • HeroActualizadokeyboard_arrow_right
  • Listaskeyboard_arrow_right
  • Tablaskeyboard_arrow_right
  • Formularios
  • Formulario UCActualizadokeyboard_arrow_right Inputs de TextoActualizadokeyboard_arrow_right SelectorActualizadokeyboard_arrow_right Checkbox, Radio y SwitchActualizadokeyboard_arrow_right SliderActualizadokeyboard_arrow_right
  • Alertas
  • Mensajes y Alertaskeyboard_arrow_right
  • Modaleskeyboard_arrow_right
  • Tooltipskeyboard_arrow_right
  • BadgesNuevokeyboard_arrow_right
  • Accesibilidad
  • Lectores de pantallaNuevokeyboard_arrow_right
    v1.51.2

Menú desplegable


Permite mostrar y ocultar contenido de navegación contextual, como listas de enlaces.

Menú de navegación principal

Este menú principal está orientado a resolver la navegación de mayor jerarquía en un sitio con multiples elementos, y niveles. Aceptado hasta tres niveles de información.

El markup como se muestra a continuación permite ser integrado de manera coherente con estructuras de datos anidados iterativos.

info En el siguiente código se incluye también un ejemplo básico del Menú móvil.

Ítem colapsable

Ejemplo:

El footer del menú desplegable (con color gris) permite incluir un enlace que dirige a la página interior respectiva. En el ejemplo el footer dentro de 'Segundo nivel' debería enviar al usuario a una página interior del mismo nombre

Menú desplegable con footer

Ejemplo:

Ítem de menú

El funcionamiento del menú desplegable es a traves de los atributos data-dtarget en el botón y data-dropdown en el contenido del dropdown. El botón y el contenido deben estar anidado en el elemento .uc-dropdown

Ítem colapsable

Ejemplo:

Pontificia Universidad Católica de Chile
UC Kit Digital
Licencia de Creative Commons
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional
2020 - Dirección Digital UC - direcciondigital@uc.cl