Menú vertical con CSS3 y jQuery para Blogger

Ya algunos me han preguntado cómo obtuve el menú que se sitúa a la izquierda de mi blog, en esta oportunidad mostraré cómo obtenerlo y además enseñaré cómo configurarlo correctamente.

Es importante que sepas que el efecto funciona en cualquier navegador actual, exceptuando las transiciones en Internet Explorer ya que carece de esta función incluso en su versión más actual.

Puedes ver un ejemplo presionando en el ícono flotante de la izquierda del blog, pero he creado un blog de pruebas con el script en caso de editarlo o eliminarlo de mi blog.

El tutorial:

Paso 1: Instalando jQuery, el script y configurando la función:

En este paso deberás instalar la librería con la que daremos el efecto al contenedor y permitirá que al presionar en la imagen se muestre el menú, este plugín se llama jQuery Tab Slide Out.

En "Diseño | Edición HTML" deberás buscar la siguiente línea:

</head>

Arriba de éste, deberás pegar el siguiente código:

<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/AVvXsEgWwU7zUs61-Z1OnRFRHfzH_Jr3Stf4X1OObtrgbsvpBn9NQNSOOJKEkgtuc-Fq3qRI7fD7HRh2pup0na_NbDKuMgMB1QGRPJVnFCqd42i1cUdeG_e97_JOkZNx0tNiUn5c-9EKfwGQUJY/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>

Define cada valor como estimes conveniente y cuando hayas completado este paso guarda los cambios.

Importante:

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

Paso 2: Añadiendo los estilos:

 Ahora deberás buscar la siguiente línea:

]]></b:skin>

Arriba de ésta pega el siguiente código:

.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; }

Paso 3: Añadiendo el menú:

Ahora antes del siguiente código:

</body>

Deberás pegar el cuerpo del menú, el cual contiene la siguiente forma:

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

Previsualiza los cambios y si es satisfactorio guarda la plantilla.