Menu icon Foundation
[F6] Move dropdown menu classes from HTML to SCSS

Hi!

I'm trying to make website in clean and semantic way regardless of using Foundation framework. It means I'm trying to move every presentation markup from HTML to CSS (SASS)/JS.

I've been already able to remove "row", "column" and "top-bar" classes and substitute them with proper mixins in SCSS.
Now I'm trying to achieve the same thing with dropdown menu. I've already moved my JS from HTML and substituted it with jQuery call.

What I'm not able to make is to remove "dropdown" and "menu" classes and substitute them with proper mixins. I've tried to put "@include foundation-dropdown-menu();" or "@include dropdown-container();" with "@include menu-base();" mixins and none of them works properly. There is also "align-right" class for which I've haven't found proper mixin either.

Is it possible to substitute these classes?

BTW is it there some documentation about using these mixins or ways how to use Foundation in clean and semantic way? I haven't found any sources.

Thank you.

P.S. I'm using Foundation 6.1.1

scssmixinscleansemanticdropdown-menudropdownmenuF6

Hi!

I'm trying to make website in clean and semantic way regardless of using Foundation framework. It means I'm trying to move every presentation markup from HTML to CSS (SASS)/JS.

I've been already able to remove "row", "column" and "top-bar" classes and substitute them with proper mixins in SCSS.
Now I'm trying to achieve the same thing with dropdown menu. I've already moved my JS from HTML and substituted it with jQuery call.

What I'm not able to make is to remove "dropdown" and "menu" classes and substitute them with proper mixins. I've tried to put "@include foundation-dropdown-menu();" or "@include dropdown-container();" with "@include menu-base();" mixins and none of them works properly. There is also "align-right" class for which I've haven't found proper mixin either.

Is it possible to substitute these classes?

BTW is it there some documentation about using these mixins or ways how to use Foundation in clean and semantic way? I haven't found any sources.

Thank you.

P.S. I'm using Foundation 6.1.1

Rafi Benkual almost 4 years ago

Not sure if there is a mixin that would do this semantically. Most components have it but doing a dropdown could really make the mixin very complicated.

I think in terms of naming, .menu and .dropdown are pretty good but I understand they can be more semantic depending on your site or app.