UberMenu detects devices which support touch interactions and loads a touch-specific interface using javascript touch events.
Understanding Touch Interfaces
On a machine with a mouse (a pointer), there are two interactions that can occur: hover and click. The standard navigation menu paradigm is that when a user hovers over a menu item, its submenu is displayed; when the user clicks, the link is followed.
On a mobile device with a touch interface, there is only one interaction – a touch/tap. When the user taps on a menu item, it is ambiguous whether the user intended to follow the link, or open the submenu. Therefore these actions are executed on sequential taps. In short:
1. The first touch will open the submenu
2. The second touch will follow the link
Of course, it is a bit more complex than that based on the scenario. It can be summed up with these rules:
- If the menu item does not have a submenu, follow the link
- If the menu item has a submenu, and the submenu is closed, open the submenu
- If the menu item has a submenu, and the submenu is open, follow the link
- If the menu item has a submenu, and the submenu is open, but the item is not a link, close the submenu
(Note that the submenu can be closed with the Submenu Close Buttons)
The touch interface logic is displayed in this flowchart:
