5.2 – Click or hover

trigger

options:
  variant: dropdown
  trigger: hover   # click (default) | hover
  folderClick: link

Applies to dropdown, mega and flyout.

click opens a menu when its folder is clicked. That works everywhere, even without a script.

hover opens it on hover and — so keyboard users are not left out — also as soon as an entry inside receives focus. On leaving it closes after a short delay, so a menu does not snap shut when the mouse cuts a corner.

Hover only exists on devices that support it. On a smartphone or tablet click applies automatically.

hover belongs with folderClick: link

With toggle, a click closes the menu that hovering had already opened. With link, hovering opens the menu and the click leads to the folder page — which is what you expect from a menu bar.

How menus close

• Opening another one closes the open one on the same level.
• A click elsewhere closes all menus of this navigation.
• Escape closes all and puts focus back on the folder whose menu it came from.
• A page change closes all before the new page appears.

Where a panel moves to

When a panel opens, the script checks whether it has room.

flyout in the right half. With flyout.side: auto the panels open to the left when the navigation sits in the right half of the window — otherwise they would stick out. The chevron then points left. right and left switch the check off.

dropdown and mega at the right edge. A menu that would stick out of the window on the right hangs from the right edge of its entry instead of the left.

In a column that clips. If the sidebar scrolls on its own, or fades out softly at the bottom, it would cut a panel off. The panel is then lifted out of the column — into the browser’s top layer, in older browsers with a fixed position — and anchored to its row. Because a position anchored like that does not move along when scrolling, it closes as soon as you scroll.