Menú horizontal tipo listón hecho con CSS3

Comparteme :

Este es un menú tipo horizontal listón que está hecho con CSS3 por completo, nada de imágenes, y da el aspecto de que estuviera envolviendo el blog. Queda bien en blogs que tienen los bordes del contendor definidos, y/o que tienen un color de fondo distinto al contenedor principal.

Un ejemplo de este menú puedes verlo a continuación.

Demostración

Para poner este menú tipo listón en tu blog, entra a la Edición HTML de tu plantilla, y antes de
]]></b:skin> pega los estilos:

/* Menú Listón
----------------------------------------------- */
#menuListon:after, #menuListon:before {
content: '';
position: absolute;
}

#menuListon {
height:25px; /* Alto del menú */
text-align: center;
position: relative;
margin: 0 -30px 5px -30px;
padding: 10px 0;
background: #e5592e; /* Color del listón */
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
box-shadow: 0 2px 0 #bbb;
}

#menuListon:before, #menuListon:after {
border-style: solid;
border-color: transparent;
bottom: -10px;
}

#menuListon:before {
border-width: 0 20px 10px 0;
border-right-color: #8C3115; /* Color de la sombra del doblez */
left: 0;
}

#menuListon:after {
border-width: 0 0 10px 20px;
border-left-color: #8C3115; /* Color de la sombra del doblez */
right: 0;
}

#menuListon ul {
margin-top: 0px;
}

#menuListon li {
list-style: none;
display: inline;
padding-right:20px;
}

#menuListon li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: inline;
text-decoration: none;
color: #f0f0f0; /* Color del texto */
font-size: 18px; /* Tamaño del texto */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}

#menuListon li a:hover {
font-size:20px; /* Tamaño del texto al pasar el cursor */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}

Luego, SIN expandir los artilugios busca este código:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
</b:section>

Debajo de él pega el HTML del menú:

<div id='menuListon'>
<ul>
<li><a href='URL del enlace'> &#10029; Pestaña 1</a></li>
<li><a href='URL del enlace'> &#10029; Pestaña 2</a></li>
<li><a href='URL del enlace'> &#10029; Pestaña 3</a></li>
<li><a href='URL del enlace'> &#10029; Pestaña 4</a></li>
</ul>
</div>

Ahí agrega las URLs de tus enlaces y el nombre de tus pestañas. Lo que está en negrita son los caracteres de estrellas, los puedes eliminar si lo deseas.

En el primer código, verás en color verde algunas áreas que se pueden personalizar, tales como el color de fondo, del texto, etc.
Si el listón quedara muy abierto entonces modifica los dos -30px que están en la parte azul, con un valor más cercano a cero se hará más reducida la abertura del listón.

El menú estará debajo de la cabecera, si deseas que esté arriba, entonces el código del segundo paso, en lugar de pegarlo debajo de ese código, pégalo arriba de él.

No está de más decir que como usa CSS3 sólo se verá bien en navegadores modernos, así que navegadores con versiones antiguas abstenerse.
Como puedes ver, es un menú sencillo pero muy estético, y además hecho sólo con CSS.

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Menú horizontal tipo listón hecho con CSS3.

Comparte