Archived topic

Animate the hamburger menu

12 replies · Started by Mårten on April 16, 2019

Viewing posts 1–13 of 13

April 16, 2019 at 12:33 am #870163

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:

Do you possibly have any idea what has gone wrong? :)

Thanks

April 16, 2019 at 8:58 am #870703

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

April 16, 2019 at 10:36 pm #871127

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.

April 17, 2019 at 10:19 am #871816

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

April 24, 2019 at 10:03 pm #878485

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

April 25, 2019 at 2:22 am #878769

Hi there,

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

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

April 25, 2019 at 3:47 am #878844

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

https://ibb.co/PDr0Dnm

April 25, 2019 at 4:35 pm #879775

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

April 30, 2019 at 1:05 am #883976

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

April 30, 2019 at 8:41 am #884527

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.

April 30, 2019 at 2:57 pm #884890

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);
}

May 2, 2019 at 9:49 pm #887344

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.

May 3, 2019 at 1:27 pm #888303

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

I'm also not seeing the CSS added - how did you add it?

This archived topic is closed to new replies.

Start building better websites today.