Menú vertical desplegable

Ayer estaba haciendo una plantilla (una de esas que siempre empiezo y nunca termino) y después de "armar todas las partes" me di cuenta que ya no quedaba espacio para agregarle un menú y entre tantas tonterías decoraciones que le había puesto se veía más saturado de lo que de por sí ya estaba.

Así que pensé: -¿por qué no poner un menú desplegable que esté escondido y que aparezca cuando presiono un botón?

De esta forma podemos meter varias pestañas y el menú no se verá saturado porque estará escondido y se desplegará hasta que el usuario lo decida, de igual modo se oculta de nuevo con el botón.

Pueden ver un ejemplo en este blog de pruebas.

Para poner este dinámico menú entra a Diseño > Edición de HTML y pega antes de </head> lo siguiente:

<script type='text/javascript'>
//<![CDATA[
<!-- inicio
var mov;
var xpos=-200;

function VerOcultarMenu() {
if (mov==2) { mov=-2} else {mov=2};
document.getElementById("MenuDesplegable").style.top=parseInt(document.getElementById("BotonMenu").style.top)+30+"px";
document.getElementById("MenuDesplegable").style.visibility="visible";
MoverMenu() }

function MoverMenu(){
xpos=xpos+4*mov;
if(xpos <- 200) {xpos=-200};
if(xpos > 0) {xpos=0};
document.getElementById("MenuDesplegable").style.left=xpos+"px";
if (xpos <=-200 || xpos >=0) {window.clearTimeout() } else {window.setTimeout("MoverMenu();",50);} }
// final -->
//]]>
</script>

Ahora antes de la etiqueta </body> pega esto:

<div id='BotonMenu' style='display:scroll;position:fixed;top:100px;left:0px;'>
<a href='javascript:void(0)' onclick='VerOcultarMenu();' title='Mostrar / Ocultar'>
<span style='font-weight:bold; border:1px solid red; text-align:center; padding:5px; background:#ccc; color:#000;'>Ver/Ocultar menú</span></a>
</div>

Y por último después de la etiqueta <div id='outer-wrapper'> pega esto:

<div id='MenuDesplegable' style='position:fixed; visibility:hidden; background:#ccc; z-index:1;'>
<table style='border:1px solid red; width:150px; text-align:center; padding:5px;'>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 1</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 2</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 3</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 4</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 5</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 6</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 7</a></td></tr>
<tr><td><a href='#'>Pestaña 8</a></td></tr>
</table>
</div>

Personalización:

En el segundo código cambia Ver/Ocultar menú por el texto que quieras para tu botón. Utiliza lo que está en color verde para cambiar el color de fondo, color de texto y color de borde del botón.

También puedes usar una imagen como botón, sólo remplaza el texto por este código y cambia la URL de la imagen:

<img src="URL de la imagen" />

En el tercer código cambia el signo de gato (#) por la URL del enlace, y Pestaña por el texto que quieras para el vínculo.

Si quisieras agregar más pestañas sólo repite antes de </table> esta línea:

<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 1</a></td></tr>

Para cambiar el color de fondo del menú así como el borde y el ancho, cambia lo que está en color verde del tercer código.

Sencillo ¿no?