search

adobe-accessibility / Accessible-Mega-Menu

A demonstration of how to implement a keyboard and screen reader accessible mega menu as a jQuery plugin.
Apache License 2.0
605 stars 199 forks source link

Visual indication of presence of sub-menu #57

Open grahamarmfield opened 5 years ago

grahamarmfield commented 5 years ago

Would it be a good idea to include some kind of icon (downwards pointing arrow maybe) in the top-level items? This would help to alert sighted keyboard users that a dropdown menu was present.

newdesignideas commented 5 years ago

Hi Graham, I have done so at PARiM Workforce Software website.

I added an <i class="parim-menu-caret-two"></i> inside the first level link with sub-menu items (you can do the same thing with ::before or ::after pseudo-elements as well):

<li class="megamenu-top-nav-item parim-menu-industries">
                                    <a href="https://parim.co/proven-workforce-software" class="parim-menu-caret open" title="Solutions By Industry" id="megamenu-1540188573104-3" aria-controls="megamenu-1540188573104-4" aria-expanded="true"><i class="parim-menu-caret-two"></i>Industries</a>...

As for CSS - I had two classes - in the normal state the arrow points downwards and in the open state the arrow flicks upwards like this: 

.parim-menu-caret-two {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #318FCE;
    position: absolute;
    top: 17px;
    left: 3px;
}

.open .parim-menu-caret-two {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 0px solid transparent;
    border-bottom: 5px solid #318FCE;
    position: absolute;
    top: 17px;
    left: 3px;
    transition: border ease-out 0.05s;
}

You also need to set position:relative; for the first level menu items so the absolute positioning of the caret/arrow works. Inspect the code of our site to see all of the CSS.