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="https://www.cssblog.es/crear-un-menu-horizontal-simple-con-css/#”">Home</a></li> <li><a href="https://www.cssblog.es/crear-un-menu-horizontal-simple-con-css/#”">About</a></li> <li><a href="https://www.cssblog.es/crear-un-menu-horizontal-simple-con-css/#”">Services</a></li> <li><a href="https://www.cssblog.es/crear-un-menu-horizontal-simple-con-css/#”">Clients</a></li> <li><a href="https://www.cssblog.es/crear-un-menu-horizontal-simple-con-css/#”">Products</a></li> <li><a href="https://www.cssblog.es/crear-un-menu-horizontal-simple-con-css/#”">F.A.Q</a></li> <li><a href="https://www.cssblog.es/crear-un-menu-horizontal-simple-con-css/#”">Help</a></li> <li><a href="https://www.cssblog.es/crear-un-menu-horizontal-simple-con-css/#”">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