menu-horizontal-simple-css

Os hemos mostrado varios diseños de menús para poder inspirarnos en nuestros proyectos, también una lista de menús originales creados con CSS, pero ahora vamos a crear nuestro propio menú horizontal de forma simple con CSS (antes os enseñamos a crear uno otro menú poco más complejo). Empezemos:

Usaremos listas para crear este menú horizontal. Consta de 8 enlaces (por defecto, podemos incluir cuantos queramos):

Código HTML

Select Code
<ul id=”button”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Clients</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>F.A.Q</a></li>
<li><a href=”#”>Help</a></li>
<li><a href=”#”>Contact Us</a></li>

</ul>


Pero claro, este menú no tiene estilo (CSS). Sin estilo se muestra así:

a-pretty-cool-css-menu-beginner-levell-css-tutorial-from-thedesignsuperherocom_1208524535171

Código CSS

Vamos aplicarle estilo pues. Solo usaremos un nombre de ID para aplicar CSS Se llamará “button”:

Select Code
#button {
padding: 0;
}


El código anteriormente expuesto eliminará el padding que pueda haber por defecto en la lista de elementos.

Como vamos a crear un menú horizontal, la lista deberá ser horizontal, así que diremos que se dispongan en línea (display: inline):

Select Code
#button li {
display: inline;
}


Nos quedará algo parecido a esto:

a-pretty-cool-css-menu-beginner-levell-css-tutorial-from-thedesignsuperherocom_1208524571343

Ahora viene lo divertido. Vamos a aplicar los colores, fuentes y tamaños del menú (a nuestro gusto, claro está):

Select Code
#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}


Y el menú va quedando de esta manera:

a-pretty-cool-css-menu-beginner-levell-css-tutorial-from-thedesignsuperherocom_1208524594078

Vamos a aplicar un efecto :hover al mover el ratón encima de un elemento de la lista (menú). Nótese la diferencia de padding, margin y color de fondo que mostraremos:

Select Code
#button li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}


El efecto sería este:

screenjpg

Estandarización

XHTML 1.0 Transitional válido.

CSS 2.1 válido.

Finalización y ejemplo

Ya está listo. ¿Muy simple, verdad? Podemos ver un ejemplo del funcionamiento del menú.

Vía | Thedesignsuperhero

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!