2 min de lectura

Las listas HTML se suelen emplear, además de para su función natural, para la creación de menús de navegación verticales y horizontales. Sin necesidad de scripts y con solo HTML+CSS se pueden lograr menús muy agradables.

Paso 1: Crear la lista con las opciones del menú

Notemos que la lista tiene ya los enlaces, pero estos apuntan dentro de la misma página a ningún lugar.

Paso 2: Dar formato a la lista

Definir la anchura del menú:

Eliminar las viñetas automáticas y todos los márgenes y espaciados aplicados por defecto:

Añadir un borde al menú de navegación y establecer el color de fondo y los bordes de cada elemento del menú:

Aplicar estilos a los enlaces: mostrarlos como un elemento de bloque para que ocupen todo el espacio de cada <li> del menú, añadir un espacio de relleno y modificar los colores y la decoración por defecto:

Compartir
Líder técnico en equipos de desarrollo de software. Profesor de Desarrollo Web en la Universidad de Guadalajara. Emprendedora. Fundadora y CTO de CORB.mx. Ponente y tallerista. Colaboradora en proyectos de software libre y Open Source. Comprometida con la comunidad y la industria de la tecnología. Enfocada en el empoderamiento de las mujeres.

Deja tus comentarios

This site uses Akismet to reduce spam. Learn how your comment data is processed.