- This topic has 9 replies, 3 voices, and was last updated 1 year, 8 months ago by
Leo.
-
AuthorPosts
-
September 24, 2020 at 6:53 am #1456882
Alessio
Hey,
is there a way to make prettier, animated menus in GeneratePress 3.x? The default one opens instantly, which doesn’t feel very modern.
I think animations would definitely improve the user experience, as long as they feel snappy and fast.
I’ve attached some examples in the Private Information.
I’d love to make a drop-down mobile menu, like that standard one, but with a smooth drop-down animation for both closing and opening the menu.How can I do that?
Thank you!!
September 24, 2020 at 5:11 pm #1457757Tom
Lead DeveloperLead DeveloperRight now it’s not overly easy because a lot of our mobile menu depends on a
toggled
class being added to the main navigation which happens instantly using JS. It may be possible to delay those classes until after CSS transitions are done which would make this easier.Of course, nothing is impossible:
@media (max-width: 768px) { .main-navigation .main-nav { max-height: 0; overflow: hidden; transition: max-height 500ms ease-out; } .main-navigation.toggled .main-nav { max-height: 1000px; transition: max-height 500ms ease-in; } .main-navigation .main-nav > ul { display: block !important; } .has-inline-mobile-toggle #site-navigation.toggled { margin-top: 0; } .main-navigation .menu-item-has-children .dropdown-menu-toggle { float: right; } .main-navigation .main-nav { flex-basis: 100%; order: 3; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 27, 2020 at 3:36 am #1460742Alessio
Hi Tom,
this CSS-Code only works for opening the menu, though.
I think it’s fine that the JS applies the.toggled
attribute instantly — I mean without the toggled attribute being applied when closing the menu, there’s no real way to trigger the animation via CSS anyways, right?So instead, is there a way to let the CSS handle the menu-closing alone without the JS closing the menu instantly? (So that the JS just sets the toggled attribute and does nothing else).
I hope I understand it correctly.
September 27, 2020 at 11:15 am #1461297Tom
Lead DeveloperLead DeveloperThat’s what’s happening right now – the JS sets the toggled class, and the CSS handles the display of the mobile menu.
The issue is the toggled class is used to handle some of the layout/structure of the mobile menu, so if that class goes away, some of the layout goes away as well before the menu is gone (since there’s a transition delay).
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 8, 2020 at 1:02 pm #1479144Alessio
Hi Tom,
I’ve added some nice animations using the Max Mega Menu, which works really well together with GeneratePress. Maybe it’ll be possible to add a solution for that directly into GeneratePress in the future?
I sadly have very little experience in JavaScript, so I don’t know how to implement that myself.October 9, 2020 at 9:10 am #1480685Tom
Lead DeveloperLead DeveloperHi there,
Animations for the mobile menu could certainly happen, although at this time I would prefer to just make it easier to achieve them with some simple CSS.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 18, 2020 at 11:07 am #1494603Alessio
How does the Arctic theme in generatepress’ Demo library handle the animations?
October 18, 2020 at 11:17 am #1494617Leo
StaffCustomer SupportArctic is simply using the overlay style from the off canvas panel:
https://docs.generatepress.com/article/off-canvas-panel-overview/#styleDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 18, 2020 at 11:42 am #1494635Alessio
Oh no, I mean on desktop, not on mobile
October 18, 2020 at 11:44 am #1494642Leo
StaffCustomer SupportAhh that’s done with this CSS:
/* Sub-menu effect */ .main-navigation ul ul { left: auto; transition: opacity 300ms ease-in-out, transform 200ms ease-in-out, height 200ms ease-in-out; transform: translateY(20px); height: auto; border: 1px solid rgba(0,0,0,0.1); border-radius: 5px; padding: 5px 0; } .main-navigation:not(.toggled) ul li:hover>ul, .main-navigation:not(.toggled) ul li.sfHover>ul { transform: translateY(0); } .slideout-navigation.do-overlay .slideout-menu .sub-menu li a { display: block; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.