[Resolved] Animation in secondary menu

[Ender]

Hi.

I am referring to a forum entry from the past, in which an animation for the first menu was realized:

https://generatepress.com/forums/topic/customize-burger-menu/page/2/#post-528197

I have modified these as follows:

add_action( 'generate_inside_mobile_menu', 'tu_custom_mobile_menu' );
add_action( 'generate_inside_secondary_mobile_menu', 'tu_custom_mobile_menu' );
function tu_custom_mobile_menu() {
?>
    <div class="wrapper-menu">
        <div class="line-menu half start"></div>
        <div class="line-menu"></div>
        <div class="line-menu half end"></div>
    </div>
<?php
}

Adding a Element into the wp_footer:

<script>

var wrapperMenu = document.querySelector('.wrapper-menu');
wrapperMenu.addEventListener('click', function(){
  wrapperMenu.classList.toggle('open');  
});

</script>

Adding this modified css:

/* Menu animation secondary navigation */

#secondary-navigation .menu-toggle:before,
.menu-toggle .mobile-menu {
    display: none;
}

.wrapper-menu {
  width: 25px;
  height: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 330ms ease-out;
}

.wrapper-menu.open {
  transform: rotate(-45deg);  
}

.line-menu {
  background-color: #111;
  border-radius: 5px;
  width: 100%;
  height: 6px;
}

.line-menu.half {
  width: 50%;
}

.line-menu.start {
  transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
  transform-origin: right;
}

.open .line-menu.start {
  transform: rotate(-90deg) translateX(3px);
}

.line-menu.end {
  align-self: flex-end;
  transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
  transform-origin: left;
}

.open .line-menu.end {
  transform: rotate(-90deg) translateX(-3px);
}

Somehow I can’t get the animation.

I know it’s a very special question. However I notice in the many forum entries here that a form of the animation is at least desired.

What do you think I’m doing wrong?

[Ender]

I also discovered that at least the Safari animation on iMac works when I use this code from here https://generatepress.com/forums/topic/customize-burger-menu/page/2/#post-530165:

<script>
	
jQuery( document ).ready( function($) {
    $( '.menu-toggle' ).on( 'click', function() {
        $( this ).find( '.wrapper-menu' ).toggleClass( 'open' );
    } );
} );

</script>

[David]

Hi there,

GP doesn’t load jQuery ( other then when the sticky nav is used ). So you will need to enqueue it. This snippet should do that for you:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'jquery' );
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ender]

Hi David.

I found now a another solution for my problem. Topic can be closed. Many thanks.

[David]

Nice alternative 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts