jQuery 滑动抽屉菜单挡住了其他内容
我的工作菜单(有一个小问题)...
我有一个滑动抽屉菜单系统,我已经成功使用了一段时间。它使用翻转图像,下面的 jsFiddle (#1) 很好地演示了与 static < 相关的操作code>div 代替图像翻转。
我的系统使用容器 div
,每个容器内都有 overflow:hidden;
和抽屉 div
。当 jQuery 动画将抽屉滑出容器时,它会自动隐藏。当您将鼠标从抽屉移回菜单时,可以使用各种其他技术来停止动画,以防止抽屉过早关闭。
感谢 SO 社区的帮助,我们为这个系统投入了大量的时间和精力。它对我很有帮助,但现在菜单抽屉包含更多内容。更大/更长的抽屉揭示了这个新问题,我将在下面描述。
仅出于演示目的,我勾画了容器的轮廓以显示其位置并减慢了动画速度。最终的项目速度更快,并且没有这些轮廓。
#1 - http://jsfiddle.net/PayFw/143/
如您所见,当内容需要交互的(例如链接)位于这些容器后面或部分被这些容器阻挡,该链接由于被覆盖而无法单击。这个问题在 Mozilla 和 Webkit 中会出现,但在 IE-8 中不会出现。 (在这种情况下,我认为 IE 没有按预期工作。)我没有测试其他版本。
使用 z-index 并不是一个解决方案,因为这只会导致抽屉滑到内容后面。显然,我希望抽屉在使用时能够滑过内容。
我一直在尝试...
针对上述小问题的各种解决方案似乎只会导致更复杂的问题。
我认为这个很简单......只需更改使容器不可见 visibility:hidden;
。然后,当您将鼠标悬停以调用滑动抽屉时,请更改为 visibility:visible;
,并在抽屉关闭后返回到 visibility:hidden;
。即使动画增加了复杂性,这也是通过回调完成的,以允许关闭动画在使容器再次不可见之前完成。
当您“干净地”输入菜单项时(“干净地”定义:从顶部/底部而不接触相邻的菜单项),它的工作效果非常好。
然而,这个解决方案带来了一个全新的问题。当您从一个菜单项移动到另一个菜单项时,jQuery 动画 stop()
会干扰下一个菜单的打开,并在您悬停时将其关闭。而且它使回调函数变得不可靠......有时,正如您通过灰色轮廓看到的那样,使容器可见,从而违背了该解决方案的全部目的。
#2 - http://jsfiddle.net/PayFw/144/
问题:
是否有另一种方法可以防止系统 #1 始终阻止内容,即使抽屉已打开是关闭?
如果没有,是否有办法解决版本 #2 的问题?即 - 使容器的可见性与抽屉动画正确切换,同时保持与 版本 #1 中相同的干净/可靠的操作。
如果没有简单实用的解决方案,是否有一个 jQuery 插件可以轻松地与我的系统集成?如果有,是哪一个以及如何?我知道有大量的 jQuery 菜单抽屉系统,但我需要一些可以将可自定义的滑动抽屉放在我的已经存在的图像翻转下的东西(同时不阻止可能落入的任何内容的可点击性)抽屉的操作区域)。
编辑:
关于vzwick发布的答案:他的解决方案简单而出色,但需要进一步解释。他关于使用 display:none;
& 的声明display:block;
代替 visibility:hidden;
& visibility:visible;
只是故事的一部分。
我在容器上使用visibility:hidden;
。
相反,我应该在抽屉上使用display:none;
。
为什么?
通过切换 visibility:hidden;
,容器 保留在内容流中。容器位于流程内,并具有由抽屉尺寸确定的自动尺寸。
通过切换 display:none;
,抽屉 将从内容流中删除。通过从流程中移除抽屉,其容器的尺寸为零。因此,尽管容器仍在内容流中,但它们已折叠,大小为零,不再干扰页面的内容,因此不再需要使它们不可见。
http://jsfiddle.net/PayFw/146/
太棒了。感谢vzwick。
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:
Is there another way to prevent system #1 from always blocking content even when the drawers are closed?
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.
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您的问题可以通过分别使用 display:block 和 display:none 轻松解决:
请参阅 this fiddle 了解工作例子。
编辑:
澄清一下:
将
visibility
属性设置为hidden
基本上只是opacity:0
的另一种说法。该元素仍保留其在盒模型中的尺寸和位置。就您而言,这意味着它会覆盖其他内容。相反,如果将
display
属性设置为none
,则会从盒模型/流中完全删除该元素。Your problem is easily fixed by using display:block and display:none respectively:
See this fiddle for a working example.
Edit:
For clarification:
Setting the
visibility
property tohidden
is basically just another way of sayingopacity: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 tonone
, removes the element from the box model/flow entirely.