[Support request] Animation for dropdown menu – mega menu and mobile

[Viktor]

Hello,

We have implemented a mega menu as per the official documentation and added a simple one-way css transition because on closing the sub menu a very short view of the sub-menu is visible and transitions rather than the whole panel. Is it possible to have a slide-out effect on the mega menu dropdown?

Also, how to put some animation on the dropdown menus in the off-canvas mobile panel? When we tried this, the menu items disappeared.

Here is the staging site: https://url.tonka.design/-hbh2

Many thanks!
Viktor

[David]

Hi there,

try this CSS:

#generate-slideout-menu.main-navigation .main-nav ul ul {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in;
  height: unset;
}

#generate-slideout-menu.main-navigation ul ul.toggled-on {
  max-height: 1000px;
}

[Viktor]

Thanks for the reply David!
This does make the mobile menus slide open, but there is no close slide animation. Also the sub-sub-menus are not accessible. You can see the effect of the code on the website right now.

[Viktor]

Never mind – my bad. It works but on collapsing the sub-menu disappears immediately, while the height transition is gradual. I applied the transition to the expanding state only and at least no there are no empty spaces during the animation.

#generate-slideout-menu.main-navigation .main-nav .slideout-menu ul {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  height: unset;
}

#generate-slideout-menu.main-navigation .slideout-menu ul.toggled-on {
  max-height: 1000px;
	transition: max-height 0.3s ease-in;
}

Ideally, the animation would go in both directions though.
Also, any ideas for the desktop version?

[David]

Try this:

#generate-slideout-menu.main-navigation .main-nav .slideout-menu ul {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  height: unset;
  transition: max-height 0.3s ease-in-out;
  opacity: 1;
}

#generate-slideout-menu.main-navigation .slideout-menu ul.toggled-on {
  max-height: 1000px;
}

[Author]

Posts