Multi level drop up menu on hover

[Harleyy]

Hello Everyone.

I am working on a dropup menu that animates from bottom to top on mouse hover.

This is the script for it.




$(function() {
$('.menu > li ').hover(
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'0px'
}, 600);
$('i',$this).stop(true,true).animate({
'top':'-10px'
}, 700);
},

function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-300px'
}, -1);
$('i',$this).stop(true,true).animate({
'top':'50px'
}, 700);
}
);
});




This script drops up the menu.

I am trying to integrate the dyamic drive menu which is http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/demo2.htm inside the drop up menu.

What happens is that when i hover the mouse on the drop up menu, the menu drop ups with the ddlevelsmenu, but when I hover on say CSS library and when I take my mouse to the items inside css library, my drop up menu closes.

What I want is that when I hover to any level from the ddlevelsmenu, my drop up menu should not close untill i mouse out entirely from all the items inside it.

Awaiting Solutions.

Regards,
Harley

[jscheuer1]

The meaning of hover in jQuery is mouseenter/mouseleave which are like mouseover/mouseout but that make sure that the related target, the one the mouse is moving to, isn't a child of the one being moused out of. That often throws off these type of scripts. So, as long as your nested menu is actually nested within the markup of your outer menu, it should work.

Oh, but I see you are using li tags as does the menu you are nesting, that could be a problem.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[Harleyy]

The meaning of hover in jQuery is mouseenter/mouseleave which are like mouseover/mouseout but that make sure that the related target, the one the mouse is moving to, isn't a child of the one being moused out of. That often throws off these type of scripts. So, as long as your nested menu is actually nested within the markup of your outer menu, it should work.

Oh, but I see you are using li tags as does the menu you are nesting, that could be a problem.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Hello Sir,

Thank you for the reply.
I am attaching the .zip file that consists of the relevant files.
4690

I hope this helps.

Regards,
Harley.

[Harleyy]

Is there no one who can give me a solution for the above problem??

[jscheuer1]

One way would be to put all of the content inside the triggers. For that you would need a different secondary menu.

Perhaps:

http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/