Question

My Working Menu (with a minor problem)…

I have a sliding drawer menu system I’ve been using successfully for quite a while. It uses rollover images and this working jsFiddle (#1) below nicely demonstrates just the relevant operation with static div‘s in place of the image rollovers.

My system uses container div‘s with overflow:hidden; and drawer div‘s inside each. When a jQuery animation slides the drawer outside the container it’s automatically hidden. Various other techniques are used to stop the animation when you move your mouse from the drawer back to the menu in order to prevent the drawer from closing prematurely.

Lots of time and effort was put into this system thanks to the help of the SO community. It served me well but now the menu drawers contain a lot more content. The larger/longer drawers have revealed this new issue as I’ll describe below.

Just for demonstration purposes, I’ve outlined the containers to show their positions and slowed the animation. The final project is faster and does not have these outlines.

#1 – http://jsfiddle.net/PayFw/143/

As you can see, when content (a link for example) requiring interaction is behind or partially blocked by these containers, the link is not clickable as it’s being covered. This problem can be seen in Mozilla and Webkit but not IE-8. (In this case, I think IE it not working as expected.) I have not tested other versions.

Playing with z-index is not a solution because that only causes the drawers to slide behind the content. Obviously, I want the drawers to slide over the content while in use.

---

What I’ve been trying…

Various solutions to the small issue above only seems to lead to more complicated issues.

I thought this one would be simple… just change make the containers invisible with visibility:hidden;. Then when you hover to invoke the sliding drawer, change to visibility:visible; and back to visibility:hidden; after the drawer closes. Even with the added complication of the animation, this is done with a callback to allow the closing animation to complete before making the container invisible again.

It’s working very good when you enter the menu item “cleanly” (“cleanly” defined: from the top/bottom while not touching adjacent menu items).

However, this solution has created a whole new problem. When you move from one menu item to another, the jQuery animation stop() interferes with the opening of the next menu and slams it shut while you’re still hovering it. And it’s making the callback function unreliable…. sometimes, as you can see via the gray outline, leaves the container visible, defeating the whole purpose of this solution.

#2 – http://jsfiddle.net/PayFw/144/

---

Questions:

1. Is there another way to prevent system #1 from always blocking content even when the drawers are closed?

2. If not, is there a way to fix the problems with version #2? i.e. – get the container’s visibility to properly toggle with the drawer animation while maintaining the same clean/reliable operation as in version #1.

3. If there is no simple or practical solution, is there a jQuery plugin that can be easily integrated with my system? If so, which one and how? I know there are tons of jQuery menu drawer systems but I need something that can just put customizable sliding drawers under my already existing image rollovers (while not blocking the click-ability of any content that might fall into the drawers’ zone of operation).

---

EDIT:

Regarding answer posted by vzwick: His solution is simple and brilliant but it needs further explanation. His statement about using display:none; & display:block; in place of visibility:hidden; & visibility:visible; is only part of the story.

I was using visibility:hidden; on the containers.

Instead, I should have been using display:none; on the drawers.

Why?

By toggling visibility:hidden;, the container stays within the content flow. The containers are within the flow and have an automatic size that is determined by the drawer size.

By toggling display:none;, the drawer is removed from the content flow. By removing the drawer from the flow, its container becomes zero size. So although the containers are still in the content flow, they are collapsed, zero size, no longer interfering with the page’s content and therefore no longer a need to make them invisible.

http://jsfiddle.net/PayFw/146/

Brilliant. Thanks to vzwick.

Answer 1

Your problem is easily fixed by using display:block and display:none respectively:

$('div[id|="m"]').each(function (i) {

    $(this).hover(enter, leave);

    $ht[i] = ($('#menu-'+i).height());
    $('#menu-'+i).css({
        'top': '-'+$ht[i]+'px',
        'display': 'none' // <--- changed
    });

});

function enter() { 
     j = $(this).attr('id').replace(/m-/, "");
     $('#menu-'+j).data({closing: false}).stop(true, false).animate({top: '0'},800).css({'display' : 'block'}); // <--- changed
};

function leave() { 
     $('#menu-'+j).data({closing: true}).delay(100).animate({top: '-'+$ht[j]+'px'},800, function(){ $(this).css({'display' : 'none'}) }); // <--- changed
};

See this fiddle for a working example.

Edit:

For clarification:

Setting the visibility property to hidden is basically just another way of saying opacity:0. The element still retains its dimensions and position in the box model. In your case, this means that it overlays other content.

The display property, in contrast, when set to none, removes the element from the box model/flow entirely.