Sitio Web

Crear un menú horizontal simple CSS

Todos sabemos que es realmente indispensable que cualquier página web tenga un menú, sin importar si es simple o si es bastante original y practico.

Si estás trabajando en un proyecto y quieres empezar la creación de tu propio menú horizontal con CSS estas en el lugar indicado, ya que en este tutorial te mostraremos paso a paso lo que debes de hacer para crear tu menú.

El menú horizontal que haremos en este tutorial tendrá 5 enlaces, aunque tú le puedes agregar todos los que quieras:

El código HTML de nuestro menú

<ul id=”button”>
 <li><a href=”#”>Inicio</a></li>
 <li><a href=”#”>Sobre nosotros</a></li>
 <li><a href=”#”>Servicios</a></li>
 <li><a href=”#”>Productos</a></li>
 <li><a href=”#”>Contacto</a></li>
 </ul>

Este menú no tiene ningún estilo CSS, por lo que solo veremos las palabras con los enlaces como cualquier otro texto, así que tenemos que empezar la creación de su estilo

image00 3

El código CSS de nuestro menú

Lo primero que haremos será usar un nombre ID para poder aplicarle el CSS, en este caso se llamará “button”:

#button {
 padding: 0;
 }

Este código elimina el padding que se puede crear por defecto en una lista de elementos, en este caso nuestro menú.

Por defecto, estas listas se crean de forma vertical, pero nuestro menú tiene que ser horizontal, así que le diremos que se pongan en línea usando “display: inline.”

#button li {
 display: inline;
 }

Ahora nuestro menú se vera de forma horizontal, algo como esto:

crear un menu css

Ahora debemos mejorarlo. Comenzaremos a aplicar las fuentes, el tamaño del menú y los colores, los cuales podrás editar a tu gusto:

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

Ya agregamos el diseño, así que nuestro menú ahora debería de verse de esta forma:

image02 2

Ahora tu menú ya debería tener la forma y los colores que quieres. Pero para hacer que se vea todavía mejor y tenga cierto nivel de profesionalismo tenemos que añadir el famoso efecto :hover para que cambie de olor cada uno de los elementos del menú cuando pasemos el cursor sobre ellos.

Fijate en la diferencia de margin, padding y color que pondremos en esta ocasión:

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

Tener el efecto de hover no es obligatorio, pero es algo que la mayoría de los menús tienen y que agrega cierta “interactividad” con el menú, indicándole al usuario de una forma muy clara que al dar clic ahí sucederá algo.

Conclusión

Listo, cómo pudiste ver en este corto tutorial, crear un menú CSS es algo bastante sencillo y no tendrás que invertir mucho tiempo en su creación. El resultado final es un tanto sencillo, pero con una buena combinación de colores el menú puede lucir muy limpio y profesional en tu proyecto.

Recuerda que puedes agregar tantos enlaces como necesites y que puedes editar el color, los tamaños y el estilo del menú que acabamos de crear, lo único que necesitas es aplicar los conocimientos que te hemos enseñado.

¿Buscas un mejor hosting para tu sitio web?

Transfiere tu sitio web a la plataforma de hosting más rápida con soporte dedicado 24/7.

Agrega un Comentario

Dale clic aquí para dejar un comentario

This site uses Akismet to reduce spam. Learn how your comment data is processed.

¡Comienza a ahorrar hoy mismo!

Alojamientos con todo incluido y nombre de dominio por

2
15
/mes