[Support request] Animate the hamburger menu

Home Forums Support [Support request] Animate the hamburger menu

Home Forums Support Animate the hamburger menu

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #870163
    Mårten

    I try to add animation to the hamburger menu from https://jonsuh.com/hamburgers/

    I have insert the files in the Generate Press Child folder.

    Added CSS code:

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

    Added function:

    add_action( 'generate_inside_mobile_menu', 'tu_hamburger_icon' );
    function tu_hamburger_icon() {
    ?>
        <div class="hamburger hamburger--collapse">
            <div class="hamburger-box">
                <div class="hamburger-inner"></div>
            </div>
        </div>
    <?php
    }

    AND

    add_action( 'wp_enqueue_scripts', 'tu_load_font_awesome' );
    /** 
     * Enqueue Font Awesome. 
     */
    function tu_load_font_awesome() {
        wp_enqueue_style( 'font-awesome', '//use.fontawesome.com/releases/v5.5.0/css/all.css', array(), '5.5.0' );
    }

    Installed the Font Awesome 5 plugin.

    Add script in wp footer iv Elements:

    <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[i].addEventListener( 'click', function( e ) {
            		hamburger.classList.toggle("is-active");
    		} );
    	};
    
    	for ( var i = 0; i < menuItems.length; i++ ) {
    		menuItems[i].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>

    Added in wp head via Elements:

    <link href=”http://www2.resvillemathantverk.se/wp-content/themes/generatepress_child/dist/hamburgers.css&#8221; rel=”stylesheet”>

    Do you possibly have any idea what has gone wrong? 🙂

    Thanks

    #870703
    Leo
    Staff
    Customer Support

    Hi there,

    Can you take a look at this (long) post and see if everything is done correctly?
    https://generatepress.com/forums/topic/animated-hamburger-icon/
    https://gist.github.com/generatepress/589b9e91bca7205883b0454f15a4dcf9

    Let me know 🙂

    #871127
    Mårten

    I have followed that post and commented but Tom asked me to create a new thread … 🙂
    What I can see, I have done everything right.

    #871816
    Tom
    Lead Developer
    Lead Developer

    I’m not seeing the hamburger element inside your menu toggle. How are you adding that function currently?

    #878485
    Mårten

    Hmm I don’t know. I just followed the previous post about the same issue. Where do I add that function?

    #878769
    David
    Staff
    Customer Support

    Hi there,

    this article explains how you can add PHP ( functions ):

    https://docs.generatepress.com/article/adding-php/

    #878844
    Mårten

    Oh ok. I’ve already added the function in Code Snippet. Please see screenshot.

    https://ibb.co/PDr0Dnm

    #879775
    Tom
    Lead Developer
    Lead Developer

    Are you wanting hamburger to be on desktop or mobile? Or both?

    On desktop, you’re using the regular off canvas toggle, so the above code would need to be completely re-worked (not 100% it’s possible yet).

    On mobile, the off canvas panel covers the menu toggle, so the animation wouldn’t be visible.

    Let me know 🙂

    #883976
    Mårten

    I want the hamburger on both desktop and mobile.
    Please help me, i thought i did everything right. But clearly not! 🙁

    #884527
    Tom
    Lead Developer
    Lead Developer

    Unfortunately, it’s a pretty complex thing, as those animated menus use multiple elements and transitions. I’ll see if I can write something up for you today.

    #884890
    Tom
    Lead Developer
    Lead Developer

    Alright, not easy but I have something working.

    Notes:

    1. This requires the off canvas panel to be set to “On”.
    2. The mobile header must be active.

    First, add these functions:

    add_action( 'generate_inside_navigation', 'tu_add_hamburger' );
    add_action( 'generate_inside_mobile_header', 'tu_add_hamburger' );
    function tu_add_hamburger() {
    	if ( 'generate_inside_mobile_header' === current_action() ) {
    		echo '<div class="mobile-bar-items">';
    	}
    	?>
    	<div class="hamburger hamburger--collapse">
            <div class="hamburger-box">
                <div class="hamburger-inner"></div>
            </div>
        </div>
    	<?php
    	if ( 'generate_inside_mobile_header' === current_action() ) {
    		echo '</div>';
    	}
    }
    
    add_action( 'wp_enqueue_scripts', function() {
    	$script =
    		'var hamburgers = document.querySelectorAll( ".hamburger" ),
    		closeElements = document.querySelectorAll( ".slideout-overlay, .slideout-exit" );
    
    		for ( var h = 0; h < hamburgers.length; h++ ) {
    			hamburgers[h].addEventListener( "click", function( e ) {
    				generateOffside.open();
    				this.classList.add("is-active");
    			} );
    		};
    
    		for ( var e = 0; e < closeElements.length; e++ ) {
    			closeElements[e].addEventListener( "click", function( e ) {
    				for ( var h = 0; h < hamburgers.length; h++ ) {
    					hamburgers[h].classList.remove("is-active");
    				};
    			} );
    		};';
    
    	wp_add_inline_script( 'generate-offside', $script );
    } );

    Now add this CSS:

    .hamburger {
    	float: right;
    	order: 100;
    	padding: 0 20px;
    	margin-top: 15px;
    }
    
    .hamburger-box {
    	width: 20px;
    	height: 12px;
    }
    
    .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    	width: 20px;
    	height: 2px;
    }
    
    .hamburger-inner:before {
    	top: -5px;
    }
    
    .hamburger-inner:after {
    	bottom: -5px;
    }
    
    .hamburger--collapse .hamburger-inner:after {
    	top: -10px;
    }
    
    .hamburger-inner, 
    .hamburger-inner:after, 
    .hamburger-inner:before,
    .hamburger.is-active .hamburger-inner, 
    .hamburger.is-active .hamburger-inner:after, 
    .hamburger.is-active .hamburger-inner:before {
    	background-color: #fff;
    }
    
    #mobile-header .menu-toggle, li.slideout-toggle {
    	display: none;
    }
    
    .hamburger--collapse.is-active .hamburger-inner {
        transform: translate3d(0,-5px,0) rotate(-45deg);
    }
    #887344
    Mårten

    Thank you!
    It looks like we are getting closer! 🙂

    The original hamburger appears in sticky navigation and mobile version. The menu does not appear when i click on the new hamburger.

    #888303
    Tom
    Lead Developer
    Lead Developer

    I just updated the javascript – can you try re-adding it?

    I’m also not seeing the CSS added – how did you add it?

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