Open theanxy opened 10 years ago
IMO the multi-toggle pattern from http://bradfrost.github.io/this-is-responsive/patterns.html#nav-complex would be the best.
Yes I would say this is a big issue for adoption... how well it morphs to mobile
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.
go for it! @thetrickster
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.
A responsive and accessible mega menu sounds brilliant. Thanks @thetrickster
Usability on small screens could be vastly improved.
Low-hanging fruits:
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.