I have a site I'm attempting to make more accessible. I would like that when a user tabs through links (focus), the menu will drop down and continue to let the user tab through submenu links. When the submenu links are done, it tabs to the next main menu item.
This is an abbreviated version of the nav code:
<nav id="main-menu-con" class="mmenucon">
<div class="menu-menu-1-container">
<ul id="menu-menu-1" class="main-menu-items">
<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-51"><a href="http://rgb.2bf.myftpupload.com/" aria-current="page">Home</a></li>
<li id="menu-item-5508" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-5508"><a href="http://rgb.2bf.myftpupload.com/books-more/">Books & More</a>
<ul class="sub-menu" style="display: none; visibility: visible;">
<li id="menu-item-5517" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5517"><a href="http://rgb.2bf.myftpupload.com/books-more/browse-our-catalog/">Browse our Catalog</a></li>
<li id="menu-item-5512" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5512"><a href="http://rgb.2bf.myftpupload.com/books-more/learning-and-research/">Learning and Research</a></li>
</ul>
</li>
<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-53"><a href="http://rgb.2bf.myftpupload.com/e-library/">E-Library</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-9223" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9223"><a href="http://rgb.2bf.myftpupload.com/e-library/lynx-libraries-app/">Lynx! Libraries App</a></li>
<li id="menu-item-9068" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9068"><a href="http://rgb.2bf.myftpupload.com/e-library/overdrive-libby/">Overdrive/Libby</a></li>
</ul>
</li>
</ul>
</div>
</nav>
The submenus are initially hidden by jQuery, I believe, by this code:
jQuery(document).ready(function(){ 'use strict'; jQuery("#main-menu-con ul ul").css({display: "none"});
and revealed on mouseover by this code:
jQuery('#main-menu-con ul li').hover( function() { jQuery(this).find('ul:first').slideDown(300).css('visibility', 'visible'); }, function() { jQuery(this).find('ul:first').slideUp(100); });
I'm not sure this is right, because when you mouseover, the display of submenu goes from "none" to "block".
I'd like the same to happen when the menu is in the focused state. I'm not sure if I need to do it in JS or if CSS will work.
I'm not great at JS (which I believe is the best method), so I tried these versions:
jQuery('#main-menu-con ul li').focusin( function() { jQuery(this).find('ul').css('visibility', 'visible');});
jQuery('#main-menu-con ul li').focusin( function() { jQuery(this).find('ul').css('display', 'block');});
jQuery('#main-menu-con ul li a').focus( function() { jQuery(this).find('ul:first').slideDown(300).css('display','block'); }, function() { jQuery(this).find('ul:first').slideUp(100); });
None worked.
I've also tried targeting it with CSS by this code.
li a:focus + .sub-menu {
display: block !important;
}
Which seems to work, but I'm not sure it's the best method, because when focus moves to the next menu, the drop down stays visible.
If having the site link helps it's here: http://rgb.2bf.myftpupload.com/