WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dropdown Menus

for

From: Middleton, John
Date: Jan 11, 2018 9:03AM

Sandy,
The Adobe accessible Mega Menu doesn't appear to have the ‘hamburger' feature for smaller screens (at least from the configured linked example). You may want to look at Wet/BOEW menu example at: http://wet-boew.github.io/v4.0-ci/demos/menu/menu-en.html


This accessible menu does have the ‘hamburger' menu feature for mobile devices. Of course there will be a boat-load of CSS that goes along with this.

Regards,
John Middleton
Developer/Accessibility Enthusiast
Austin, Tx.


On 1/10/18, 9:25 AM, "WebAIM-Forum on behalf of Sandy Feldman" < <EMAIL REMOVED> on behalf of <EMAIL REMOVED> > wrote:

>Is there an example/tutorial/download of this somewhere where the
>navigation tucks under a hamburger when it's small, the way it does on
>the Adobe site?
>
>thanks! Sandy
>
>
>On 2018-01-09 10:24 AM, Bim Egan wrote:
>> I like the Adobe example of an accessible mega menu:
>> https://adobe-accessibility.github.io/Accessible-Mega-Menu/
>>
>> If appropriate the menu can contain headings, lists, paragraphs or images,
>> as well as the menu links.
>>
>> It behaves exactly as it should, with the menu opening when the top level
>> link is activated and collapsing when keyboard focus moves away from the
>> last item in the dropdown, on desktop anyway. It has only one flaw that I've
>> found and that is that the menu doesn't collapse when focus moves to the
>> next top level link on small screens, for instance with VoiceOver running.
>>
>>
>> HTH,
>>
>> Bim
>>
>>
>>
>>
>>