[Resolved] Visually appealing menus

Home Forums Support Visually appealing menus

  • This topic has 9 replies, 3 voices, and was last updated 3 months ago by Leo.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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!!

    #1457757
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #1460742
    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.

    #1461297
    Tom
    Lead Developer
    Lead Developer

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

    #1479144
    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.

    #1480685
    Tom
    Lead Developer
    Lead Developer

    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.

    #1494603
    Alessio

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

    #1494617
    Leo
    Staff
    Customer Support
    #1494635
    Alessio

    Oh no, I mean on desktop, not on mobile

    #1494642
    Leo
    Staff
    Customer Support

    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;
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.