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
Phil Dias
Registered User
260 posts
Inger
Senior Advisor
14,454 posts
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 work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Steve
Senior Advisor
3,087 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
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Phil Dias
Registered User
260 posts
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.
Thanks.
Phil Dias
Registered User
260 posts
Here is my project. Still cannot get my drop-downs to fade in, fade out.
Steve
Senior Advisor
3,087 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
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Phil Dias
Registered User
260 posts
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
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
Twinstream
Registered User
811 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.
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.
Bootstrap 5 CSS Grid.
Phil Dias
Registered User
260 posts
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.
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.
Twinstream
Registered User
811 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.
