[Tutorial] Menú Desplgable

Este tutorial, es de Ciudad Blogger. Pueden Ver como queda aqui, en este blog de pruebas (Not Mine x'D) CLICK. A mi me ha parecido que puede gustarles, por lo cual, aqui se lo traigo n_n

1-. Vayan a Diseño >> Edición HTML >> busca  ]]></b:skin> y antes de eso, pega el siguiente código:

#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/AVvXsEjEA5WHvLz7hHDF6Pm42vMmWfmvPFh9hCb_boNuI1GLMfjE5Uxs43r7Sh6F4Y6TDuv-HrgM5GCT79EJAn84DH44WBXd4S7WuDX4NWxl0-Bq9p35OElxRjWpQpgVyO63yUdfnFbnbf_XgOGW/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 esto:

<div id='sideBar'>

<a href='javascript:void(0)' id='sideBarTab'><img alt='sideBar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9a5dYd5h9QU33wk06-Fk5mhvsRntjakwKCCtUfdqx4Nydum4k4UEiY_B3ttKnSLfvtVf1VbATh5zGseX1EOy5ypTRuvaslJWNWz7Lji_NdW2qAPb9R1bKHDH6QK8avpnw586JFRgtB45O/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>

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 encuentres, la primera corresponde al color de fondo y la segunda al botón del menú.