Fade in fade out transition

User 2903050 Photo


Registered User
155 posts
Online Now

Hi, I have my menu on the mobile viewpoint with the Foundation data animate of fade in, fade out which I like
Is it possible to add the same transition of fade in fade out on the other dropdown menus once the original menu displays. Here's a link to my site to see what I mean.
Regards

http://phildias.com
User 122279 Photo


Senior Advisor
11,586 posts
Online Now

I'm definitely no SD3 expert, far from it, but those who are might prefer seeing your project file, to see how you made those transitions and how to help with your questions. I opened your site, both on phone and laptop, but since the menu items (at least the ones I tried) lead to 'not found', so any transition is not easily spotted.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/


User 2088758 Photo


Senior Advisor
2,631 posts

I have never tried but I would assume you can. Did you try selecting that foundation class on the List Container of the sub menu.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2903050 Photo


Registered User
155 posts
Online Now

Just out at the moment so could not check. I tried adding the attribute data animate to the extra list containers but no success. The hamburger main drop-down has a ID of sub-nav so that didn't work as it's a ID and cannot share. I will try and add my project later.
Thanks.
User 2903050 Photo


Registered User
155 posts
Online Now

Here is my project. Still cannot get my drop-downs to fade in, fade out.
Attachments:
User 2088758 Photo


Senior Advisor
2,631 posts

I have been doing some research and from what I can see on the Zurb website this cannot be achieved with out hacking the code and adding some js.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2903050 Photo


Registered User
155 posts
Online Now

http://phildias.com/test

I have managed to get some sort of data animate working on the about link dropdown so the fade in, fade out could work but not successful. What do you think steve?
Regards
User 244626 Photo


Registered User
658 posts

You may also look at creating a Custom Dynamic Class (new great feature) in the Element States Selector called "is active" and a value of "is-active". "is-active" is the class thats being added to the element to make it drop down when hovered per browser inspector.

Change the "In State" of the Element to the custom "is active" state you created and then create a transition for opacity or any other style you would want animated.
User 2903050 Photo


Registered User
155 posts
Online Now

Hi Twinstream. Sorry I am so new to all of this. Is there a easier way to describe it to me.
I would prefer a different way as using the fade in fade out would mean completely starting again which would probably mean losing the higher breakpoint menus too.
User 244626 Photo


Registered User
658 posts


Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.