Menu icon Foundation
Mega dropdown

Hi guys. I am new to foundation. I want to create navbar. but the style should be the same as in attached image.
I have checked this link http://codepen.io/rafibomb/full/oepzE but I want just the style for Contact Us link just like in the image.

If anyone have any Idea then please share.
Thanks in advance.

Fd

dropdown

Hi guys. I am new to foundation. I want to create navbar. but the style should be the same as in attached image.
I have checked this link http://codepen.io/rafibomb/full/oepzE but I want just the style for Contact Us link just like in the image.

If anyone have any Idea then please share.
Thanks in advance.

Fd
Hans McMurdy about 5 years ago

If your using sass the check out the "_settings.scss" between lines 500-600 to change the dropdown menu and then adjust the topbar at around line 1358. This should get you started very quickly.

If you are not using sass, I highly recommend you start using it because frameworks like foundation and bootstrap can be difficult to override with vanilla css to new developers.

Let me know if you need anymore help.

Rafi Benkual about 5 years ago

You could use a button group and our dropdown plugin instead. There is a mega class now http://foundation.joeworkman.net/samples/foundation1-2/#iconbar

Then use off-canvas on small.

Khan about 5 years ago

@Hans McMurdy and @Rafi Benkual: thanks for your reply.
I have used the bootstrap framework till version 3, and now new in foundation.
I am using css as I have not yet the command on sass.
I want to design my navigation menu just like in the image. that is on the About case the dropdown menu div should be from left-right while in Contact Us case the dropdown menu should be from right-to-left.
I have solved it using custom css, but I would like to know that if foundation provides such type of classes to solve it using foundation.

Thanks.

Hans McMurdy about 5 years ago

No problem. Rafi gave you better advise, I remembered seeing a mega menu post but forgot where.
Also I had a feeling you are using the vanilla css.

Are you editing the foundation.css directly or using a separate style-sheet?

As for using sass, I wont lie it took me roughly a month on and off to get used to sass and command line tools more generally but it really pays off and will shave off hours of your development time and (may) improve the performance/seo of your production site when you combine it with grunt.

To be brief, development wise excluding components you don't use can reduce the file size of the css and the settings.scss will help you change the entire look of the site in a few minutes. Performance/seo wise, any reduction in file size can help preformance (especially on mobile) and google may demote sites that load slow...
-http://searchengineland.com/5-seo-tips-boost-page-speed-187931

In any case sorry if went off topic too much but I hope our advise will help get you started.

If you run into any trouble getting started post a fiddle,plunker or codepen of your project and I'll see if I can help.

Also feel free to pm me or post a new fourm if you ever work up the courage to get sassy or start grunt'n.

Good luck,
- Hans