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
<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í:
Código CSS
Vamos aplicarle estilo pues. Solo usaremos un nombre de ID para aplicar CSS Se llamará “button”:
#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):
#button li {
display: inline;
}
Nos quedará algo parecido a esto:
Ahora viene lo divertido. Vamos a aplicar los colores, fuentes y tamaños del menú (a nuestro gusto, claro está):
#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:
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:
#button li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}
El efecto sería este:
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
Por ahora hay 23 comentarios ¿Quieres opinar?
Muy buen tutorial, esto nos viene estupendo para los novatillos con css.
Umm, tendría que probarlo, pero no ves mejor poner un padding-top:12px en vez de un margin negativo, creo que te funcionaría igual.
@InKiLiNo si haces lo que dices, la zona que resalta cuando haces :hover es la de abajo, en vez de la de arriba, como está puesto por defecto.
Un saludo.
Muy interesante y bonito el menú, voy a tratar de aplicarlo en mi blog. Gracias por estos artículos tan interersantes y hasta pronto
Genial!, se ve muy bien y sencillo. Me gustaría preguntarte como debo de hacer para colocar todo el css dentro del mismo elemento para poder añadirlo en una entrada o elemento html en cualquier parte del blog en vez de en la plantilla.
@MALINA haz un include llamando al archivo CSS en un lugar que se repita, por ejemplo, la cabecera. No se si te refieres a eso.
kaakaja!!! que rápido y fácil!!
ajaakjaa muy bueno 
… ahora podrías hacer la versión 2 con un submenu 
@Albert ya enseñamos a crear un menú con submenú en esta entrada: http://www.cssblog.es/novedoso-menu-de-navegacion-con-css3/
Un saludo.
no se que es un include me refiero que etiquetas hay que poner al comienzo del código algo asi?
@MALINA las etiquetas para un documento HTML son: < style type="text/CSS">tu código CSS< /style> (sin espacios en < style type="text/CSS"> y < /style>
Un saludo.
entiendo que debo poner todo el código que aqui explicas entre esas etiquetas?
@MALINA
Malina,podrias poner todo el css dentro del html,o mejor aun,hacer un archivo externo css (donde estara el codigo css) y luego lo enlazas al html.lo encuentro mas practico a la hora de hacer modificaciones.
EL menú me queda vertical..
@Lautaro eso es porque no le habrás aplicado la propiedad display: inline;
Un saludo.
hola yo uso html kit y no me funciona la parte de ponerle fondo ayuda
@zantiago preguntaló en el foro: http://comunidad.cssblog.es
Un saludo.
una consulta, estoy diseñando un sitio en el dreamweaver, por lo tanto estoy usando una hoja de estilos CSS. No se que porpiedad colocar, para que si yo por ej. quiero estar en la sección “Services” el estilo quede fijo mientras uno está ahi…o sea… quede el cuadrado grande, dando el elemplo del menu mostrado..
no se si se entiende…
oye gracias por el menu esta super genial… ademas se le puede colocar varios efectos rollover que son impactantes..
saludos
hola muy buenos post pero lo que yo quiero es hacer un menu de navecacion en la columna izquierda que tenga imagenes…no tengo ni la minima idea de como se hace si puedes anota mi mail y si tienes allgun consejo damelo q lo nesesito
gracias de antemano!!
@pablo pregúntalo en el foro, aquí no se responden a esas dudas: http://comunidad.cssblog.es
Un saludo.
Muy buen tutorial, “Sencillez es elegancia”
[...] bonita barra de navegación mediante el uso de CSS, inspirada en Gettyimages. Es tan simple como otras que he descrito anteriormente, además de poder encontrar mayor inspiración en esta lista de menús [...]
Exelente Gracias!