Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Ease-in transition for mobile "Hamburger" dropdown menu

Home Forums Support Ease-in transition for mobile "Hamburger" dropdown menu

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #400789
    john770

    Hi there,

    My GP navigation with the mobile Hamburger dropdown menu works great, but unfortunately without an elegant ease-in transition as seen on many sites, e.g., here:

    https://divi.space/
    (mobile view, elegant ease-in transition when clicking/tapping the hamburger icon)

    What I found in the GP documentation does not really fit my use case.
    https://docs.generatepress.com/article/navigation-dropdown/#dropdown-menu-transition

    It would be nice if you or anybody else here in the forum could help me with some fitting code snippet.

    CSS transition preferred, but other solutions also welcome. πŸ™‚
    Thanks!

    GeneratePress 1.4
    GP Premium 1.4.3
    #401046
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    That’s intentional, as people typically want instant results on mobile as opposed to transitions.

    Should be possible though – can you link me to your site?

    #401601
    john770

    Hi Tom,

    I am currently only testing on XAMPP, so I can’t link you to a live site. Just wanted to thank you swiftly for your answer, since, unfortunately, I haven’t got enough time for a detailed answer right now, but I will come back tomorrow.

    #402081
    john770

    Hi Tom,

    That’s intentional, as people typically want instant results on mobile as opposed to transitions.

    That’s a good reason, for sure, and I also try to avoid transitions and animations that are bad for the site’s performance and for user experience.

    OTOH, you are using the elegant slide-in navigation for mobile view on this very site, and I wonder if the same effect or a similar one would be possible for the (IMHO not so elegant) mobile *drop-down* menu.

    FYI, in mobile view, my site in progress (on XAMPP) has the “navigation logo” on the left and the Hamburger icon on the right-hand side (display:inline-block and float:right).

    Here’s the HTML, in case you should like to see it:

    
    <nav>
    <div class="inside-navigation grid-container grid-parent">
    	<div class="site-logo sticky-logo navigation-logo">
    		<a href="http://localhost/mysite/" title="mysite" rel="home">
    			<img class="header-image" src="http://localhost/mysite/wp-content/uploads/2017/09/logo-mysite.png" alt="mysite">
    		</a>
    	</div>
    		<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="true">
    			<span class="mobile-menu">Menu</span>
    		</button>
    	<div id="primary-menu" class="main-nav">
    		<ul id="menu-main-menu" class=" menu sf-menu">
    		...
    		</ul>
    	</div>
    </div><!-- .inside-navigation -->
    </nav>
    

    I had started with the mobile slide-in navigation, but changed to the drop-down menu after the menu items in the slide-in navigation were scrambled. This being the only thing that didn’t work so far with this great theme, I tried again after your above answer and got it working now – I had only enabled it in the Customizer, but had forgotten to additionally check “Slideout Menu” as the Display Location in the Menu Settings. πŸ™‚

    But, if you happen to know a way to give the mobile drop-down menu a similar transition as the one of the slide-in navigation, it would be great to learn about it and have *two* elegant mobile menus at hand.
    Thanks a lot for your help!

    #402092
    Tom
    Lead Developer
    Lead Developer

    Doing something like this should work:

    @media (max-width: 768px) {
        .main-navigation .main-nav > ul {
            display: block;
            max-height: 0;
            overflow: hidden;
            transition: max-height 100ms ease-in-out;
        }
    
        .main-navigation.toggled .main-nav > ul {
            max-height: 1000px;
            transition: max-height 400ms ease-in-out;
        }
    }

    Let me know πŸ™‚

    #402206
    john770

    Wow, brilliant, thank you so much! πŸ™‚
    The only thing I had to add (latest Firefox) was width: 100% for the first declaration, since without it the menu items were half-covered and started at the height of the logo. Very nice, now I have the choice between two elegant mobile menus, thanks a lot again!

    BTW: One of the many things I really like about your theme is that I go to NU HTML Checker and the result is “Document checking completed. No errors or warnings to show.” Then on to the W3C CSS Validator and the result is “Congratulations! No Error Found”.* Try that with any of the big multi-purpose themes at ThemeForest or elsewhere…
    *Only exception are blog pages with comments: No errors indicated, but for every single article class="comment-body" there is an (unjustified) warning: “Warning: Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles”, which doesn’t make any sense at all in the comment body context, does it? πŸ™‚

    #402352
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad I could help!

    Thank you! I take the quality of code very seriously. Interesting about the comments – I’ll do some research on that πŸ™‚

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.