Mega nav, super nav, dropdown, flyout… whatever. Big desktop navigation. Just catch a corner of it with your cursor and out it comes. Oy.
This can be incredibly frustrating. I’m looking at you John Lewis, Harrods, and Debenhams. Hmm, I’m noticing a trend.
You might just be moving your cursor down the page because, y’know, you want to click something. The fact you happened to go over a menu item on your way there doesn’t mean you want to be stonewalled with an enormous navigation block.
I ran into this same issue in a recent project and opted for a lightweight solution that utilises CSS transitions on opacity, visibility and max-height. And here’s the nice part: by adding in a .25s delay attribute, it doesn’t fire if you were to just brush over it.
/* Sass (SCSS syntax) */
// on hover/focus fade in the auto height on the <ul>
.has_children{
...
ul {
height: auto;
max-height: 0;
opacity: 0;
visibility: hidden;
}
&:hover ul,
&:focus ul{
visibility: visible;
opacity: 1;
max-height: 500px; /* bigger than it ever needs to be */
// vendor-prefixed
transition: .35s ease .25s;
}
}
By setting the max-height to an arbitrary number larger than it ever needs to be, you get the ‘slide down’ effect.
Want something more instant? Toggle between 0 and auto on the height property instead. You could also ditch the fade by removing the opacity.
Need it to ease-in slower/faster, and with more/less delay? Fiddle with the transiton attributes.
There’s loads of combinations and variations to customise it.
Pen? Pen.
See the Pen Delayed hover menu using CSS by Tobias Harison-Denby (@quagliero) on CodePen.
N.B For some reason it doesn’t fire on focus if I tab to it, but it does if you use the Chrome inspector and set the element state to :focus… any ideas?