- This topic has 9 replies, 3 voices, and was last updated 3 years, 6 months ago by Leo.
-
AuthorPosts
-
September 24, 2020 at 6:53 am #1456882Alessio
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 #1457757TomLead 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; } }
September 27, 2020 at 3:36 am #1460742AlessioHi 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 #1461297TomLead 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).
October 8, 2020 at 1:02 pm #1479144AlessioHi 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 #1480685TomLead 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.
October 18, 2020 at 11:07 am #1494603AlessioHow does the Arctic theme in generatepress’ Demo library handle the animations?
October 18, 2020 at 11:17 am #1494617LeoStaffCustomer SupportArctic is simply using the overlay style from the off canvas panel:
https://docs.generatepress.com/article/off-canvas-panel-overview/#styleOctober 18, 2020 at 11:42 am #1494635AlessioOh no, I mean on desktop, not on mobile
October 18, 2020 at 11:44 am #1494642LeoStaffCustomer 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; }
-
AuthorPosts
- You must be logged in to reply to this topic.