Response title
This is preview!
Help with a floating menu
in Using jQuery
•
9 years ago
I've made a menu like in the following pic:
As you can see, the submenus need to have a small margin between them, and this is what is causing me the problem. The way I implemented the jQuery code, when I want to go from a level to a child sublevel, I have to rush before the hide effect ends if I want to keep the child submenu visible in order to navigate through its items.
Having that div#nav has a relative position and all the submenus, not the first level, initially have absolute position through CSS, this is JS the code I'm using:
As you can see, the submenus need to have a small margin between them, and this is what is causing me the problem. The way I implemented the jQuery code, when I want to go from a level to a child sublevel, I have to rush before the hide effect ends if I want to keep the child submenu visible in order to navigate through its items.
Having that div#nav has a relative position and all the submenus, not the first level, initially have absolute position through CSS, this is JS the code I'm using:
- $.noConflict();
jQuery(document).ready(function($) {
// Position submenus from level 2 on (0-based)
$('.subsubmenu').each(function() {
var theWidth = $(this).width();
var theHeight = $(this).parent().css('top') - $(this).parent().innerHeight();
$(this).css({'position': 'absolute', 'right' : -1* theWidth - 10 + 'px', 'top' : theHeight});
});
// Hide submenus initially
$('.submenu, .subsubmenu').hide();
// Menu actions
$('div#nav ul li').hover(
function() {
$(this).children('ul').each(function() {
$(this).fadeIn(100);
});
},
function() {
$(this).children('ul').each(function() {
$(this).fadeOut(100);
});
}
).click(function() {
$(this).children('ul').each(function() {
$(this).fadeOut(100);
});
});
});
I'd like to keep the menu open when passing from one level to another.
Two ideas buzz around my head:
Two ideas buzz around my head:
- To place it all in a transparent cointainer which keeps the menu open while the mouse pointer is over it. I don't think this is a good choice because there would be large blank areas which would keep it open.
- To somehow delay the triggering of the fade out effect. I tried the delay() function, but it only did that: to delay the triggering action. The submenu still wanted to fade out, a few millisecs after, when the mouse pointer was over it already. The fade in effect turns around the fade out before it is completed though.
What would you suggest to fix this?
1
