lunes, 2 de enero de 2012

Menú vertical con CSS3 y jQuery para Blogger

En Ayuda Blogger he encontrado un maravilloso menu vertical hecho con CSS3 y libreria jQuery que ademas de tener un aspecto genial ahorra mucho espacio en el blog,seguro que a mas de uno os gustara este genial truco para Blogger.


Para agregar este menu ve a "Diseño | Edición HTML" y alli busca la siguiente línea:
 </head>

Antes de la etiqueta anterior deberas agregar lo siguiente:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

 <script type="text/javascript">
 $(function(){
 $('.slide-out-div').tabSlideOut({
 tabHandle: '.handle',         // no-tocar, corresponde a la class del botón
 pathToTabImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRx9h-p4ibLwE9-eHk54yDWGUaz3KUsnXTLTDst5ijHeOgLZq8GIGR176AxE15oFT-ONADvejqJU-Z5G9-i53BzmhwwDpt84f41rHa6q5KH2efF5BcAFa6BbmM-m5LkIeWs6GJU6QWr1A/s1600/square-arrow-right.gif', // Imagen del boton
 imageHeight: '36px',         //alto de la imagen
 imageWidth: '36px',         //ancho de la imagen
 tabLocation: 'left',            //ubicación del contenedor
 speed: 300,                     //velocidad de la animación
 action: 'click',                   //cambiar por hover si deseas que el script se active al pasar el mouse
 topPos: '200px',               //posición superior del contenedor
 leftPos: '20px',                  //posición a la izquierda del contenedor
 fixedPosition: true            //esto permite que el botón siga la pantalla, cambiar a false en caso contrario.
});
});
</script>

Importante:
  • Si ya tenías jQuery instalado omite el código resaltado en azul.

Ahora antes de ]]></b:skin> debes agregar lo siguiente:
.slide-out-div {
padding: 0;
width: 150px;
color:fff;
}

.slide-out-div ul {
margin:0;
margin-left:-40px;
}
.slide-out-div li {
text-align:right;
width:120px;
color:#fff;
margin-top:2px;
font-size:13px;
background: #2facd6; /*Color de fondo de los enlaces*/
padding:4px;
list-style:none;
}     

.slide-out-div li:hover {
background: #2d2d2d; /*Color de fondo al pasar el mouse por un enlace*/
padding:4px;
list-style:none;
-moz-transition: 0.2s;
-webkit-transition: 0.2s;
-o-transition:1s;
transition: 1s;
-webkit-transform: rotate(0deg) scale(1.5) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.5) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.5) skew(1deg) translate(0px);
}     
  
.slide-out-div li a {color:#fff; text-decoration:none;font-weight:none;font-family: Century Gothic, sans-serif; }

Ahora antes de </body> deberas agregar el siguiente codigo que corresponde a la estructura del menu.
<div class='slide-out-div'>
      <a class='handle' href=''/>
<ul>
    <li><a href='/'>Inicio</a></li>
    <li><a href='URL'>Enlace 1</a></li>
    <li><a href='URL'>Enlace 2</a></li>
    <li><a href='URL'>Enlace 3</a></li>
    <li><a href='URL'>Enlace 4</a></li>
    <li><a href='URL'>Enlace 5</a></li>
    <li><a href='URL'>Enlace 6</a></li>
</ul>     
</div>

En esta ultima parte es en la que deberas agregar tus enlaces.



DE: http://www.miltrucosblogger.info

2 comentarios:

  1. Muchas gracias por tu ayuda. Tengo un problema, estoy utilizando la plantilla:
    Name: Bright side of life
    Distributed by: http://btemplates.com/
    He seguido todos tus pasos y el menu me lo pone por encima del head, arriba del todo, me podrias decir como solucionarlo, por favor?

    ResponderEliminar
  2. Hola, me podrias indicar como poner el menu abajo a la derecha o a la izquierda? Mi email es admon.propiedades@gmail.com. Muchas gracias.

    ResponderEliminar

Related Posts Plugin for WordPress, Blogger...