Creación de un menú II
En la lección anterior hemos visto como crear un menú desde una lista, éste en posición vertical.
Vamos a hacer el mismo menú en posición horizontal.
Para ello partimos del código anterior:
<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>
Tenemos las mismas reglas CSS, por lo tenemos el mismo menú ahora mismo.
Quitamos las propiedades display y width del elemento <a>, y añadimos una regla para los elementos <li> de la lista, quedando así:
Ponemos display:inline al elemento <li>, y nuestro menú se verá así:
Esto nos valdría, pero cada elemento tiene un ancho, además hay huecos entre ellos.
Podemos mejorar el aspecto eliminando esos huecos y dando el mismo ancho a cada "botón".
Para ello volvemos a poner la regla de los enlaces como estaba, para que se muestre en bloque y un ancho fijo, así:
Y al elemento <li> le modificamos una propiedad de posicionamiento que es float, le ponemos left.
Esto hace que los elementos de la lista se posicionen "flotando" a la izquierda, pegados al elemento anterior. Vemos como efectivamente esto ocurre y no dejan espacios entre ellos:
Ya hemos creado dos tipos de menús, vertical y horizontal. Con esta base y jugando con los diseños, podemos personalizarlo cuanto queramos, sólo es cuestión de probar.
