Our website features four primary menu items (Shirts, Pants, Footwear, Headgear), each with a subnavigation menu that opens when clicked. For instance, selecting Shirts reveals options from ABC Brand to Z Brand.
The main navigation class is .mainNav
The sub navigation class is .subNav
We aim for an intuitive user experience where navigating through the subNav and reaching the end will automatically transition the user to the next mainNav item. For example, if a user is on Shirts > Z Brand and presses tab, we want the subNav for Shirts to close, directing the user to Pants.
To achieve this functionality, how can we identify the final focusable item in the subNav so that the desired action takes place upon hitting tab?
<div class="mainNav">
<a="#">Shirts</a>
<a="#">Pants</a>
<a="#">Footwear</a>
<a="#">Headgear</a>
</div>
<div class="subNav-0">
<h1>Shirts</h1>
<a="#">ABC Brand</a>
<a="#">Guess</a>
<a="#">Levis</a>
<a="#">Z Brand</a>
</div>
<div class="subNav-1">
<h1>Pants</h1>
<a="#">ABC Brand</a>
<a="#">Guess</a>
<a="#">Levis</a>
<a="#">Z Brand</a>
</div>
<div class="subNav-2">
<h1>Headgear</h1>
<a="#">Big Caps</a>
<a="#">Levis</a>
<a="#">Pacific Hatwear</a>
<a="#">Polo</a>
<a="#">Stetson</a>
</div>
<div class="subNav-3">
<h1>Footwear</h1>
<a="#">Adidas</a>
<a="#">Asics</a>
<a="#">Brooks</a>
<a="#">Converse</a>
<a="#">New Balance</a>
<a="#">Nike</a>
<a="#">Puma</a>
<a="#">Saucony</a>
</div>