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

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

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

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

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á):

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

#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