search

frend / frend.co

Frend — A collection of accessible, modern front-end components.
http://frend.co
MIT License
635 stars 25 forks source link

Feature Request: Mega menu #68

Open noahmanger opened 8 years ago

noahmanger commented 8 years ago

I love what y'all are doing with this project. Really seems to fill a need I've seen, and I really appreciate the approach. I see "dropdown menu" on the road-map. Is that going to be a traditional dropdown, or more of a mega menu? I'm working on implementing an accessible mega menu right now and had a hell of a time finding a library or example.

The only thing I could find was Adobe's Accessible Mega Menu. It works well, but I'd love something without the jQuery dependency and that I could get with npm.

Just a thought! Keep up the rad work.

thomasdigby commented 8 years ago

Thanks @noahmanger, we appreciate it!

The current dropdown-menu is a bit of a placeholder for the time-being. We've got a bunch of components that we plan to build so we're going to sit down and review them at some point, I imagine the dropdown-menu/mega-menu will jump to the top of that list.

Adobes implementation seems to match the spec pretty closely so we'll definitely reference that when we start looking at it. I'll let you know when we have something up and running.

noahmanger commented 8 years ago

Thanks! Another great example is what they do with consumerfinance.gov . Their's is actually responsive too, which would be a huge plus. (Feel free to close this issue).

jpdevries commented 8 years ago

I love what y'all are doing with this project.

Me too. I have a component that I suppose isn't a "mega menu" but is more of a Github-inspired navigation browser. It's the result of trying to re-design the classic "left hand tree" component to being mobile first. It simplifies things by only "expanding" or displaying one level at a time, just like browsing files on GitHub.

It's built HTML–first and makes use of position:sticky to stick a search bar to being at the top of the page when it is "scrolled beyond".

As seen on markup.tips and MAM. If anyone is looking to re-use something like that or thinks it would be a good submission let me know. It was originally progressively enhanced with React but I've been exploring the concept of using different "js drivers" to enhance components and wouldn't mind writing one for this in VanillaJS.

adamduncan commented 8 years ago

The Adobe menu seems like a great example to follow here. Doesn't look like the .com still runs with it, but the example page and a follow-up are handy references. Also loads of key bindings, etc. in the APG spec.

If everyone's on the same page with that approach, we could get a dev branch underway?