Delayed flyout menu

January 17, 2014

Reading time ~1 minute

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>
  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?

Building a layout system

The journey of building a flexible, customisable, responsive grid system in Sass Continue reading

Look Ma, no jQuery!

Published on January 13, 2014

It’s okay to be shit

Published on December 19, 2013