Share via


Flyout menu on touch screen.

Flyout menu is very common way of displaying menu. It works pretty well while interacting using mouse because with mouse it is easier to capture mouseover and mouseout event.

If the device is touch enabled, then getting flyout menu gets tricky because there is no equivalent of hover in touch-based browsing.

Internet Explorer 10 on Windows 8 introduces a new use for the aria-haspopup  DOM property, simulating hover on touch-enabled devices.

To make flyout work in Internet Explorer 10 on Windows 8, set the aria-haspopup = true on menu item (so that submenu items can come as flyout) and set aria-haspopup = false on submenu items (so that sub menu items can be clicked).

Enabling the aria-haspopup property doesn't change the behavior of your webpage for visitors using a mouse and keyboard.