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ú
|
1 2 3 4 5 6 7 8 |
<ul> <li><a href="#" title="Enlace genérico">Elemento 1</a></li> <li><a href="#" title="Enlace genérico">Elemento 2</a></li> <li><a href="#" title="Enlace genérico">Elemento 3</a></li> <li><a href="#" title="Enlace genérico">Elemento 4</a></li> <li><a href="#" title="Enlace genérico">Elemento 5</a></li> <li><a href="#" title="Enlace genérico">Elemento 6</a></li> </ul> |
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ú:
|
1 2 3 |
ul.menu { width: 180px; } |
Eliminar las viñetas automáticas y todos los márgenes y espaciados aplicados por defecto:
|
1 2 3 4 5 6 |
ul.menu { <em>width: 180px;</em> list-style: none; margin: 0; padding: 0; } |
Añadir un borde al menú de navegación y establecer el color de fondo y los bordes de cada elemento del menú:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
ul.menu { <em>width: 180px;</em> <em>list-style: none;</em> <em>margin: 0;</em> <em>padding: 0;</em> border: 1px solid #7C7C7C; border-bottom: none; } ul.menu li { border-bottom: 1px solid #7C7C7C; border-top: 1px solid #FFF; background: #F4F4F4; } |
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:
|
1 2 3 4 5 6 |
ul.menu li a { padding: .2em 0 .2em .5em; display: block; text-decoration: none; color: #333; } |
¿Te gustó este artículo?
Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.
