Jquery: Navigating in menu using tab

Question

I want to find a general rule that will help me navigate in menus, using tab. I know how to catch the tab event but there are several problems:

1. There are drop-down menus that i can't accese only be pressing tab key.
2. The structure of the drop-down menus is not standard. ie the hidden ul elements may be inside other elements (eg div) or may be nested drop-down menus inside other drop-down menus
3. The events that make the hidden menus to be visible/invisible vary. Click and hover events are the most popular.

Can someone help me?

Answer 1

You can use the tabindex attribute on the list item that triggers the showing of your dropdown. This wil make the parent li focusable by pressing tab. You can then, with some CSS and Javascript, apply rules to children to make them visible.

About the fiddle:

Note that I use the opacity and pointer-events properties in CSS to switch states of the dropdown. When an element has visibility: hidden or display: none applied, it will not be focusable at all. Since the tab key by default brings focus to the next focusable element, your target element should not have either of those properties set to the shown values at the point the tab key is being pressed.

Also, you'll have to accurately keep track of the tabindexes throughout your navigation. First is the first main anchor, then the enclosing list-item, to make the dropdown visible. Then come the anchors inside that. (this is the point where JS has to take over from CSS) This brings us at tabindex 5 when the 3 subItems inside are assigned a tabindex, so we'll continue counting from 6 for the next main item's direct <a> child, and so forth.

You'll have to figure out the way to make your multi-level dropdowns work as expected yourself, but this is a starting point. You could additionally check in your script for arrow key presses, and give another element focus in response.

Fiddle:

 $(function() { $('nav').on('focus', '.dropdown a', function() { $(this).closest('.mainItem').addClass('focus'); }).on('blur', '.dropdown a', function() { $(this).closest('.mainItem').removeClass('focus'); }); }); 

 nav > ul { display: flex; } nav ul { list-style: none; margin: 0; padding: 0; } nav .mainItem { position: relative; margin: 0 5px; padding: 0.5rem; background-color: #eee; } nav .dropdown { position: absolute; width: 100%; left: 0; top: 100%; opacity: 0; pointer-events: none; } nav .mainItem:hover .dropdown, nav .mainItem:focus .dropdown, nav .mainItem.focus .dropdown, nav .mainItem > a:hover .dropdown, nav .mainItem > a:focus .dropdown nav .mainItem.focus .dropdown { opacity: 1; pointer-events: all; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <ul> <li class="mainItem" tabindex="2"><a href="#" tabindex="1">Parent 1</a> <ul class="dropdown"> <li><a href="#" tabindex="3">Child 1</a></li> <li><a href="#" tabindex="4">Child 2</a></li> <li><a href="#" tabindex="5">Child 3</a></li> </ul> </li> <li class="mainItem" tabindex="7"><a href="#" tabindex="6">Parent 2</a> <ul class="dropdown"> <li><a href="#" tabindex="8">Child 1</a></li> <li><a href="#" tabindex="9">Child 2</a></li> <li><a href="#" tabindex="10">Child 3</a></li> </ul> </li> </ul> </nav>