[Support request] Replacing GP mobile menu with CSS animated hamburger

Home Forums Support Replacing GP mobile menu with CSS animated hamburger

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1288095
    Carl

    I want to replace my current GP menu with one a Jonsuh.com mobile menu: Tasty CSS animated hamburgers. In short, I don’t want to crash Site. I’ve got limited experiece.

    #1288945
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The first thing you’ll want to do is load their CSS: https://github.com/jonsuh/hamburgers

    Ideally, you only want to load the effect you’re wanting to achieve.

    For example:

    /*!
     * Hamburgers
     * @description Tasty CSS-animated hamburgers
     * @author Jonathan Suh @jonsuh
     * @site https://jonsuh.com/hamburgers
     * @link https://github.com/jonsuh/hamburgers
     */
    .hamburger {
      padding: 15px 15px;
      display: inline-block;
      cursor: pointer;
      transition-property: opacity, filter;
      transition-duration: 0.15s;
      transition-timing-function: linear;
      font: inherit;
      color: inherit;
      text-transform: none;
      background-color: transparent;
      border: 0;
      margin: 0;
      overflow: visible; }
      .hamburger:hover {
        opacity: 0.7; }
      .hamburger.is-active:hover {
        opacity: 0.7; }
      .hamburger.is-active .hamburger-inner,
      .hamburger.is-active .hamburger-inner::before,
      .hamburger.is-active .hamburger-inner::after {
        background-color: #000; }
    
    .hamburger-box {
      width: 40px;
      height: 24px;
      display: inline-block;
      position: relative; }
    
    .hamburger-inner {
      display: block;
      top: 50%;
      margin-top: -2px; }
      .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
        width: 40px;
        height: 4px;
        background-color: #000;
        border-radius: 4px;
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease; }
      .hamburger-inner::before, .hamburger-inner::after {
        content: "";
        display: block; }
      .hamburger-inner::before {
        top: -10px; }
      .hamburger-inner::after {
        bottom: -10px; }
    
    /*
       * Collapse
       */
    .hamburger--collapse .hamburger-inner {
      top: auto;
      bottom: 0;
      transition-duration: 0.13s;
      transition-delay: 0.13s;
      transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
      .hamburger--collapse .hamburger-inner::after {
        top: -20px;
        transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
      .hamburger--collapse .hamburger-inner::before {
        transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    
    .hamburger--collapse.is-active .hamburger-inner {
      transform: translate3d(0, -10px, 0) rotate(-45deg);
      transition-delay: 0.22s;
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
      .hamburger--collapse.is-active .hamburger-inner::after {
        top: 0;
        opacity: 0;
        transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
      .hamburger--collapse.is-active .hamburger-inner::before {
        top: 0;
        transform: rotate(-90deg);
        transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

    Then, you need to overwrite the GP menu icon with the necessary HTML, and add javascript so it all works:

    add_action( 'generate_inside_mobile_menu', function() {
    ?>
        <div class="hamburger hamburger--collapse">
            <div class="hamburger-box">
                <div class="hamburger-inner"></div>
            </div>
        </div>
    <?php
    } );
    
    add_action( 'wp_footer', function() {
    ?>
    	<script>
    	var hamburger = document.querySelector(".hamburger"),
    		menuToggle = document.querySelector( '.menu-toggle' ),
    		menuItems = document.querySelectorAll( 'nav ul a' ),
    		closeElements = document.querySelectorAll( '.slideout-overlay, .slider-exit a' );
    
    	menuToggle.addEventListener("click", function() {
    		hamburger.classList.toggle("is-active");
    	} );
    
    	for ( var i = 0; i < closeElements.length; i++ ) {
    		closeElements.addEventListener( 'click', function( e ) {
    				hamburger.classList.toggle("is-active");
    		} );
    	};
    
    	for ( var i = 0; i < menuItems.length; i++ ) {
    		menuItems.addEventListener( 'click', function( e ) {
    			var closest_nav = this.closest( 'nav' );
    			if ( closest_nav.classList.contains( 'toggled' ) || htmlEl.classList.contains( 'slide-opened' ) ) {
    				var url = this.getAttribute( 'href' );
    				var hash = url.split('#')[1];
    
    				// Open the sub-menu if the link has no destination
    				if ( hash ) {
    					e.preventDefault();
    					hamburger.classList.toggle("is-active");
    				}
    			}
    		}, false );
    	}
    	</script>
    <?php
    } );

    Lastly, you need some custom CSS to style things appropriately:

    .menu-toggle .mobile-menu,
    .menu-toggle:before {
        display: none;
    }
    
    .menu-toggle .hamburger{
      transform: scale(.5);
        padding: 0;
    }
    
    .menu-toggle .hamburger.is-active .hamburger-inner::after,
    .menu-toggle .hamburger-inner, .menu-toggle .hamburger-inner::before, 
    .menu-toggle .hamburger-inner::after,
    .menu-toggle .hamburger.is-active .hamburger-inner, 
    .menu-toggle .hamburger.is-active .hamburger-inner::before,
    .menu-toggle .hamburger.is-active .hamburger-inner::after{
        background-color: currentColor;
    }
    #1312897
    nik9

    Hi Tom,

    I also want to do this. But I want to ask you if there is a another way in GP to do that? Maybe there is a GP solution available?

    Cheers

    #1312980
    Leo
    Staff
    Customer Support

    No there isn’t anything built-in.

    Here is the full solution here:
    https://docs.generatepress.com/article/animated-hamburgers/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.