javascript - lista - Logrando este estilo de menús desplegables en jQuery

lista desplegable jquery

Question

Estaba navegando por la web y encontré este sitio . Observé cómo funciona el menú desplegable de la barra de navegación, y quiero implementar algo similar en mi sitio web.

Después de entrar en el código fuente de la página, encontré que esas áreas desplegables están contenidas en div s con la clase fOut .

Resulta que esto se está haciendo con MooTools. Aquí está el script en sí (al que se hace referencia en la página original después del script Mootools en sí):

window.addEvent(''domready'', function() {
$("primaryNav").getChildren("li").addEvents({
"mouseenter": function(){
$(this).addClass("hover").getChildren("a").addClass("hover");
},
"mouseleave": function(){
$(this).removeClass("hover").getChildren("a").removeClass("hover");
}
});
$$(".fOut").each(function(el,i){
var ifr = $(document.createElement("iframe"));
ifr.className = "ieBgIframe";
ifr.frameBorder = "0";
ifr.src="about:blank";
ifr.injectInside(el);
var p = el.getParent();
p.addClass("hover");
var h = el.getSize().size.y;
p.removeClass("hover");
ifr.height=h;
});
$$(".olderVersionsToggle").addEvents({
"click": function(e){
var event = new Event(e);
event.stop();
var p = $(this).getParent().getNext();
if(p.hasClass("open")){
p.removeClass("open");
$(this).setText("Show previous versions...");
}
else{
p.addClass("open");
$(this).setText("Hide previous versions...");
}
return false;
}
});
});

Mis preguntas)

Tengo dos preguntas sobre este código.

1. ¿Como funciona? No entiendo muy bien lo que está haciendo, con el iframe y todo.
2. ¿Cómo se puede implementar esto en jQuery?

Answer 1

Funciona igual que cualquier otro menú de sobrevuelo, el submenú está posicionado estáticamente y agrega el estado de desplazamiento (clase) cuando pasa el mouse sobre un elemento de menú. Se ve (desde el DOM) como si estuvieran usando el iframe para hackear algunos problemas de IE. Abre una sesión de consola y mira los elementos para ver lo que quiero decir, los iframes no cambian con el tiempo, simplemente se quedan allí vacíos.

En cuanto a implementarlo en jQuery, comenzaría con tu diseño dom (asegúrate de que todo esté alineado en la misma área y completa tus submenús con contenido bien diseñado). A continuación, enlace el mouseenter y el mouseleave eventos como:

$("primaryNav li").mouseenter(function() {$(this).addClass("hover");$("a", this).addClass("hover");});
$("primaryNav li").mouseleave(function() {$(this).removeClass("hover"); $("a", this).removeClass("hover");});

Están usando iframe para establecer una altura consistente a través de los elementos (parece), puedes hacer esto simplemente configurando la altura del div para que sea una cantidad estática o después de renderizar cada sub menú simplemente encuentre el más alto (usando innerHeight o outerHeight dependiendo de su necesidad) y configure el resto para que coincida con la altura.