Archived topic
Animation for dropdown menu - mega menu and mobile
4 replies · Started by Viktor on February 8, 2021
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
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;
}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.
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?
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;
}