Instala el menú despegable con efecto deslizante Pink

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Este es un menú vertical desplegable que funciona a base de las librerías de Scriptaculous y Prototype que harán que se mantenga oculto en un extremo de la ventana y que se despliegue una vez que demos click en él. Este menú es muy conveniente para quienes les gusta ahorrar espacio y mantener el aspecto del blog muy prolijo. Además, el efecto deslizante que tiene le da muy buen gusto.

Puedes ver un ejemplo funcionando en este blog de pruebas.

Para colocarlo en tu blog sólo sigue estos tres pasos, primero entra en Diseño | Edición de HTML y pega antes de ]]></b:skin> lo siguiente:

#sideBar{
text-align:left;
}

#sideBar h3{
margin:10px 10px 10px 10px;
color:#FFFFFF;
font-size:110%;
font-family:arial;
font-weight:bold !important;
}

#sideBar h3 span{
font-size:125%;
font-weight:normal !important;
}

#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074; /* Color de fondo de las pestañas */
width:177px;
color:#FFFFFF; /* Color del texto de las pestañas */
}

#sideBar li a{
width:100%;
}

#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}

#sideBar li a:hover{
color:#FFFFFF; /* Color del texto al pasar el cursor */
text-decoration:underline; /* Subrayado en el link al pasar el cursor */
}

#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
right:0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRxTSquFMoZ62shEQaL4Oto3uizZOWt_4pKrrKo9ONii4dyoOrj1gG4ZOsXjo80yl7tyCIw6RbW6kAP9MDBTuHz3e7aYaofNTCWQpa982u4MfDa6YEm0jmsvFybbG5FqPOyCrHlVhW8sV/s1600/background.png);
background-position:top left;
background-repeat:repeat-y;
}

#sideBarTab{
float:left;
height:137px;
width:28px;
}

#sideBarTab img{
border:0;
}

#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px; /* Alto del menú */
}

#sideBarContentsInner{
width:200px;
}

Luego antes de </head> pega esto:

<!-- Prototype y Scriptaculous-->
< script src='http://www.google.com/jsapi'></script>
< script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
< /script>
< !-- Prototype y Scriptaculous-->

< script type='text/javascript'>
var isExtended = 0;
function slideSideBar(){
new Effect.toggle(&#39;sideBarContents&#39;, &#39;blind&#39;, {scaleX: &#39;true&#39;, scaleY: &#39;true;&#39;, scaleContent: false});
if(isExtended==0){
new Effect.Fade(&#39;sideBarContents&#39;,
{ duration:1.0, from:0.0, to:1.0 });
isExtended++;
}
else{
new Effect.Fade(&#39;sideBarContents&#39;,
{ duration:1.0, from:1.0, to:0.0 });
isExtended=0;
}}
function init(){
Event.observe(&#39;sideBarTab&#39;, &#39;click&#39;, slideSideBar, true);
}
Event.observe(window, &#39;load&#39;, init, true);
< /script>

Por último antes de </body> pega este código:

<div id='sideBar'>
< a href='javascript:void(0)' id='sideBarTab'><img alt='sideBar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJEWvAAUUox3rQZc1nYwvGv78SSkhf7mMIUKCH6SyuL4R4gaYa1U63pFmfINRy1TntpkBH6WIPS5VASqs6XBZWr2fBUhSnA7z-wM7wZruubnluq7_w1zY5eELG7iNbwbGW5T78gDJ059H6/s1600/slide-button.gif' title='sideBar'/></a>
< div id='sideBarContents' style='display:none;'>
< div id='sideBarContentsInner'>
< h3><span>Contenido</span></h3>
< ul>
< li><a href='URL del enlace'>Pestaña 1</a></li>
< li><a href='URL del enlace'>Pestaña 2</a></li>
< li><a href='URL del enlace'>Pestaña 3</a></li>
< li><a href='URL del enlace'>Pestaña 4</a></li>
< li><a href='URL del enlace'>Pestaña 5</a></li>
< li><a href='URL del enlace'>Pestaña 6</a></li>
< /ul>
< /div>
< /div>
< /div>

Cambia la URL del enlace donde se indica así como el título de la pestaña y ya estará funcionando.

En el primer código hay unas anotaciones en color verde que se pueden personalizar tales como el color del texto, tamaño, etc.

Luego, tanto el fondo del menú como el botón que dice 'menú' son dos imágenes, por lo tanto, si se desea cambiar de color deberán editarse estas imágenes. Esas imágenes están en el primer y último código, las he puesto en color azul para que las identifiques, la primera corresponde al color de fondo y la segunda al botón del menú.

Sin duda es un menú al que se le puede sacar mucho provecho, ya sea para agregar contenido del blog, redes sociales, o cualquier otro tipo de enlaces que se deseen tener de manera que no ocupen mucho espacio en el blog.

Por último recuerda que el menú usa Scriptaculous y Prototype por lo tanto, si usas Mootools o jQuery seguramente no podrás utilizarlo.