Drop Menus Not Staying Open

Simulating hover effects on touch-enabled devices

Mobile Hover Menu Fix
Problem: When viewing the template on some mobile devices, tablet or smartphone, the drop menus close as soon as they are clicked on. This problem may also occur in the Microsoft Edge browser.

See Also…

Drop menu touch-screen fix
Hover style drop menus, as used in mega menu templates, may not work on some touch-screen devices. The following fix is for any drop down menu with a hover effect, allowing it to simulate hover on touch-screens. We will add the following code to the top level buttons in the drop menu file ("menu.js" or a "menu.htm in the includes folder"):


Example 1.) New aria tag added to an RD-7 mega menu template:

<!-- START MENU 1 - (4 COLUMN) -->

<li aria-haspopup="true" class="hidemenu3"><a href="#" class="drop" onClick="return false;">Company</a>

In the above example we have added the "aria-haspopup" code to the <li> for the first top level menu button (with a space before and after the code). Add this to all the top level button <li> code. Do not add it to every <li>, just to the 5 or 6 top level buttons Buttons may have the following default names: Company, Resources, Menu, Site, Media, Support, Shop (see image #1 below).

Example 2.) New aria tag added in a css drop menu template:

document.write('<li aria-haspopup="true" style="width: 95px;"><a href="#">About Us</a>');

Note: Some menus may include non-drop menus along with the drop menus. The aria-haspopup="true" only needs to be added to menu tabs that drop down, and only to the first <li> in each menu code group. Do not add the code to every <li> (see image #2 below).

Example 1.) Full view of mega menu file in Notepad (RD-7 example):

Mobile Simulate Hover Drop Menu Fix 1

Example 2.) Full view of css menu file in Notepad (T27dChrome example):

Simulate Mobile Hovering Drop Down Menu Fix 2

Related Topics:
Links Not Working After an Edit