Menu icon Foundation

My Posts






My Comments

Matt Hegarty commented on Matt Hegarty's post 10 months

Thanks - but what I am looking for is for the menu to slide down / up (animated) on click, maybe with a duration of 0.4s.  This is surely a very common use-case for drop-down menus.  I don't need any more sophisticated animation such as hinge or spin.
In fact the Foundation off-canvas menu example does this (although it slides in from the left).
There is an example of what I am looking for here (using jQuery) - so perhaps it is not possible with Foundation and I have to use jQuery.

Matt Hegarty commented on Matt Hegarty's post 10 months

Hi Rafi
That is close, but I am looking for a way for the drop-down menu to slide in / slide out. (ie on click of "One" in your codepen)
There is a tutorial here on how to do it for Accordion menu, but I wondered if there was an easy way to do it with the drop-down menu (without custom css)
 
Thanks
Matt

Matt Hegarty commented on Matt Hegarty's post 10 months

Thanks for responses.  I worked around this using JQuery.

Matt Hegarty commented on Matt Hegarty's post 11 months

Tony
Adding 
data-equalize-on-stack="false"
resolves the issue.
Many thanks for putting me onto this.
(Issue closed)
Matt

Matt Hegarty commented on Matt Hegarty's post 11 months

The jQuery logic runs on document.ready().
Sequence is:
1. Page load (F5) - left column is too high as per image 1 above - note this is intermittent for some reason - sometimes the page loads ok with the column heights equal
2. Change the window size - and the column snaps into place (so resize must trigger a reflow event) - this works 100% of time
Adding this line:
Foundation.reInit('equalizer');
Fixes the issue 100% of the time BUT this introduces a different issue, where if the viewport is sized down to 'medium' then the box is way too high
 

This is only fixed by refreshing the page, to give:

I tried the following but this has no effect (original issue fixed, but height too large on medium viewport)
$(window).bind('load resize orientationChange', Foundation.util.throttle(function () {
//$(document).foundation(); // has no effect - gives 'already has a Foundation plugin' error
//Foundation.reInit('equalizer'); // has no effect
}, 100));
 

Matt Hegarty commented on Matt Hegarty's post 11 months

Excellent - thanks for the response.

Posts Followed




Following

    No Content

Followers

My Posts

My Comments

You commented on Matt Hegarty's post 10 months

Thanks - but what I am looking for is for the menu to slide down / up (animated) on click, maybe with a duration of 0.4s.  This is surely a very common use-case for drop-down menus.  I don't need any more sophisticated animation such as hinge or spin.
In fact the Foundation off-canvas menu example does this (although it slides in from the left).
There is an example of what I am looking for here (using jQuery) - so perhaps it is not possible with Foundation and I have to use jQuery.

You commented on Matt Hegarty's post 10 months

Hi Rafi
That is close, but I am looking for a way for the drop-down menu to slide in / slide out. (ie on click of "One" in your codepen)
There is a tutorial here on how to do it for Accordion menu, but I wondered if there was an easy way to do it with the drop-down menu (without custom css)
 
Thanks
Matt

You commented on Matt Hegarty's post 10 months

Thanks for responses.  I worked around this using JQuery.

You commented on Matt Hegarty's post 11 months

Tony
Adding 
data-equalize-on-stack="false"
resolves the issue.
Many thanks for putting me onto this.
(Issue closed)
Matt

You commented on Matt Hegarty's post 11 months

The jQuery logic runs on document.ready().
Sequence is:
1. Page load (F5) - left column is too high as per image 1 above - note this is intermittent for some reason - sometimes the page loads ok with the column heights equal
2. Change the window size - and the column snaps into place (so resize must trigger a reflow event) - this works 100% of time
Adding this line:
Foundation.reInit('equalizer');
Fixes the issue 100% of the time BUT this introduces a different issue, where if the viewport is sized down to 'medium' then the box is way too high
 

This is only fixed by refreshing the page, to give:

I tried the following but this has no effect (original issue fixed, but height too large on medium viewport)
$(window).bind('load resize orientationChange', Foundation.util.throttle(function () {
//$(document).foundation(); // has no effect - gives 'already has a Foundation plugin' error
//Foundation.reInit('equalizer'); // has no effect
}, 100));
 

You commented on Matt Hegarty's post 11 months

Excellent - thanks for the response.

Posts Followed

Following

  • No Content

Followers