Visually appealing menus

Right 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;
    }
}

Hi Tom,

this CSS-Code only works for opening the menu, though.
I think it's fine that the JS applies the .toggledattribute 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.

That'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).

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.

Hi 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.

How does the Arctic theme in generatepress' Demo library handle the animations?

Arctic is simply using the overlay style from the off canvas panel:
https://docs.generatepress.com/article/off-canvas-panel-overview/#style

Oh no, I mean on desktop, not on mobile

Ahh 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;
}