CODEWITHSUNDEEP
javascriptjqueryhtmlcssnavigation
Michael Armstrong
Michael Armstrong

Reputation: 381

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/

So on hover, it slides out, but doesn't push the content down.

Any ideas? jQuery, or can this be done VIA CSS?

Upvotes: 0

Views: 486

Answers (2)

James G.
James G.

Reputation: 2904

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).

Here is my: JsFiddle

bar is the top bar, baz is the page content and foo is the drop-down. On mouseover of bar, foo drops down without effecting the content, because it is positioned absolutely. The animation keeps it at the bottom of bar. Feel free to play with it and ask questions.

Upvotes: 1

feeela
feeela

Reputation: 29932

One option: if the menu is a child element of the header. In that (markup) case you could set position: relative; to the header and position: absolute; to the menu element to position the one below the other. Use the CSS :hover pseudo class to make the menu visible.

#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. 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;
}

Upvotes: 0

Related Questions