Hamburger menu style – Page 2

This topic has 20 replies, 2 voices, and was last updated 4 years, 11 months ago by Paul.

Viewing 6 posts - 16 through 21 (of 21 total)

← 1 2

Author

Posts

May 20, 2019 at 3:51 pm #906019

Tom

Lead Developer

Hi there,

Did you try my updated code above yet?

May 20, 2019 at 10:30 pm #906196

Paul

Hi Tom,
The updated code has been added but now the menu doesn’t work at all.
Just to recap here’s the CSS and functions.php that have been added

CSS

/*!
 * 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); }

/*Hamburger menu slideout*/
.hamburger {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 222222;
}

.slideout-toggle, button.slideout-exit {
    display: none !important;
}

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

functions.php

/**
 * Hamburger menu flyout
 */
add_action( 'generate_after_footer', function() {
	?>
	<div class="hamburger hamburger--collapse">
            <div class="hamburger-box">
                <div class="hamburger-inner"></div>
            </div>
        </div>
	<?php
} );

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 ) {
                            if ( ! hamburgers[h].classList.contains( "is-active" ) {
				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 );
} );

May 21, 2019 at 11:35 am #907045

Tom

Lead Developer

K, here’s the working code.

CSS:

/*!
 * 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); }

/*Hamburger menu slideout*/
.hamburger {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 222222;
}

.slideout-toggle, button.slideout-exit {
    display: none !important;
}

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

PHP:

/**
 * Hamburger menu flyout
 */
add_action( 'generate_after_footer', function() {
	?>
	<div class="hamburger hamburger--collapse">
            <div class="hamburger-box">
                <div class="hamburger-inner"></div>
            </div>
        </div>
	<?php
} );

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 ) {
				if ( ! this.classList.contains( "is-active" ) ) {
					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 );
} );

May 21, 2019 at 11:57 am #907060

Paul

Hi Tom,
Thanks for the updated code.
I’ve replaced the custom CSS and functions.php and the hamburger menu now responds to a click event but it isn’t moving out to the left in line as per https://demo.kaliumtheme.com/main-dark/ but instead the nav menu is drawing up as vertically stacked items. Also the close button isn’t responding.

May 21, 2019 at 1:01 pm #907135

Tom

Lead Developer

Ah, I’m sorry – I misunderstood. I thought you wanted the animation to always trigger the off canvas panel.

To have it display your regular menu like that on desktop and the off canvas on mobile is much more complicated, unfortunately. It requires even more custom javascript.

I can see if there’s a quick solution, but the complete solution might be too complicated to provide within the forum. Will let you know.

May 22, 2019 at 11:13 pm #908437

Paul

Ok thanks Tom.

Author

Posts

Viewing 6 posts - 16 through 21 (of 21 total)

← 1 2

You must be logged in to reply to this topic.

[Support request] Hamburger menu style

Popular Articles

Start building better websites today.