Espectacular menu con CSS3 y jQuery para Blogger

Muchos themes actuales de blogger traen menús prefabricados donde solo hace falta agregar las URL. Esta vez quiero compartir una forma de crear un espectacular menú con CSS3 y jQuery y darle un afecto de transision.

Lo primero que haremos es agregar la librería jquery en tu blog. Debes de buscar el cierre de head y agregar este código antes:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js” type=”text/javascript”></script> <script src=”http://code.helperblogger.com/lavalamp-menu.js” type=”text/javascript”></script>

Si ya usas esta librería para otros efectos en tu blog, borra todo el código en color rojo.

Ahora vamos a insertar el efecto a través del código css3. Buscamos este código:

]]></b:skin>

Y antes agregamos el css:

.lavalamp {

position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
font-family: calibri;
}

.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
border: 1px solid #841144;

}

.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
border: 1px solid #2f8893;

}

.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
border: 1px solid #c08c1f;

}

.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
border: 1px solid #c04f11;

}

.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
border: 1px solid #272727;

}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

.lavalamp a {
text-decoration: none;
color: #262626;
line-height: 20px;
}

.lavalamp ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}

.lavalamp ul li {
list-style: none;
float:left;

text-align: center;
}

.lavalamp ul li a {
padding: 0 20px;
text-align: center;
}

.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}

Guardamos los cambios.

Ahora solo nos falta agregar las URLs del menu, lo podemos hacer con un gadget HTML o insertándolo en otra parte de tu blog. Si ya tienes un menú horizontal en la cabecera, puedes reemplazarlo por este.

Pegamos el código:

<div class=”lavalamp dark”>
<ul>
<li class=”active”><a href=”">Inicio</a></li>
<li><a href=”#”>Categoria 1</a></li>
<li><a href=”#”>Categoria 2</a></li>
<li><a href=”#”>Categoria 3</a></li>
<li><a href=”#”>Categoria 4</a></li>
<li><a href=”#”>Categoria 5</a></li>
</ul>
<div class=”floatr”></div>
</div>

Solo falta agregar las urls de las categorías, post o etiquetas que pondrás en el menú en css y jquery. Como puedes ver la clase del menú es “lavalamp dark“, por tanto tu menú sera oscuro. Este código genera 6 estilos diferentes o colores de menú  En dependencia de la clase que uses, así se mostrara el color.

A continuación te dejo las clases que puedes usar y como se verán los resultados.

Busquedas relacionadas:

• menus para blogger
• menu con css3
• menu blogger
• efectos jquery para menus
• blogger jquery
• jquery blogger
• jquery menu
• crear menu css3 jquery javascript
• jquery para menu
• jquery 1 7 2 menu