Pop: DropDown Menu
Escrito el 26 Jan, 2009 por Alexis en Diseño, Misc
Pop es una solución rápida a la hora de crear de un Menu DropDown potenciado con JQuery.
Cumple con todas las funciones de DropDown, es decir con un click muestra el contenido y con otro lo esconde de manera no invasiva.
Para ponerlo en acción solo necesitamos:
Incluir el CSS pertinente
<link href="/pop/stylesheets/pop.css" media="all" rel="stylesheet" type="text/css"/>
Incluir JQuery.js y jquery.pop.js
<script language="javascript" src="/pop/javascripts/jquery.js" type="text/javascript"></script> <script language="javascript" src="/pop/javascripts/jquery.pop.js" type="text/javascript"></script>
Inicializar el Script
<script type='text/javascript'>
$(document).ready(function(){
$.pop();
});
</script>Enmarcar todo dentro de un div con la clase deseada
<div class='pop'> <p>you can put anything you want in here!</p> <p>images, links, movies of your cats. you name it!</p> </div>
Se puede ver un demo aquí junto con el código de fuente.
7 comentarios to “Pop: DropDown Menu”
Back to TopDejar un comentario
Additional comments powered by BackType
















manuel |29/1/2009| Site: Who knows?
hola!, cundo ejecuto el tutorial, no puedo ver el el boton de la fkechirta, ayuda por favor!!
manuel |29/1/2009| Site: Who knows?
Alexis, muchas gracias!, me meti en el css quew viene con la aplicacion, y bueno, el archivo que viene por defecto trae esta direccion:
.pop .pop_toggle {
background-image: url(/images/arrow-down.gif);
pero deberia decir:
.pop .pop_toggle {
background-image: url(../images/arrow-down.gif);
con los dos puntos antes, de esa manera puede leer correctamente las imagenes, te agradezco mucho, me acabas de safar de una! :)
Alexis |29/3/2009| Site: eliseos.net
Creo que debes referir a IE6, el problema en si es IE6.
Con versiones mas nuevas del navegador el script funciona correctamente.
Alexis |30/3/2009| Site: eliseos.net
En ese caso fíjate que la librería y el plugin estén bien instalados, ya que lo he testeado con IE8 y IE8 modo compatibilidad con IE7 y parece funcionar correctamente.
Dontivero |29/3/2009| Site: Who knows?
Con Internet Explorer no funciona, tenes idea porque sera ?
Dontivero |30/3/2009| Site: Who knows?
Mira mañana lo voy a probar con explorer 7, no se como fue pero en mi maquina tengo la version de internet explorer 8 beta. Gracias por la pronta respuesta. Saludos, y esta excelente tu sitio.
Alexis |29/1/2009| Site: eliseos.net
La “flechita” se encuentra definida por un div
Si utilizaste el style (CSS) que viene por default veras que el div en cuestion (en este caso .pop .pop_toggle) tiene un propiedad que se llama: background-image que es la que define la “flechita” ; que para este caso es una imagen.
En claro: tenes que defininir/crear un clase llamada .pop .pop_toggle
en tu hoja de estilo y asignarle una imagen. Algo asi como este ejemplo
Espero que se ese pequeño detalle el que no te permita usar este plugin.
Saludos y Suerte