Menu icon Foundation

Developer | Canberra, ACT

My Posts

No Content

My Comments

Snig commented on Colin Duwe's post over 1 year

Colin,
I have a vague memory of encountering a similar problem a while back...eventually I figured out I needed to use toggled.zf.responsiveToggle instead of toggled.zf.responsiveNavigation. 
For example in one site (using Foundation 6.4.3) I use the following code to detect the toggle and change the class of the menu button from a hamburger to a cross and vice versa...
$('.title-bar').on('toggled.zf.responsiveToggle', function(e) {
$('#menubutton').toggleClass('cross');
});
with a title bar definition that looks like this:
<div class="title-bar" data-responsive-toggle="topmenu" data-hide-for="medium">
<button id="menubutton" class="burger" type="button" data-toggle="topmenu"></button>
<div class="title-bar-title">
Menu
</div>
</div>

<div class="top-bar" id="topmenu">
<div class="top-bar-left">
....
</div>
</div>
(This is in conjunction with 'burger' and 'cross' styles from the very useful SAS Burger mixin -  see: https://github.com/jorenvanhee/sass-burger).
Hope this helps.
Cheers, Snig
 

Snig commented on Kun Chen's post almost 2 years

One approach that I have used (may not be the best!) is to:
(a) Create a new sub-folder under src/assets e.g. src/assets/code.
(b) Put any additional js files (minimised) you want to conditionally reference on certain pages in this new folder.
(c) Modify the watch function at the bottom of the gulpfile.bable.js file to watch for changes to files in the new 'code' folder in addition to all the others e.g. the extra gulp.watch('src/assets/code...' line in the  example code below:
// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('src/pages//*.html').on('all', gulp.series(pages, browser.reload));
gulp.watch('src/{layouts,partials}/
/.html').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/assets/scss/
/.scss').on('all', sass);
gulp.watch('src/assets/js//*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/code/
/.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/img/
/').on('all', gulp.series(images, browser.reload));
gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
}
(d) Add a Panini conditional statement to the bottom of the default layout e.g. in layouts/default.html that will conditionally include additional Javascript file(s) for nominated pages as required.  For example in the following the map.js file will be included if the page is index.html or events.html:
.
.
.
<script src="{{root}}assets/js/app.js" type="text/javascript"></script>
{{#ifpage 'index' 'events'}}
<script src="{{root}}assets/code/map.js" type="text/javascript"></script>
{{/ifpage}}
</body>
</html>
Hope this helps.
Cheers, Snig
 

Snig commented on Bill Sholar's post about 3 years

OK thanks for clarifying.  Sounds like what you need is a block grid such as the following (more information on this is in the grid documentation about half-way down the page at: http://foundation.zurb.com/sites/docs/grid.html):
 
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
</head>
<body>
<div class="row small-up-2 medium-up-4">
<div class="column callout">
<h4>Box 1</h4>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<div class="column callout">
<h4>Box 2</h4>
<p>Line 1</p>
<p>Line 2</p>
</div>

    &lt;div class="column callout"&gt;
        &lt;h4&gt;Box 3&lt;/h4&gt;
        &lt;p&gt;Line 1&lt;/p&gt;
        &lt;p&gt;Line 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column callout"&gt;
        &lt;h4&gt;Box 4&lt;/h4&gt;
        &lt;p&gt;Line 1&lt;/p&gt;
        &lt;p&gt;Line 2&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).foundation();
&lt;/script&gt;

</body>
</html>

Snig commented on Bill Sholar's post about 3 years

 
Bill,
 
I think the issue is that if using the default grid column count (e.g. 12 columns) then the number of columns specified within any given row needs to add up to 12 (that is when you are not using incomplete rows via the 'end' class).
 
In the example code you have above you have actually specificed is one row with either 24 large columns, or 16 medium columns - which will understandably give unexpected results (if the expected column count per row is 12).
 
I am not sure from your example what the layout is that you want...however if you use something like the following this will result in 4 columns side-by-side for medium and up, but for small the columns will just stack one on the other (essentially one column)...
 
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
</head>
<body>
<div class="row">
<div class="medium-3 columns callout">
<h4>Box 1</h4>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<div class="medium-3 columns callout">
<h4>Box 2</h4>
<p>Line 1</p>
<p>Line 2</p>
</div>

    &lt;div class="medium-3 columns callout"&gt;
        &lt;h4&gt;Box 3&lt;/h4&gt;
        &lt;p&gt;Line 1&lt;/p&gt;
        &lt;p&gt;Line 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="medium-3 columns callout"&gt;
        &lt;h4&gt;Box 4&lt;/h4&gt;
        &lt;p&gt;Line 1&lt;/p&gt;
        &lt;p&gt;Line 2&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).foundation();
&lt;/script&gt;

</body>
</html>
 
 
Hope this helps.
 
 
 
Cheers,
 
Snig
 

Snig commented on hassan's post over 3 years

I have just implemented a new site using Foundation 6.2.3's off canvas menu (which also includes Joran Van Hee's wonderful Sass mixin for creating animated burger icons - thanks so much Joran!).  
While not a sticky menu in the sense you have described above it might give you some other ideas for how to approach this..refer Majura Football Club.
Cheers, Snig

Snig commented on Will Moody's post over 3 years

Using Panini a simpler way to achieve this is to use something like:
<li{{#ifpage 'about'}} class="active"{{/ifpage}}>
<a href="about.html">About Lucy</a>
</li>
 
in your menu code...

Snig commented on Jana Obzerova's post over 3 years

Thanks for pointing this out as well.

Snig commented on Jana Obzerova's post over 3 years

Thanks Tommy - when this first started happening (seemingly out of the blue) I thought I was going mad...
Your change resolved the issue for me as well - much appreciated.

Snig commented on Stéphane Richin's post over 3 years

Apologies Stephane - my mistake.
I did not read your first post correctly - and had thought you were referring to Gulp/Babel (as used in the Zurb templates) not Grunt/Babel.
Snig

Snig commented on Siavoush's post over 3 years

Check out the reference to "Preventing FOUC" at the bottom of the Foundation Docs page at: http://foundation.zurb.com/sites/docs/responsive-navigation.html
 

Posts Followed



  • 4
    Replies
  • Why doesn't this grid work?

    By Bill Sholar

    gridstacking

    If I have 4 divs in a row, all coded as &lt;div class="small-6 medium-3 columns"&gt; I would expect one row of 4 columns if on a medium screen, or two rows or two columns if on a small screen, regardless of content. (Especially in a CMS, where another... (continued)

    Last Reply by Snig about 3 years ago









Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Colin Duwe's post over 1 year

Colin,
I have a vague memory of encountering a similar problem a while back...eventually I figured out I needed to use toggled.zf.responsiveToggle instead of toggled.zf.responsiveNavigation. 
For example in one site (using Foundation 6.4.3) I use the following code to detect the toggle and change the class of the menu button from a hamburger to a cross and vice versa...
$('.title-bar').on('toggled.zf.responsiveToggle', function(e) {
$('#menubutton').toggleClass('cross');
});
with a title bar definition that looks like this:
<div class="title-bar" data-responsive-toggle="topmenu" data-hide-for="medium">
<button id="menubutton" class="burger" type="button" data-toggle="topmenu"></button>
<div class="title-bar-title">
Menu
</div>
</div>

<div class="top-bar" id="topmenu">
<div class="top-bar-left">
....
</div>
</div>
(This is in conjunction with 'burger' and 'cross' styles from the very useful SAS Burger mixin -  see: https://github.com/jorenvanhee/sass-burger).
Hope this helps.
Cheers, Snig
 

You commented on Kun Chen's post almost 2 years

One approach that I have used (may not be the best!) is to:
(a) Create a new sub-folder under src/assets e.g. src/assets/code.
(b) Put any additional js files (minimised) you want to conditionally reference on certain pages in this new folder.
(c) Modify the watch function at the bottom of the gulpfile.bable.js file to watch for changes to files in the new 'code' folder in addition to all the others e.g. the extra gulp.watch('src/assets/code...' line in the  example code below:
// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('src/pages//*.html').on('all', gulp.series(pages, browser.reload));
gulp.watch('src/{layouts,partials}/
/.html').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/assets/scss/
/.scss').on('all', sass);
gulp.watch('src/assets/js//*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/code/
/.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/img/
/').on('all', gulp.series(images, browser.reload));
gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
}
(d) Add a Panini conditional statement to the bottom of the default layout e.g. in layouts/default.html that will conditionally include additional Javascript file(s) for nominated pages as required.  For example in the following the map.js file will be included if the page is index.html or events.html:
.
.
.
<script src="{{root}}assets/js/app.js" type="text/javascript"></script>
{{#ifpage 'index' 'events'}}
<script src="{{root}}assets/code/map.js" type="text/javascript"></script>
{{/ifpage}}
</body>
</html>
Hope this helps.
Cheers, Snig
 

You commented on Bill Sholar's post about 3 years

OK thanks for clarifying.  Sounds like what you need is a block grid such as the following (more information on this is in the grid documentation about half-way down the page at: http://foundation.zurb.com/sites/docs/grid.html):
 
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
</head>
<body>
<div class="row small-up-2 medium-up-4">
<div class="column callout">
<h4>Box 1</h4>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<div class="column callout">
<h4>Box 2</h4>
<p>Line 1</p>
<p>Line 2</p>
</div>

    &lt;div class="column callout"&gt;
        &lt;h4&gt;Box 3&lt;/h4&gt;
        &lt;p&gt;Line 1&lt;/p&gt;
        &lt;p&gt;Line 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column callout"&gt;
        &lt;h4&gt;Box 4&lt;/h4&gt;
        &lt;p&gt;Line 1&lt;/p&gt;
        &lt;p&gt;Line 2&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).foundation();
&lt;/script&gt;

</body>
</html>

You commented on Bill Sholar's post about 3 years

 
Bill,
 
I think the issue is that if using the default grid column count (e.g. 12 columns) then the number of columns specified within any given row needs to add up to 12 (that is when you are not using incomplete rows via the 'end' class).
 
In the example code you have above you have actually specificed is one row with either 24 large columns, or 16 medium columns - which will understandably give unexpected results (if the expected column count per row is 12).
 
I am not sure from your example what the layout is that you want...however if you use something like the following this will result in 4 columns side-by-side for medium and up, but for small the columns will just stack one on the other (essentially one column)...
 
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
</head>
<body>
<div class="row">
<div class="medium-3 columns callout">
<h4>Box 1</h4>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<div class="medium-3 columns callout">
<h4>Box 2</h4>
<p>Line 1</p>
<p>Line 2</p>
</div>

    &lt;div class="medium-3 columns callout"&gt;
        &lt;h4&gt;Box 3&lt;/h4&gt;
        &lt;p&gt;Line 1&lt;/p&gt;
        &lt;p&gt;Line 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="medium-3 columns callout"&gt;
        &lt;h4&gt;Box 4&lt;/h4&gt;
        &lt;p&gt;Line 1&lt;/p&gt;
        &lt;p&gt;Line 2&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).foundation();
&lt;/script&gt;

</body>
</html>
 
 
Hope this helps.
 
 
 
Cheers,
 
Snig
 

You commented on hassan's post over 3 years

I have just implemented a new site using Foundation 6.2.3's off canvas menu (which also includes Joran Van Hee's wonderful Sass mixin for creating animated burger icons - thanks so much Joran!).  
While not a sticky menu in the sense you have described above it might give you some other ideas for how to approach this..refer Majura Football Club.
Cheers, Snig

You commented on Will Moody's post over 3 years

Using Panini a simpler way to achieve this is to use something like:
<li{{#ifpage 'about'}} class="active"{{/ifpage}}>
<a href="about.html">About Lucy</a>
</li>
 
in your menu code...

You commented on Jana Obzerova's post over 3 years

Thanks for pointing this out as well.

You commented on Jana Obzerova's post over 3 years

Thanks Tommy - when this first started happening (seemingly out of the blue) I thought I was going mad...
Your change resolved the issue for me as well - much appreciated.

You commented on Stéphane Richin's post over 3 years

Apologies Stephane - my mistake.
I did not read your first post correctly - and had thought you were referring to Gulp/Babel (as used in the Zurb templates) not Grunt/Babel.
Snig

You commented on Siavoush's post over 3 years

Check out the reference to "Preventing FOUC" at the bottom of the Foundation Docs page at: http://foundation.zurb.com/sites/docs/responsive-navigation.html
 

Posts Followed

Following

  • No Content

Followers

  • No Content