Drop Menus Not Staying Open
Simulating hover effects on touch-enabled devices
Drop menu touch-screen fix
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.
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"):
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).
New aria tag added in a css drop menu template:
document.write('<li aria-haspopup="true" style="width: 95px;"><a href="#">About Us</a>');
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).
Full view of mega menu file in Notepad (RD-7 example):
Full view of css menu file in Notepad (T27dChrome example):
Links Not Working After an Edit