[Resolved] Animation in secondary menu

Home Forums Support [Resolved] Animation in secondary menu

Home Forums Support Animation in secondary menu

  • This topic has 4 replies, 2 voices, and was last updated 4 years ago by David.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #822894
    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?

    #822901
    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>
    #823435
    David
    Staff
    Customer Support

    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' );
    } );
    #824181
    Ender

    Hi David.

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

    #824254
    David
    Staff
    Customer Support
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.