Menu icon Foundation
Mega Menu - Full Width Dropdown Challenge

Hey Foundation Fans! Want to prove your mettle? Want some super-sweet ZURB shwag? Well, we have a fun code challenge for you!

--

Who ever can build the best Mega Menu http://designm.ag/inspiration/mega-menus/ using either Foundation Top-bar, Drop Down Buttons or plain old CSS and JavaSript, gets a Foundation Yeti Tee-shirt and stickers!

It can be either a desktop only solution and use off-canvas for small or a fully integrated version like top-bar.

Here are some ideas posted on the Forum to get inspiration:
(click edit pen to see code)

http://cdpn.io/oepzE By Asif

http://cdpn.io/gHxBn By Me
or
http://cdpn.io/kasyE

With help from Joe Watkins
http://cdpn.io/KkasB

==

The post voted "most-helpful" on our Foundation Forum will receive the totally awesome gift, which will be announced on Tuesday the 11th. Thanks for contributing, good luck and happy coding!

Foundation shirts blog

mega menufull widthdropdowntopbar

Hey Foundation Fans! Want to prove your mettle? Want some super-sweet ZURB shwag? Well, we have a fun code challenge for you!

--

Who ever can build the best Mega Menu http://designm.ag/inspiration/mega-menus/ using either Foundation Top-bar, Drop Down Buttons or plain old CSS and JavaSript, gets a Foundation Yeti Tee-shirt and stickers!

It can be either a desktop only solution and use off-canvas for small or a fully integrated version like top-bar.

Here are some ideas posted on the Forum to get inspiration:
(click edit pen to see code)

http://cdpn.io/oepzE By Asif

http://cdpn.io/gHxBn By Me
or
http://cdpn.io/kasyE

With help from Joe Watkins
http://cdpn.io/KkasB

==

The post voted "most-helpful" on our Foundation Forum will receive the totally awesome gift, which will be announced on Tuesday the 11th. Thanks for contributing, good luck and happy coding!

Foundation shirts blog

sldavidson gave the most helpful answer for this post
sldavidson over 5 years ago

Hi there,

This is based upon Asif's contribution, so I can't claim kudos, I just added some CSS to sort out the alignment without JS and is full width:

http://cdpn.io/Jseph

T-shirt would be sexy though!

This post has been closed. No new replies can be added.

Rafi Benkual over 5 years ago

Hey everyone! It's really cool to see all of you come up with your solutions!

@niklas Nice use of media and buttons!

@Asif Awesome! Your last contribution actually works on mobile too! Good stuff!

@james You made a working example in topbar as well. This woks on large, medium, and small. Nice job!

@sean (sldavidson) You made a very visually appealing menu with just CSS. Nice!

Looks like Sean @sldavidson got the most likes! Nice job! We'll be emailing you to get you a Sweet Yeti tee!

Everyone else who participated will also be contacted for a Yeti sticker. You guys are awesome!

Let's keep the conversation going here: http://foundation.zurb.com/forum/posts/232-megamenu

Asif over 5 years ago

@Niklas - very nice, I like it very

Niklas Koskela over 5 years ago

Hi everyone,

There is a pretty simple solution to the megaMenu thing and I really got inspired by all the contributions above and in the forum asking about this. So, thank you everyone.

Some requirements:
Usage of top-bar to create menus. Top-bar below $topbar-breakpoint work as normal, no mega-menu is available. For the having the dropdown you create two of those if you want a mega-menu. One that is working below $topbar-breakpoint and contains class="hide-for-medium-up" and the other one above $topbar-breakpoint and contains class="show-for-medium-up". On the latter you create a normal f-dropdown link to point to the mega-menu dropdown.

You create an additional section called below the normal . There you create your normal drop-down content items and use class="f-dropdown content" on the element to get mega-menu spanning whole grid width. You can style and create any content on those and therefore you can create menus to look anything you want...
(Hint: Style the dropdown in the .settings file accordingly if you want to get rid of the arrow and change borders (or use css)).

No change in any javascript files nor any additional files needs to be created. Only two lines of css and an additional section on the top-bar. Pretty easy... huh???

To see it in action, please check here: http://codepen.io/ntkk72/pen/iypgt

Asif over 5 years ago

HI,
how about the following? sorry for the late entry, I hope the challenge is still on :)

http://cdpn.io/Dnvom

I'm not a jquery guru, just managed to get this working, I'm sure the jquery guys would make this even better.

This demo shows that this works with sticky top-bar as well.

you can even use animate.css to provide some animation easily.

James Gehring over 5 years ago

I also have some css that will remove the background color from the links. I just thought it looked better with it.

Rafi Benkual over 5 years ago

@james Nice job!

Since you used topbar, it works on mobile too! Also the topbar drop downs respect the edges of the screens.

James Gehring over 5 years ago

How about something like this? http://cdpn.io/DleoC

Rafi Benkual over 5 years ago

You can use a grid inside a dropdown. The challenge is to make the JS detect the edge of the screen. If there is a clean solution for this it can be added into Foundation Dropdowns.

Xandros over 5 years ago

I actually made a suggestion on github which may be linked to this :

Currently the dropdown menus that are native to the top-bar component are nice, support submenus, and behave very accessibly and nicely on small screens.

It would be nice if dropdown menus did the same. Maybe, the submenus + small screen code could make it to the dropdown component, and then the top-bar submenus could just be regular dropdowns then, instead of two different sets of components and feature sets ?

This same component could also make a megamenu possible.

Rafi Benkual over 5 years ago

Hey Sean,
This is a great mega menu. You made it with just css? Awesome!

Anyone have a better/different solution?

Maybe one that works on mobile too?

sldavidson over 5 years ago

Hi there,

This is based upon Asif's contribution, so I can't claim kudos, I just added some CSS to sort out the alignment without JS and is full width:

http://cdpn.io/Jseph

T-shirt would be sexy though!

Kevin Lozandier over 5 years ago

Any particular reason why SassMeister (http://sassmeister.com/) can't be used (especially for Sass 3.3 lovers such as myself )?