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ú lateral


Permite ampliar la navegación de un sitio y su contenido, disponibilizar rapidamente contenido contextual el cual se esta visualizando.

Implementación estandar

A continuación se muestra el codigo para implementar un menu completo basado en jerarquía de elementos de listas, ul y li.

Considerar que para los elementos disabled, como en item Color del ejemplo, se deben usar la propiedad html tabindex="-1" en los links <a> para saltar la nevagación por teclado.


Menú completo

Ejemplo:

  • Principios keyboard_arrow_right
    • De experiencia de usuario keyboard_arrow_right
  • Color keyboard_arrow_right
    • Paletas de color keyboard_arrow_right
    • Criterios de aplicación keyboard_arrow_right
  • Tipografía keyboard_arrow_right
    • Escala tipográfica keyboard_arrow_right
  • Grilla keyboard_arrow_right
    • Columnas keyboard_arrow_right
    • Espaciado keyboard_arrow_right
  • Formas keyboard_arrow_right
    • Radio (Redondeado) keyboard_arrow_right
    • Sombreado keyboard_arrow_right
  • Recursos keyboard_arrow_right
    • Librería Sketch keyboard_arrow_right
    • Librería de Iconos keyboard_arrow_right
    • Elementos institucionales keyboard_arrow_right
Copiar
    
    

Implementación de alto fijo

En algunos casos se puede requerir acortar el alto de la barra lateral. A continuación se ejemplifica su uso dentro de un contenedor, de alto de 390px.

Menú con alto fijo

Ejemplo:

  • Principios keyboard_arrow_right
    • De experiencia de usuario keyboard_arrow_right
  • Color keyboard_arrow_right
    • Paletas de color keyboard_arrow_right
    • Criterios de aplicación keyboard_arrow_right
  • Tipografía keyboard_arrow_right
    • Escala tipográfica keyboard_arrow_right
  • Grilla keyboard_arrow_right
    • Columnas keyboard_arrow_right
    • Espaciado keyboard_arrow_right
  • Formas keyboard_arrow_right
    • Radio (Redondeado) keyboard_arrow_right
    • Sombreado keyboard_arrow_right
  • Recursos keyboard_arrow_right
    • Librería Sketch keyboard_arrow_right
    • Librería de Iconos keyboard_arrow_right
    • Elementos institucionales keyboard_arrow_right
Copiar
    
    
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