Menu icon Foundation

My Posts

  • 2
    Replies
  • Responsive nav challenge

    By Michael Yacavone

    Responsive

    Hi all,  I'm working from the example at: http://foundation.zurb.com/sites/docs/responsive-navigation.html Unfortunately my draft website is not publicly accessible, so I will ask my question using screenshots.  The start of my ... (continued)

    Last Reply by Michael Yacavone almost 3 years ago



My Comments

Michael Yacavone commented on Michael Yacavone's post almost 3 years

Thank you for responding.
I spent about three hours testing various combinations. 
The core of that code... 
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
... is copied directly from the docs linked in the introduction to my question.
The "medium" keyword refers to breakpoints for media queries, so I do not believe it is contradictory with "vertical" -- in this case "vertical" is specifying a default and "medium-horizontal" is specifying to use horizontal on medium and larger screen sizes. 

Michael Yacavone commented on Rafi Benkual's post over 3 years

I just noticed that in config.yml there is this uncss code:
UNCSS_OPTIONS:
html:
- "src/*/.html"
ignore:
- !!js/regexp .foundation-mq
- !!js/regexp .is-.*

This is way above my pay grade, but as I understand from forum reading, there are a lot of ".is- " classes added to make responsive menus work. If so, asking uncss to ignore those changes seems like a bad idea, yes? 
Happy to generate a pull request if someone thinks it's worth it.
 
 

Michael Yacavone commented on Rafi Benkual's post over 3 years

Over the past two days I've spent about six hours trying to get responsive menus to work correctly. Granted, this is my first Foundation project, and I'm not expert in css, so I expect things to take longer than most.
But I am a programmer, and eventually after isolating each css variable without satisfaction, I started looked at the gulp build script. Commenting out the uncss instruction (".pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))") fixed this menu problem for me.
I'm not sure if this is a permanent solution, but at least for development, it has made responsive menus rock solid, using markup that looks like this:
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div> <!-- /title-bar -->

<nav id="main-menu">
<ul class="dropdown menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li><a href="#">Home</a></li>
<li><a href="#">Section 1</a>
<ul class="menu">
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
<li><a href="#">Topic 3</a></li>
</ul>
</li>
[...]
</nav>

</code></pre>

Commenting out uncss is a hack, for sure. Hopefully it will help someone else move forward, and maybe someone who knows how all the magic works can look at why it might. 
Overall I've found Foundation really nice to work in. Now getting back to the fun instead of debugging!
 
 

Michael Yacavone commented on Michael Yacavone's post over 3 years

However, it turns out I can make changes to the Markdown in src/styleguide/index.md and that is correctly rendered. So confusion persists on the src/helpers front... 

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Michael Yacavone's post almost 3 years

Thank you for responding.
I spent about three hours testing various combinations. 
The core of that code... 
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
... is copied directly from the docs linked in the introduction to my question.
The "medium" keyword refers to breakpoints for media queries, so I do not believe it is contradictory with "vertical" -- in this case "vertical" is specifying a default and "medium-horizontal" is specifying to use horizontal on medium and larger screen sizes. 

You commented on Rafi Benkual's post over 3 years

I just noticed that in config.yml there is this uncss code:
UNCSS_OPTIONS:
html:
- "src/*/.html"
ignore:
- !!js/regexp .foundation-mq
- !!js/regexp .is-.*

This is way above my pay grade, but as I understand from forum reading, there are a lot of ".is- " classes added to make responsive menus work. If so, asking uncss to ignore those changes seems like a bad idea, yes? 
Happy to generate a pull request if someone thinks it's worth it.
 
 

You commented on Rafi Benkual's post over 3 years

Over the past two days I've spent about six hours trying to get responsive menus to work correctly. Granted, this is my first Foundation project, and I'm not expert in css, so I expect things to take longer than most.
But I am a programmer, and eventually after isolating each css variable without satisfaction, I started looked at the gulp build script. Commenting out the uncss instruction (".pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))") fixed this menu problem for me.
I'm not sure if this is a permanent solution, but at least for development, it has made responsive menus rock solid, using markup that looks like this:
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div> <!-- /title-bar -->

<nav id="main-menu">
<ul class="dropdown menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li><a href="#">Home</a></li>
<li><a href="#">Section 1</a>
<ul class="menu">
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
<li><a href="#">Topic 3</a></li>
</ul>
</li>
[...]
</nav>

</code></pre>

Commenting out uncss is a hack, for sure. Hopefully it will help someone else move forward, and maybe someone who knows how all the magic works can look at why it might. 
Overall I've found Foundation really nice to work in. Now getting back to the fun instead of debugging!
 
 

You commented on Michael Yacavone's post over 3 years

However, it turns out I can make changes to the Markdown in src/styleguide/index.md and that is correctly rendered. So confusion persists on the src/helpers front... 

Posts Followed

Following

  • No Content

Followers

  • No Content