Menu icon Foundation

Developer | Stockholm, Sweden

My Posts

No Content

My Comments

Niklas Koskela commented on sldavidson's post over 5 years
Niklas Koskela commented on Rafi Benkual's post over 5 years

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

Posts Followed



Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on sldavidson's post over 5 years
You commented on Rafi Benkual's post over 5 years

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

Posts Followed

Following

  • No Content

Followers

  • No Content