How to make such a beautiful effect when opening the navigation menu in the mobile version?

Question

css

Good evening!
Tell me please. How to make such a smooth effect when opening the menu in the mobile version? Like on this site
TYK
The site seems to fall and resurface.
Thanks in advance!

Answer 1

You can also use the jQuery library - there are functions for such animation

Answer 2

jQuery( '#td-top-mobile-toggle a, .td-mobile-close a' ).click(function(){
if ( jQuery( 'body' ).hasClass( 'td-menu-mob-open-menu ' ) ) {
jQuery( 'body' ).removeClass( 'td-menu-mob-open-menu' );
} else {
jQuery( 'body' ).addClass( 'td-menu-mob-open-menu' ) ;
}
});
Instead of #td-top-mobile-toggle a is the name of your button.
For the td-menu-mob-open-menu class, set scale to 0.8 in styles, and transition
Script logic - by clicking on the menu button, a class is hung on the body, which smoothly reduces it in size