Visually appealing menus

[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!!

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alessio]

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.

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alessio]

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.

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alessio]

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alessio]

Oh no, I mean on desktop, not on mobile

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts