[Resolved] Animated hamburger menu icon

Home Forums Support Animated hamburger menu icon

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1278131
    Ramon

    Hi!
    I’m trying to achieve the animated hamburger menu icon of the following threat with no success:

    https://generatepress.com/forums/topic/animated-hamburger-icon/

    Could you please help me on that?

    #1278175
    Leo
    Staff
    Customer Support

    Hi there,

    Can you check on this thread?
    https://generatepress.com/forums/topic/animate-the-hamburger-menu/

    It’s the latest one I can find.

    Let me know πŸ™‚

    #1279321
    Ramon

    Hi Leo, thanks for your answer. We are pretty close to the solution but not done yet.

    1. I’m getting a javascript error: https://prnt.sc/sersz7

    2. Once I open the menu, the hamburger icon is hiding behind the off canvas panel so nobody can see the animation. The close icon is still the old one.

    Is it difficult to make the new hamburger icon always visible and use it as a close button either?

    I’ve applied a css media query to disable the hamburger on desktop.

    #1279984
    Tom
    Lead Developer
    Lead Developer

    Can you share your full code so I can see the source of the error?

    The only way for the animated icon to always show is to make the mobile header display on top:

    #mobile-header {
        z-index: 100002 !important;
        position: relative;
    }
    #1283577
    Ramon

    Thanks Tom! I applied your css and seems like we are close to the solution. I would like to close the menu with the same hamburger. How can I do it?

    This is the Javascript showing an error:

    <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>

    #1284476
    Tom
    Lead Developer
    Lead Developer

    Try replacing this:

    closeElements = document.querySelectorAll( '.slideout-overlay, .slider-exit a' );

    With this:

    closeElements = document.querySelectorAll( '.slideout-overlay, .hamburger.is-active' );

    #1284546
    Ramon

    no luck. Now is showing me the old close button with a blue hover background.

    https://paste.pics/905RX

    If I click the old close button is closing the menu but if I click the new animated hamburger is not working.

    #1284563
    Ramon

    The old close button is showing up only in computer if I resize the browser to a mobile size. In my mobile phone doesn’t show up and there’s a strange hover effect when I click any element inside the menu. Maybe that strange effect was there before and I didn’t realize it.

    #1285071
    Tom
    Lead Developer
    Lead Developer

    I’m not seeing what your screenshot shows at all – did you revert it?

    You could also try changing this:

    var hamburger = document.querySelector(β€œ.hamburger”)

    To this:

    var hamburger = document.querySelector('.hamburger:not(.is-active)')

    #1285154
    Ramon

    I applied the last code but it didn’t change anything.

    this is the screenshot:
    https://prnt.sc/sh5dr2

    #1286000
    Tom
    Lead Developer
    Lead Developer
    #1286173
    Ramon

    Yes Tom you are right!
    This is my functions code:

    <?php
    
    function generatepress_child_enqueue_scripts() {
    	if ( is_rtl() ) {
    		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
    	}
    }
    add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );
    
    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
    }
    
    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' );
    }
    
    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 );
    } );

    and this is the added code inside a hook footer:

    <script>
    	var hamburger = document.querySelector('.hamburger:not(.is-active)'),
    		menuToggle = document.querySelector( '.menu-toggle' ),
    		menuItems = document.querySelectorAll( 'nav ul a' ),
    		closeElements = document.querySelectorAll( '.slideout-overlay, .hamburger.is-active' );
    
    	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>

    If I delete the functions code, the menu isn’t working…So I don’t know what code should I use..

    #1286524
    Tom
    Lead Developer
    Lead Developer

    Did you try only deleting this part?:

    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 );
    } );
    #1286678
    Ramon

    Yes, that’s the part I tried to delete and the menu isn’t working. The hamburger icon doesn’t show the menu on click.

    #1287575
    Tom
    Lead Developer
    Lead Developer

    Ok, then keep that code and remove the other code in the Element.

    Then change your code to this:

    add_action( 'wp_enqueue_scripts', function() {
    	$script =
    		'var hamburgers = document.querySelectorAll( ".hamburger:not(.is-active)" ),
    		closeElements = document.querySelectorAll( ".slideout-overlay, .slideout-exit, .hamburger.is-active" );
    
    		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 );
    } );
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.