通过

How to optimize WordPress popup-on-hover menus for touch devices

  • 项目
  • Many web sites have menus that are displayed on hover.
  • On touch-enabled devices, there is no mouse and thus no hover effect.
  • On those menu elements, set the tag property aria-haspopup="true".
  • When an Internet Explorer 10 (Windows 8, Surface, Windows Phone 8, etc.) user on a touch-enabled device first taps on the element, it will behave as reacting to a mouse hover.

 

WordPress

  • According to some current statistics, over 15% of the top one million websites and over 50% of all websites using a CMS are based on WordPress.
  • WordPress supports the aria-haspopup tag for the Admin menu.
  • Themes such as Twenty Eleven and Twenty Twelve have popup menus but don't support this tag.

 

  • In WP 3.5.1, the menu is generated in the file "post-template.php", function "start_el": $output .= $indent . '<li class="' ...
  • The code that generates the menu, does not seem to contain a variable that indicates if the menu has submenu entries, which would be needed to set the aria-haspopup correctly to true or false as needed.

 

  • The HTML for the menu looks like this:

[html]
<div class="menu">
<ul>
<li><a href="https://www.example.com/"title="Home">Home</a></li>
<li class="page_item"><a href="https://www.example.com/page1/">Page 1</a><!– Attr expected here –>
<ul class="children">
<li class="page_item"><ahref="https://www.example.com/page1/page11/">Page 11</a></li>
<li class="page_item"><a href="https://www.example.com/page1/page12/">Page 12</a><!– Attr expected here –>
<ul class="children">
<li class="page_item"><a href="https://www.example.com/page121/page121/">Page 121</a></li>
<li class="page_item"><a href="https://www.example.com/page122/page122/">Page 122</a></li>
</ul>
</li>
</ul>
</li>
<li class="page_item"><a href="https://www.example.com/page2/">Page2</a></li>
<li class="page_item current_page_item"><a href="https://www.example.com/page3/">Page3</a></li>
</ul>
</div>
[/html]

 

  • A workaround would be to add the following JavaScript code to the "footer.php" file just before the closing </body> tag:

[html]
<script>
// Open menu on first tap on touch devices.
jQuery(document).ready(function () {

jQuery(".page_item").has("ul").children("a").attr("aria-haspopup", "true");

});
</script>
[/html]

 

  • I've tested this code for performance at JSPerf.com and it seems to lead to the best results. If you know of a better way, please share it, thanks.

 

  • The above code should work with Twenty Eleven and Twenty Twelve themes and a few others.
  • The Esplanade theme uses other class names, you will need to replace the above jQuery line with this one:

[javascript]
jQuery(".menu-item").has("ul").children("a").attr("aria-haspopup", "true");
[/javascript]

Comments

  • Anonymous
    May 30, 2013
    So simple, so clean, so easy... I love you.. xD

  • Anonymous
    January 14, 2014
    The comment has been removed

  • Anonymous
    December 19, 2014
    What kind of support cross-browser does this method have?  Is it only for IE?  And, thanks!