Accessible Drop-Down Main Menu

  • With an accessible accordion set in hand, you have a perfect base for an accessible main menu:
    • Accordion set is perfect for the mobile menu view.
    • Accordion functionality on desktop view great for people with hand motor control - they can 'pin' sub-panels open.
    • Outside of custom styling and adjustments to hide all 'panels' by default in non-mobile views, main addition is one simple CSS rule:
        DIV.gt-main-menu NAV LI:hover DIV.gt-menu-tray {
          display: block;
        }
      

      Deciphered: adds 'display: block' rule to the 'gt-menu-tray' drop-down panel when mouse cursor is over the parent LI object ('hover' pseudo-class).

  • Important trick for getting absolutely positioned drop-downs to align correctly:

      DIV.gt-main-menu NAV LI {
        display: inline-block;
        position: relative;
      }