martes, 27 de julio de 2010

VkuMenuBar: Menú fijo abajo con entrada deslizante By: Vku

Es un proyecto que hace un tiempo empecé y quiero compartir con ustedes, espero que les guste.



Es totalmente personalizable mediante CSS.

Al abrir el blog o página el menu va entrando desde abajo con efecto deslizante.

Ver Imágenes.

Se le puede poner imágenes o texto.

Imágenes junto con texto.

La altura se adapta al tamaño de la imagen.

Se puede elegir el tamaño y colores.

También se puede mostrar en el centro.

Queda siempre fijo en la parte de abajo del blog o página, con un ancho del 100%, adapatandose a la resolución del monitor del visitante.

Se puede cambiar el ancho por un valor fijo, junto con su posición.

A la derecha tiene un botón de cierre del menú.

Al cerrar el menú queda una imagen fija para poder abrirlo nuevamente.


Las imágenes de los botones se pueden cambiar por otras, a su gusto.

Dentro del menú puede ir imágenes junto con texto, solo imágenes o solo texto.

Se le puede colocar distintos tipos de botones sociales.

El tamaño y la ubicación se apaptan mediante códigos CSS individuales.

La altura se adapta a la imagen o se pueden ponerla con una altura fija.

Como vieron en las imágenes de arriba se puede cambiar el color del fondo y del texto.

¿Cómo poner el menú?

El código va dentro del cuerpo del documento entre las etiquetas <body> y </body>


Yo lo puse debajo de <body>

En Blogger también se puede poner en un gadget HTML/Javascript.

Código:
<div id="vkumenubardos" style="padding:4px;position:fixed;z-index:990;right:0;bottom:0;display:none;">
<!-- Acá va el botón para abrir el menú -->
<a href="javascript:abVkuMenuBar()"><img src="http://img44.xooimage.com/files/c/d/a/top-1eb247f.png" style="border: 0; margin-right: 5px; width:24px; height:24px;" /></a>
</div>
<!-- Personalizar menú, color del fondo y borde -->
<div id="vkumenubar" style="padding:0;position:fixed;z-index:999;left:0px;bottom:-100px;width:100%;background-color:#555;border-top: 4px double #ccc;">
<!-- Acá va el botón para cerrar el menú -->
<a href="javascript:closeVkuMenuBar()"><img src="http://img10.xooimage.com/files/0/d/2/1279873511_close_box_red-1e94d34.png" style=" float: right; border: 0;margin-right: 10px;" /></a>

<!-- Acá van las imágenes con sus link -->
<a class='linkvkumenubar' href='http://twitter.com/v_ku' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img41.xooimage.com/files/7/9/5/logo_twitter-1eb2409.gif" title='Twitter'/></a>

<a class='linkvkumenubar' href='http://www.facebook.com/loseasi' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img49.xooimage.com/files/0/f/f/logo_facebook-1eb23fb.gif" title='Facebook'/></a>

<a class='linkvkumenubar' href='http://www.youtube.com/user/thevku' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img41.xooimage.com/files/b/6/1/logo_youtube-1eb240c.gif" title='You Tube'/></a>

<a class='linkvkumenubar' href='http://www.myspace.com' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img45.xooimage.com/files/2/b/3/logo_myspace-1eb2423.gif" title='MySpace'/></a>

<a class='linkvkumenubar' href='http://feeds.feedburner.com/blogspot/qygH' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img43.xooimage.com/files/3/f/5/rss-1eb2412.jpeg" title='Rss'/></a>

<a style="text-decoration: none; bottom:17px; margin:0 10px;position:relative;color:fff" href='http://loseasi.blogspot.com' target='_blank'>¿Cómo se hace...?</a>
<!-- Fin imágenes con sus link -->
</div>
<script src='http://sites.google.com/site/vkuloseasi/archivos/vkumenubar.js' type='text/javascript'></script>
Lo de Rojo es el contenido que se ve en el menú, ahí muestro el ejemplo con imágenes y texto.

Personalizar cambiando las imágenes, link, etc., o poner sus propios botones.

Si quieren pueden descargar el archivo JS y subirlo a otro servidor, sin modificar los datos.

O sustituir:
<script src='http://sites.google.com/site/vkuloseasi/archivos/vkumenubar.js' type='text/javascript'></script>
Y poner en su lugar el script dentro del archivo.

Del siguiente modo:
<script type="text/javascript">

        // aquí va el contenido del script ...

</script>

Si tienen dudas pueden dejar un comentario.

No hay comentarios:

Publicar un comentario