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í:

 

 

notepad

 

 

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í:

 

 

notepad

 

 

Y al elemento <li> le modificamos una propiedad de posicionamiento que es float, le ponemos left.

 

 

notepad

 

 

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.


 

Contenidos que te pueden interesar
Este sitio usa cookies para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Ninguna cookie será instalada a menos que se desplace exprésamente más de 400px. Leer nuestra Política de Privacidad y Política de Cookies. Las acepto | No quiero aprender cursos gratis. Sácame