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

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

[Tom]

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?

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

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

[Tom]

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 🙂

[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? 🙂

[Tom]

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 🙂

[Chris]

Hi team, I have attempted to apply the CSS to function with my mobile menu slide-down.

The code works fine for the animation in & out for the main nav, however it only does the animation for toggled-on for the sub menu items.

How do I modify the CSS to get the sub menu animation for when it is toggled-off?

/* Mobile menu */

@media (max-width: 768px) {
 .main-navigation .menu {
     background-color: var(--base-3);
     height: calc(100vh - 56px); 
}

.mobile-menu-open body {
     overflow: hidden;
}

#mobile-header.toggled .main-nav>ul {
     height: calc(100vh - 56px);
     overflow: auto !important;
     padding-bottom: 50px;
} 
    }

/* mobile menu slideout animation */

@media (max-width: 768px) {
  
 #mobile-header .main-nav > ul,
 #mobile-header .main-nav .sub-menu {
      display: block;
      max-height: 0;
      width: 100%;
      overflow: hidden;
      transition: max-height 400ms ease-in-out, opacity 0s ease-in-out;
      opacity: 0;
      overflow: hidden;
    }

 #mobile-header.toggled .main-nav > ul,
 #mobile-header .main-nav .sub-menu.toggled-on {
      display: block !important;
      max-height: 1000px;
      width: 100%;
      transition: max-height 600ms ease-in-out, opacity 600ms ease-in-out;
      opacity: 1;
      overflow: hidden;
    }

[David]

Hi there,

this is a real old topic, do you want to raise a new one where you can share a link to your site so i can take a look ?

[Author]

Posts