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
Licenciada en Informática con Maestría en Tecnologías de la Información. Docente por convicción con trece años de experiencia, desarrolladora desde hace nueve años trabajando actualmente con desarrollo WEB para alta disponibilidad, además de ser consultor independiente y capacitador. Participe del movimiento del software libre como fiel apasionada, reconocida por su actividad en la comunidad y su participación en la inclusión.

DEJA UNA RESPUESTA

Please enter your comment!
Please enter your name here