[英]How can I set up my menu to slide out, only when the header is hovered on?
How can I set up my menu to slide out, only when the header is hovered on? 仅当标题悬停在上方时,如何设置菜单才能滑出? I'm looking to set it up to function exactly like this: http://adirondack-demo.squarespace.com/
我希望将其设置为完全像这样运行: http : //adirondack-demo.squarespace.com/
So on hover, it slides out, but doesn't push the content down. 因此,在悬停时,它会滑出,但不会压低内容。
Any ideas? 有任何想法吗? jQuery, or can this be done VIA CSS?
jQuery,还是可以通过CSS完成?
Thought I'd add a javascript version as css animations can be tricky and are often not fully supported (though I'm not sure the other answer even uses animations and I can't seem to get it working). 以为我会添加一个JavaScript版本,因为CSS动画可能很棘手,而且通常不受完全支持(尽管我不确定其他答案甚至使用动画,而且我似乎也无法使其正常工作)。
Here is my: JsFiddle 这是我的: JsFiddle
bar
is the top bar, baz
is the page content and foo
is the drop-down. bar
是顶部栏, baz
是页面内容, foo
是下拉菜单。 On mouseover of bar
, foo
drops down without effecting the content, because it is positioned absolutely. 在
bar
鼠标悬停时, foo
会下拉而不影响其内容,因为它的位置是绝对的。 The animation keeps it at the bottom of bar
. 动画将其保留在
bar
的底部。 Feel free to play with it and ask questions. 随意使用它并提出问题。
One option: if the menu is a child element of the header. 一种选择:如果菜单是标题的子元素。 In that (markup) case you could set
position: relative;
在这种情况下,您可以设置
position: relative;
to the header and position: absolute;
到标题和
position: absolute;
to the menu element to position the one below the other. 到菜单元素以将一个放置在另一个下方。 Use the CSS
:hover
pseudo class to make the menu visible. 使用CSS
:hover
伪类使菜单可见。
#header {
position: relative;
}
#main-menu {
position: absolute;
top: 100%
display: none;
}
#header:hover #main-menu,
#header #main-menu:hover {
display: block;
}
If you want the menu to stay open, if the user crosses the border with his/her cursor, you may use an additional wrapper around the menu. 如果希望菜单保持打开状态,如果用户用光标越过边界,则可以在菜单周围使用其他包装纸。 That wrapper would become the target of the
display
settings. 该包装器将成为
display
设置的目标。 You could then assign that transparent wrapper a padding of your choice. 然后,您可以为该透明包装分配一个您选择的填充。 The menu stays visible as long as the cursor is within the padding of the wrapper element.
只要光标在包装器元素的填充内,菜单就保持可见。
#main-menu-wrapper {
display: none;
padding: 5em;
}
#header:hover #main-menu-wrapper {
#header #main-menu-wrapper:hover {
display: block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.