drop down challenge using grid box and flex with a lil javascript

Community feedback

• 

  Ifeanyichukwu•240

  @ifeanyiihPosted over 2 years ago

  I hope this resource helps you nested-navigation .

  From the above resource, you will see how to write accessible drop down menus. Use it as a template to get to your final outcome.

  It might be useful to omit this part when implementing your own solution:

  // event delegation
  document.addEventListener('focusin', function(event) {
      // reset list style on every focusin
      reset();
  
      // check if a[aria-haspopup="true"] got focus
      var target = event.target;
      var hasPopup = target.getAttribute('aria-haspopup') === 'true';
      if (hasPopup) {
          open(event.target.nextElementSibling);
          return;
      }
  
      // check if anchor inside sub menu got focus
      var popupAnchor = target.parentNode.parentNode.previousElementSibling;
      var isSubMenuAnchor = popupAnchor && popupAnchor.getAttribute('aria-haspopup') === 'true';
      if (isSubMenuAnchor) {
          open(popupAnchor.nextElementSibling);
          return;
      }
  })
  

  0