Útil y elegante menú flotante vertical ~ Mejora Tu Blogger

Artículo publicado en el Balcón de Jaime. Ver en su sitio original.

Estás leyendo Menú vertical flotante y desplegable para tu blog, en Menus

Menú vertical flotante y desplegable para tu blog

Es probable que si tienes un blog y sueles añadirle complementos para personalizarlo a tu gusto te hayas preguntado alguna vez... ¿Dónde coloco esto?

En el caso de un menú, esta pregunta puede hacerse popular. Dado que la mayoría de los menús requieren un espacio bajo la cabecera o en la barra lateral para que sus enlaces sean mostrados con facilidad a los lectores, te encontrarás con un problema si en tu blog tienes cada elemento posicionado en el lugar idóneo y no deseas cambiarlo.

Llegado el caso de no saber como ofrecer a tus visitantes los enlaces que toda barra de navegación posee, te aconsejaría utilizar este maravilloso menú, creado a partir de una idea publicada con anterioridad.

Se compone por una simple franja que permanece fija en el lateral izquierdo del blog y que al hacer clic en ella, despliega un menú muy atractivo con tu lista de links.

Menú vertical flotante y desplegable para tu blog

Al pulsar la franja una vez haya sido desplegado el contenido, éste volverá a ocultarse. Puedes ver el menú en funcionamiento accediendo a este blog.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> en tu plantilla y debajo añade este script:

<script type='text/javascript'>
//<![CDATA[

var bldespll;
var bldespll2=-200;

function blcnbotndesplegg() {
if (bldespll==2) { bldespll=-2} else {bldespll=2};
document.getElementById("blmenuflntdesplegab")
.style.top=parseInt(document.getElementById("blmenubt").style.top)+30+"px";
document.getElementById("blmenuflntdesplegab").style.visibility="visible";
blnlacc() }

function blnlacc(){
bldespll2=bldespll2+4*bldespll;
if(bldespll2 <- 200) {bldespll2=-200};
if(bldespll2 > 0) {bldespll2=0};
document.getElementById("blmenuflntdesplegab").style.left=bldespll2+"px";
if (bldespll2 <=-200 || bldespll2 >=0) {window.clearTimeout() } else {window.setTimeout("blnlacc();",50);} }

//]]>
</script>
<style>#blcnenlace{font-family:Arial,helvetica,sans-serif; font-size:12px; border-bottom:1px solid #CCCCCC;} #blcnenlace a{text-decoration: none; color: #333333;}#blcnenlace:hover{border-bottom: 1px solid #9D9D9D;}</style>

Ahora, justo encima de la etiqueta <body> incluye este código:

<div id='blmenubt' style='display:scroll;position:fixed;top:100px;left:0px;'>
<a href='javascript:void(0)' onclick='blcnbotndesplegg();' title='Desplegar Menú'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif-7BKxvbRMT7fAQJbI7ASb7KB-HtxZGVqbZELdhMxfec4iIfjFJa73n4f9nRpmZ1Nq804It8DQELzdDKfIT3ZwkAb_XuQUig0XQ4TRAmpUqus5Z9W_V9TiFx5SzZcv4lbPOpVzEUtE6w/s320/blmostrarmenu.png'/></a>
</div>

Una vez hecho esto, debajo de <body> añade esto otro:

<div id='blmenuflntdesplegab' style='position:fixed; visibility:hidden; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCCkXz7zG5NtUis_Ssp8cI_qIVBxqxpBnA-3R9Kb0dSgH9Iwb3PcBhBdMON7mxOqDhldIjFGUwEuB6ZWcQBH7gzwJ-QjLW5662zX5v2o2lplu49Vx91W5ZIWztG9MfHlzcq1sPf7SJK0/s400/BLMENUDSS.gif") no-repeat scroll 0 0 #eeeeee; z-index:1;'>
<table style='border:1px solid #9D9D9D; width:150px; text-align:center; padding:5px;'>
<tr><td id='blcnenlace' style='padding-top:28px;'><a href='DIRECCION'>TITULO</a></td></tr>

<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
</table>
</div>

Reemplaza en cada línea DIRECCION con la dirección de la página web, blog o artículo del enlace y TITULO por el texto que aparecerá en el menú.

Guarda la plantilla y habrás terminado. En caso de tener alguna duda escribe un comentario para que pueda ayudarte.

Mejora Tu Blogger