Menu icon Foundation

Developer | DTC, Colorado

Denver Dev

My Posts



  • 1
    Reply
  • Toggle Icon when Toggler Fires?

    By Tom Dean

    toggle icontoggler

    What is the best way to toggle an icon? I am using toggler and I am using an icon as a link to open/close the toggle. I want the icon to change each time its fired. I cannot get this going? Here is what I have: <p class="toggle-contain"><a data-... (continued)

    Last Reply by Tom Dean over 3 years ago


  • 4
    Replies
  • Help with Motion UI?

    By Tom Dean

    Motion UI

    Can someone help me understand motion ui? I am not using sass just the normal download. I do have both the css and motion ui js installed. All I want to do is figure out how to animate an image on load or when in viewport. I think I need something like wa... (continued)

    Last Reply by Phillip Nicholl over 3 years ago




  • 1
    Reply
  • Dependencies?

    By Tom Dean

    dependencies

    I have what I think is a dumb question. If I want to use the drilldown menu would I also need the menu? Like when I am downloading from the custom builder if I wanted to use accordion menu would I also need the accordion or could I just select accordion m... (continued)

    Last Reply by Brandon Arnold almost 4 years ago


My Comments

Tom Dean commented on Iain MacDonald's post over 2 years

NO! Just add "expanded" class to your row and done. See: http://foundation.zurb.com/sites/docs/grid.html#fluid-row

Tom Dean commented on Elisandro Martinez's post over 2 years

You have got to fix that main menu bro! I would use VW in css since that is a full width item. Scope this out: https://css-tricks.com/viewport-sized-typography/
Another solution would be to use fittext.js in your orbits.
Good luck!

Tom Dean commented on Tom Dean's post almost 3 years

Oops, I think this can be closed. I had css and js in the partial files. As soon as I took it out and just included it on the page it worked. So the partial html files only had html. I really thought I could load custom js and css in the partials. That would really help speed things up because I could do some really simple for mobile and really cool for large...

Tom Dean commented on Tom Dean's post almost 3 years

I found this: http://foundation.zurb.com/forum/posts/36272-foundation-6--reflow
but it's a bit confusing...
 
Would I use this:
Foundation.reInit('interchange');

Tom Dean commented on Tom Dean's post almost 3 years

The reflow stuff is not in the 6 docs so I'm not sure if this would work? Any help?
$(document).foundation('interchange', 'reflow');
Ha ha, just tried it and nope doesn't work. Any help appreciated!

Tom Dean commented on Tom Dean's post about 3 years

Yeah, I confirmed this and if I take away the expanded class the stack-for-small on the button group works. Am I doing something wrong?

Tom Dean commented on Tom Dean's post about 3 years

Well I have an expanded button group (so expanded on large screens) and stack-for-small. But it won't stack on small they stay next to each other...
 
<div class="row">
<div class="large-12 columns">
<div class="button-group expanded stacked-for-small">
<a class="button">Denver</a>
<a class="button">Car</a>
<a class="button">Evaluation</a>
</div>
</div>
</div>

Tom Dean commented on Tom Dean's post over 3 years

Oh boy, I already posted about this and figured it out. lol sry. Here it is:
<p><a data-toggle="panel2"><i class="fi-zoom-in large-icon"></i></a></p>

<div class="callout" id="panel2" data-toggler data-animate="hinge-in-from-top hinge-out-from-top">
<h4>Hello!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
</div>
</div>
$("#panel2").on("on.zf.toggler off.zf.toggler", function(e) {
$("i").toggleClass("fi-zoom-out fi-zoom-in");
});

Tom Dean commented on Tom Dean's post over 3 years

Ah ha! The proper answer to my question isssssss...don't use OffCanvas if all you want to do is toggle a damn fixed panel. Use: https://github.com/zurb/foundation-sites/issues/7932 CodePen: http://codepen.io/zurbchris/pen/obgwGe

Perfect now I don't even need to include OffCanvas in this project. I feel duh.

Tom Dean commented on Tom Dean's post over 3 years

Ok, after looking at your example I do get it but I still don't get how to make my off canvas sticky. It jumps to the top of the page and yes the menu I have it in is sticky. I think this is a major topic here though. I am also trying to make the offcanvas cover the content not move over the content. Perfect example of what I am after using offcanvas lives here: http://www.scorpiondesign.com/ just click the email icon top right...

Posts Followed




Following

    No Content

Followers

My Posts






My Comments

You commented on Iain MacDonald's post over 2 years

NO! Just add "expanded" class to your row and done. See: http://foundation.zurb.com/sites/docs/grid.html#fluid-row

You commented on Elisandro Martinez's post over 2 years

You have got to fix that main menu bro! I would use VW in css since that is a full width item. Scope this out: https://css-tricks.com/viewport-sized-typography/
Another solution would be to use fittext.js in your orbits.
Good luck!

You commented on Tom Dean's post almost 3 years

Oops, I think this can be closed. I had css and js in the partial files. As soon as I took it out and just included it on the page it worked. So the partial html files only had html. I really thought I could load custom js and css in the partials. That would really help speed things up because I could do some really simple for mobile and really cool for large...

You commented on Tom Dean's post almost 3 years

I found this: http://foundation.zurb.com/forum/posts/36272-foundation-6--reflow
but it's a bit confusing...
 
Would I use this:
Foundation.reInit('interchange');

You commented on Tom Dean's post almost 3 years

The reflow stuff is not in the 6 docs so I'm not sure if this would work? Any help?
$(document).foundation('interchange', 'reflow');
Ha ha, just tried it and nope doesn't work. Any help appreciated!

You commented on Tom Dean's post about 3 years

Yeah, I confirmed this and if I take away the expanded class the stack-for-small on the button group works. Am I doing something wrong?

You commented on Tom Dean's post about 3 years

Well I have an expanded button group (so expanded on large screens) and stack-for-small. But it won't stack on small they stay next to each other...
 
<div class="row">
<div class="large-12 columns">
<div class="button-group expanded stacked-for-small">
<a class="button">Denver</a>
<a class="button">Car</a>
<a class="button">Evaluation</a>
</div>
</div>
</div>

You commented on Tom Dean's post over 3 years

Oh boy, I already posted about this and figured it out. lol sry. Here it is:
<p><a data-toggle="panel2"><i class="fi-zoom-in large-icon"></i></a></p>

<div class="callout" id="panel2" data-toggler data-animate="hinge-in-from-top hinge-out-from-top">
<h4>Hello!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
</div>
</div>
$("#panel2").on("on.zf.toggler off.zf.toggler", function(e) {
$("i").toggleClass("fi-zoom-out fi-zoom-in");
});

You commented on Tom Dean's post over 3 years

Ah ha! The proper answer to my question isssssss...don't use OffCanvas if all you want to do is toggle a damn fixed panel. Use: https://github.com/zurb/foundation-sites/issues/7932 CodePen: http://codepen.io/zurbchris/pen/obgwGe

Perfect now I don't even need to include OffCanvas in this project. I feel duh.

You commented on Tom Dean's post over 3 years

Ok, after looking at your example I do get it but I still don't get how to make my off canvas sticky. It jumps to the top of the page and yes the menu I have it in is sticky. I think this is a major topic here though. I am also trying to make the offcanvas cover the content not move over the content. Perfect example of what I am after using offcanvas lives here: http://www.scorpiondesign.com/ just click the email icon top right...

Posts Followed



Following

  • No Content

Followers

  • No Content