Appearance on smaller screens

[adobe-accessibility]

Appearance on smaller screens

[theanxy]

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

[DavidMacDonald]

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

[thetrickster]

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]

go for it! @thetrickster

[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.

[flickster]

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