Creación de un menú I
Un menú de navegación se puede crear de diferentes formas, pero la forma más ordenada y eficaz es utilizar listas en HTML con las etiquetas <ul> y <li>.
Vamos a crear una lista con 4 elementos típicos de un menú como ejemplo.
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Contacto</a></li>
</ul>
La lista quedaría algo así:
En la lista introducimos los enlaces a las diferentes secciones.
Tal como está, nos valdría como menú de navegación, pero vamos a darle un diseño atractivo con CSS.
Empezamos por quitar los puntos de la lista con una regla para el elemento <ul>.
El atributo list-style-type modifica el diseño de los puntos de la lista, en este caso queremos que no tenga, así que le damos el valor none.
Y ponemos margen y relleno a 0 para evitar problemas de posicionamiento.
Vamos a modificar un par de propiedades a los enlaces para crear "bloques" en lugar de texto.
De esta forma el menú será más similar a la pulsación de botones en lugar de enlaces de texto.
Nota: la propiedad display cambia el tipo de elemento en bloque (block) o en línea (inline). Puede convertir un elemento en línea a elemento en bloque y viceversa.
Aún así, ahora no se aprecia visualmente.
Pero si pasamos el ratón por la derecha del texto, veremos que el enlace es el ancho de 70px que le hemos dado.
Este es el aspecto de nuestro menú ahora mismo.
Para terminar de diseñar un menú atractivo, podemos darle color a los elementos y quitamos el subrayado a los enlaces para mejorar su aspecto.
Hemos añadido las líneas resaltadas en blanco, en orden: color de fondo, color de fuente, eliminado el subrayado y un pequeño relleno.
Nuestro menú está casi acabado:
Podemos mejorar el aspecto añadiendo un diseño con la pseudo-clase :hover.
En nuestro caso hemos modificado el color de fondo, pero podemos hacerlo como queramos.
Y quedaría así:
