Appearance on smaller screens

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

Appearance on smaller screens #2

Open theanxy opened 10 years ago

theanxy commented 10 years ago

Usability on small screens could be vastly improved.

Low-hanging fruits:

Transform mega menu to 1 column
Hide content of sections keeping only subtitles and letting uses reveal the content if needed

Requires more work: There’s a couple of mobile patterns which could be used here to avoid problems such as hiding the content beneath the dropdown.

theanxy commented 10 years ago

IMO the multi-toggle pattern from http://bradfrost.github.io/this-is-responsive/patterns.html#nav-complex would be the best.

DavidMacDonald commented 10 years ago

Yes I would say this is a big issue for adoption... how well it morphs to mobile

thetrickster commented 10 years ago

Is anyone tackling responsiveness? I could give it a shot. I guess we should probably have one breakpoint. I see some of the widths in the current CSS are in px but I think we should set our breakpoint with EMs-- either at 40em or slightly larger at 47.938em.

Has anyone started this yet? I like the multi-toggle pattern as well.

DavidMacDonald commented 10 years ago

go for it! @thetrickster

thetrickster commented 10 years ago

I've got the basic functionality of the CSS to work with one breakpoint set-- the problem I think I'm having now is the javascript functionality I guess. On smaller screens we'll need it the browser to scroll to the top of the menu panel.

Also-- I know it will rarely happen, but right now since the menu is activated on hover for desktops when you test with just the browser it's hard to use with the hover event.

Here's what I've got so far: https://github.com/thetrickster/Accessible-Mega-Menu/tree/responsive-megamenu

Honestly I haven't had a chance yet to dig into the JS so this is just a start with the CSS but it's getting there. You'll see that some of the borders of child elements aren't necessary when the columns are stacked but I'll just move that into main.css I guess.

flickster commented 10 years ago

A responsive and accessible mega menu sounds brilliant. Thanks @thetrickster