Menu flotante

Se trata de un menú que sigue a la página mientras la bajáis y subís. Es decir: "!flota" arriba y abajo de la página. Lo véréis mejor en la demo del autor del hack AQUÍ
, y comprobar cómo funciona en blogger, en mi Prueba (sólo bajad la página y subidla: veréis cómo baja y sube con ella el menú).

Encontráréis el hack original y la descarga de sus scripts en nettuts.com


Y se hace así:

.- CSS: Cambiad colores de fondo, líneas, etc, para acomodarlo mejor al fondo de vuestro blog. Igualmente, la distancia de la cabecera del blog y de los laterales, el ancho, etc...

#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}

.- SCRIPTS:

<script language='javascript' src='http://.../jquery.js'/>

<script language='javascript' src='http://.../jquery.dimensionss.js'/>

<script language='javascript'>

var name = &quot;#floatMenu&quot;;

var menuYloc = null;



$(document).ready(function(){

menuYloc = parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css(&quot;top&quot;).indexOf(&quot;px&quot;)))

$(window).scroll(function () {

offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;

$(name).animate({top:offset},{duration:500,queue:false});

});

});

</script>

.- HTML:

<div id='floatMenu'>

<ul class='menu1'>



<li><a href='#' onclick='return false;'> Inicio </a></li>

</ul>

<ul class='menu2'>

<li><a href='http://cafe-junio.blogspot.com/' onclick='return false;'> Epílogo </a></li>

<li><a href='#' onclick='return false;'> Mapa </a></li>

<li><a href='#' onclick='return false;'> Acceso X Etiquetas </a></li>



</ul>

<ul class='menu3'>

<li><a href='#' onclick='return false;'> Revolutum </a></li>

</ul>

</div>

Al llevar una posición absoluta (ver CSS), se desplegará desde la cabecera del blog: variad el "top", entre otros, para colocarlo en la posición que mejor le venga a vuestro blog.