Lo que hace este código es que al
bajar el scroll de la página el gadget de Páginas flota y se
mantiene visible, y una vez que se sube el scroll de la página
el gadget toma de nuevo su posición original.
Para colocarlo en tu blog entra
en Plantilla | Edición de HTML y antes
de </head> pega lo siguiente:
| <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/> <script> //<![CDATA[ $(function() { var $flotarMenu = $("#PageList1"), $window = $(window), offset = $flotarMenu.offset(); $window.scroll(function() { if ($window.scrollTop() > offset.top) { $flotarMenu.css({'position' : 'fixed', 'width' : '880px', 'top' : '0px'}); } else { $flotarMenu.css({'position' : 'relative', 'top' : 'auto'}); } }); }); //]]> </script> <style> #PageList1 { width:880px; /* Ancho del gadget de Páginas */ background:#fff; /* Color de fondo del gadget */ z-index: 99; } </style> |
¿Qué hay que tener en cuenta si
decides usarlo?
Si ya tuvieras jQuery omite la primera
línea en color gris. Y si usaras Scriptaculous/Prototype deberás hacer unos cambios.
Lo que está en color rojo es
el ID del gadget de Páginas, así que asegúrate que el ID de tu
gadget sea el mismo que el que se muestra en el código, ya que
algunas veces puede variar a #PageList2, #PageList3, etc.
si así fuera sólo cambia lo que está en rojo por tu verdadero ID.
Incluso puedes usarlo con cualquier
otro menú, sólo tendrás que cambiar lo que está en rojo por el ID
de tu menú, aunque seguramente tendrás que añadir algunos estilos
extras debajo de <style>
En color azul se establece el
ancho del gadget. Si ves que queda muy angosto o muy ancho ahí es
donde deberás moverle.
Si usas la plantilla Fantástico,
S.A. (Awesome Inc.) sabrás que el menú cubre todo el ancho de
la pantalla, así que quienes usen esa plantilla deberán usar este
código en lugar del anterior:
| <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/> <script> //<![CDATA[ $(function() { var $flotarMenu = $(".tabs-outer"), $window = $(window), offset = $flotarMenu.offset(); $window.scroll(function() { if ($window.scrollTop() > offset.top) { $flotarMenu.css({'position' : 'fixed', 'width' : '100%', 'top' : '0px'}); } else { $flotarMenu.css({'position' : 'relative', 'top' : 'auto'}); } }); }); //]]> </script> <style> .tabs-outer { width:100%; background: url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_groovy.png) repeat scroll 0px 0px #000; /* Color de fondo */ z-index: 99; } </style> |
En este caso no hace falta verificar el
ID del gadget ni cambiar el ancho del gadget, pero en caso de que lo
requieras puedes cambiar el color de fondo modificando lo que está
en negrita.
Como has podido ver la instalación es
de un solo paso y no hace falta hacer nada más excepto retocar
algunos estilos en caso de ser necesario; y el resultado además de
ser muy llamativo puede ser muy práctico para tus visitantes y para
ti, sobre todo si quieres que tus lectores tengan siempre visibles y
a la mano los enlaces de tu menú.
0 comentarios:
Publicar un comentario