",
"license" : "CC-BY-4.0",
"description" : "A small collection of CSS animated hamburgers. All set up to work out of the box with the mmenu.js plugin.",
@@ -13,4 +13,4 @@
"menu",
"navigation"
]
-}
\ No newline at end of file
+}
diff --git a/dist/mburger.css b/dist/mburger.css
index a65d55a..d739d8e 100644
--- a/dist/mburger.css
+++ b/dist/mburger.css
@@ -1 +1,10 @@
-:root{--mb-button-size:60px;--mb-bar-width:0.6;--mb-bar-height:4px;--mb-bar-spacing:10px;--mb-cross-timeout:$mb_cross_timeout}.mburger{background:0 0;border:none;border-radius:0;color:inherit;display:inline-block;position:relative;box-sizing:border-box;height:var(--mb-button-size);padding:0 0 0 var(--mb-button-size);margin:0;line-height:var(--mb-button-size);vertical-align:middle;appearance:none;outline:0;cursor:pointer}.mburger b{display:block;position:absolute;left:calc(var(--mb-button-size) * ((1 - var(--mb-bar-width))/ 2));width:calc(var(--mb-button-size) * var(--mb-bar-width));height:var(--mb-bar-height);border-radius:calc(var(--mb-bar-height)/ 2);background:currentColor;color:inherit;opacity:1}.mburger b:nth-of-type(1){bottom:calc(50% + var(--mb-bar-spacing));transition:bottom .2s ease,transform .2s ease}.mburger b:nth-of-type(2){top:calc(50% - (var(--mb-bar-height)/ 2));transition:opacity .2s ease}.mburger b:nth-of-type(3){top:calc(50% + var(--mb-bar-spacing));transition:top .2s ease,transform .2s ease}.mburger span:not(:empty){padding-right:calc(var(--mb-button-size) * ((1 - var(--mb-bar-width))/ 2))}.mm-wrapper_opened .mburger b:nth-of-type(1){bottom:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(45deg)}.mm-wrapper_opened .mburger b:nth-of-type(2){opacity:0}.mm-wrapper_opened .mburger b:nth-of-type(3){top:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(-45deg)}.mburger--collapse b:nth-of-type(1){transition:bottom .2s ease,margin .2s ease,transform .2s ease;transition-delay:.2s,0s,0s}.mburger--collapse b:nth-of-type(2){transition:top .2s ease,opacity 0s ease;transition-delay:.3s,.3s}.mburger--collapse b:nth-of-type(3){transition:top .2s ease,transform .2s ease}.mm-wrapper_opened .mburger--collapse b:nth-of-type(1){bottom:calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));margin-bottom:calc(var(--mb-bar-spacing) + (var(--mb-bar-height)/ 2));transform:rotate(45deg);transition-delay:calc(var(--mb-cross-timeout) + .1s),calc(var(--mb-cross-timeout) + .3s),calc(var(--mb-cross-timeout) + .3s)}.mm-wrapper_opened .mburger--collapse b:nth-of-type(2){top:calc(50% + var(--mb-bar-spacing));opacity:0;transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)}.mm-wrapper_opened .mburger--collapse b:nth-of-type(3){top:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(-45deg);transition-delay:calc(var(--mb-cross-timeout) + .3s),calc(var(--mb-cross-timeout) + .3s)}.mburger--spin b:nth-of-type(1){transition-delay:.2s,0s}.mburger--spin b:nth-of-type(2){transition-duration:0s;transition-delay:.2s}.mburger--spin b:nth-of-type(3){transition-delay:.2s,0s}.mm-wrapper_opened .mburger--spin b:nth-of-type(1){transform:rotate(135deg);transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)}.mm-wrapper_opened .mburger--spin b:nth-of-type(2){transition-delay:calc(var(--mb-cross-timeout) + 0s)}.mm-wrapper_opened .mburger--spin b:nth-of-type(3){transform:rotate(225deg);transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)}.mburger--squeeze b:nth-of-type(1){transition-delay:.1s,0s}.mburger--squeeze b:nth-of-type(2){transition-delay:.1s}.mburger--squeeze b:nth-of-type(3){transition-delay:.1s,0s}.mm-wrapper_opened .mburger--squeeze b:nth-of-type(1){transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .1s)}.mm-wrapper_opened .mburger--squeeze b:nth-of-type(2){transition-delay:calc(var(--mb-cross-timeout) + 0s)}.mm-wrapper_opened .mburger--squeeze b:nth-of-type(3){transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .1s)}.mburger--tornado b:nth-of-type(1){transition:bottom .2s ease,transform .2s ease;transition-delay:.2s}.mburger--tornado b:nth-of-type(2){transition:opacity 0s ease,transform .2s ease;transition-delay:.1s,.1s}.mburger--tornado b:nth-of-type(3){transition:top .2s ease,transform .2s ease;transition-delay:0s}.mm-wrapper_opened .mburger--tornado b:nth-of-type(1){transform:rotate(-135deg);transition-delay:calc(var(--mb-cross-timeout) + 0s)}.mm-wrapper_opened .mburger--tornado b:nth-of-type(2){opacity:0;transform:rotate(-135deg);transition-delay:calc(var(--mb-cross-timeout) + .4s),calc(var(--mb-cross-timeout) + .1s)}.mm-wrapper_opened .mburger--tornado b:nth-of-type(3){transform:rotate(-225deg);transition-delay:calc(var(--mb-cross-timeout) + .2s)}
\ No newline at end of file
+/*!
+ * mburger CSS v1.3.1
+ * mmenujs.com/mburger
+ *
+ * Copyright (c) Fred Heusschen
+ * www.frebsite.nl
+ *
+ * License: CC-BY-4.0
+ * http://creativecommons.org/licenses/by/4.0/
+ */:root{--mb-button-size:60px;--mb-bar-width:0.6;--mb-bar-height:4px;--mb-bar-spacing:10px;--mb-animate-timeout:0.4s}.mburger{background:0 0;border:none;border-radius:0;color:inherit;display:inline-block;position:relative;box-sizing:border-box;height:var(--mb-button-size);padding:0 0 0 var(--mb-button-size);margin:0;line-height:var(--mb-button-size);vertical-align:middle;appearance:none;outline:0;cursor:pointer}.mburger b{display:block;position:absolute;left:calc(var(--mb-button-size) * ((1 - var(--mb-bar-width))/ 2));width:calc(var(--mb-button-size) * var(--mb-bar-width));height:var(--mb-bar-height);border-radius:calc(var(--mb-bar-height)/ 2);background:currentColor;color:inherit;opacity:1}.mburger b:nth-of-type(1){bottom:calc(50% + var(--mb-bar-spacing));transition:bottom .2s ease,transform .2s ease,width .2s ease}.mburger b:nth-of-type(2){top:calc(50% - (var(--mb-bar-height)/ 2));transition:opacity .2s ease}.mburger b:nth-of-type(3){top:calc(50% + var(--mb-bar-spacing));transition:top .2s ease,transform .2s ease,width .2s ease}.mm-wrapper_opened .mburger b:nth-of-type(1){bottom:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(45deg)}.mm-wrapper_opened .mburger b:nth-of-type(2){opacity:0}.mm-wrapper_opened .mburger b:nth-of-type(3){top:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(-45deg)}.mburger--collapse b:nth-of-type(1){transition:bottom .2s ease,margin .2s ease,transform .2s ease;transition-delay:.2s,0s,0s}.mburger--collapse b:nth-of-type(2){transition:top .2s ease,opacity 0s ease;transition-delay:.3s,.3s}.mburger--collapse b:nth-of-type(3){transition:top .2s ease,transform .2s ease}.mm-wrapper_opened .mburger--collapse b:nth-of-type(1){bottom:calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));margin-bottom:calc(var(--mb-bar-spacing) + (var(--mb-bar-height)/ 2));transform:rotate(45deg);transition-delay:calc(var(--mb-animate-timeout) + .1s),calc(var(--mb-animate-timeout) + .3s),calc(var(--mb-animate-timeout) + .3s)}.mm-wrapper_opened .mburger--collapse b:nth-of-type(2){top:calc(50% + var(--mb-bar-spacing));opacity:0;transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .2s)}.mm-wrapper_opened .mburger--collapse b:nth-of-type(3){top:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(-45deg);transition-delay:calc(var(--mb-animate-timeout) + .3s),calc(var(--mb-animate-timeout) + .3s)}.mburger--spin b:nth-of-type(1){transition-delay:.2s,0s}.mburger--spin b:nth-of-type(2){transition-duration:0s;transition-delay:.2s}.mburger--spin b:nth-of-type(3){transition-delay:.2s,0s}.mm-wrapper_opened .mburger--spin b:nth-of-type(1){transform:rotate(135deg);transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .2s)}.mm-wrapper_opened .mburger--spin b:nth-of-type(2){transition-delay:calc(var(--mb-animate-timeout) + 0s)}.mm-wrapper_opened .mburger--spin b:nth-of-type(3){transform:rotate(225deg);transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .2s)}.mburger--squeeze b:nth-of-type(1){transition-delay:.1s,0s}.mburger--squeeze b:nth-of-type(2){transition-delay:.1s}.mburger--squeeze b:nth-of-type(3){transition-delay:.1s,0s}.mm-wrapper_opened .mburger--squeeze b:nth-of-type(1){transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .1s)}.mm-wrapper_opened .mburger--squeeze b:nth-of-type(2){transition-delay:calc(var(--mb-animate-timeout) + 0s)}.mm-wrapper_opened .mburger--squeeze b:nth-of-type(3){transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .1s)}.mburger--tornado b:nth-of-type(1){transition:bottom .2s ease,transform .2s ease;transition-delay:.2s}.mburger--tornado b:nth-of-type(2){transition:opacity 0s ease,transform .2s ease;transition-delay:.1s,.1s}.mburger--tornado b:nth-of-type(3){transition:top .2s ease,transform .2s ease;transition-delay:0s}.mm-wrapper_opened .mburger--tornado b:nth-of-type(1){transform:rotate(-135deg);transition-delay:calc(var(--mb-animate-timeout) + 0s)}.mm-wrapper_opened .mburger--tornado b:nth-of-type(2){opacity:0;transform:rotate(-135deg);transition-delay:calc(var(--mb-animate-timeout) + .4s),calc(var(--mb-animate-timeout) + .1s)}.mm-wrapper_opened .mburger--tornado b:nth-of-type(3){transform:rotate(-225deg);transition-delay:calc(var(--mb-animate-timeout) + .2s)}
\ No newline at end of file
diff --git a/dist/mburger.js b/dist/mburger.js
index 9775392..da25682 100644
--- a/dist/mburger.js
+++ b/dist/mburger.js
@@ -1,5 +1,5 @@
/*
- * mburger webcomponent CSS v1.3.0
+ * mburger webcomponent v1.3.1
* mmenujs.com/mburger
*
* Copyright (c) Fred Heusschen
@@ -10,46 +10,58 @@
*/
export const mBurger = document.createElement('template');
mBurger.innerHTML = `
-
+
- `;
+ `;
customElements.define('m-burger', class extends HTMLElement {
constructor() {
super();
- var content = mBurger.content.cloneNode(true);
+ /** The menu node. */
+ this.menuNode = null;
+ /** API for the menu. */
+ this.menuApi = null;
// Attach shadow DOM
+ var content = mBurger.content.cloneNode(true);
this.attachShadow({ mode: 'open' }).appendChild(content);
- this.menu = null;
}
static get observedAttributes() {
return ['menu'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name == 'menu') {
- this.menu = newValue ? document.getElementById(newValue) : null;
- if (this.menu) {
- let API = this.menu['mmenu'];
- if (API) {
- API.bind('open:after', () => {
- this.setAttribute('state', 'cross');
- });
- API.bind('close:after', () => {
- this.removeAttribute('state');
- });
- }
+ // Set the new menu node and API.
+ this.setMenu(newValue);
+ // Change the hamburger state when opening and closing the menu.
+ if (this.menuApi) {
+ this.menuApi.bind('open:after', () => {
+ this.setAttribute('state', 'cross');
+ });
+ this.menuApi.bind('close:after', () => {
+ this.removeAttribute('state');
+ });
}
}
}
connectedCallback() {
+ // Open the menu when clicking the hamburger.
this.addEventListener('click', evnt => {
- if (this.menu && this.menu.classList.contains('mm-menu')) {
- let API = this.menu['mmenu'];
- if (API && API.open) {
- API.open();
- }
+ if (this.menuApi && this.menuApi.open) {
+ this.menuApi.open();
}
});
}
+ /**
+ * Set the menu node and API.
+ * @param {string} id The ID-attribute for the menu node.
+ */
+ setMenu(id) {
+ this.menuNode = id ? document.getElementById(id) : null;
+ this.menuApi = null;
+ if (this.menuNode) {
+ this.menuApi =
+ this.menuNode['mmApi'] || this.menuNode['mmenu'] || null;
+ }
+ }
});
diff --git a/index.html b/index.html
index e26e547..76466d1 100644
--- a/index.html
+++ b/index.html
@@ -120,7 +120,6 @@ Native webcomponent
spin
-
diff --git a/package-lock.json b/package-lock.json
index 6751f63..1454bf5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "mburger-css",
- "version": "1.3.0",
+ "version": "1.3.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index e5e3891..fddbe92 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "mburger-css",
- "version": "1.3.0",
+ "version": "1.3.1",
"main": "dist/mburger.css",
"author": "Fred Heusschen ",
"license": "CC-BY-4.0",
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
index ffe9f38..7fc2b0c 100644
--- a/src/scss/_base.scss
+++ b/src/scss/_base.scss
@@ -11,8 +11,8 @@
/** Distance between bars (approximately). */
--mb-bar-spacing: 10px;
- /** Timeout before starting the "cross" animation, ensures the animation starts after the menu is fully opened. */
- --mb-cross-timeout: $mb_cross_timeout;
+ /** Timeout before starting the animation, ensures the animation starts after the menu is fully opened. */
+ --mb-animate-timeout: #{$mb_animate_timeout};
}
#{$mb_module} {
@@ -50,7 +50,7 @@
// Bar 1
&:nth-of-type(1) {
bottom: calc(50% + var(--mb-bar-spacing));
- transition: bottom 0.2s ease, transform 0.2s ease;
+ transition: bottom 0.2s ease, transform 0.2s ease, width 0.2s ease;
}
// Bar 2
@@ -62,20 +62,13 @@
// Bar 3
&:nth-of-type(3) {
top: calc(50% + var(--mb-bar-spacing));
- transition: top 0.2s ease, transform 0.2s ease;
+ transition: top 0.2s ease, transform 0.2s ease, width 0.2s ease;
}
}
-
- // Text
- span:not(:empty) {
- padding-right: calc(
- var(--mb-button-size) * ((1 - var(--mb-bar-width)) / 2)
- );
- }
}
// Cross
-#{$mb_module_opened} {
+#{$mb_module_cross} {
b {
&:nth-of-type(1) {
bottom: calc(50% - (var(--mb-bar-height) / 2));
diff --git a/src/scss/_fx.collapse.scss b/src/scss/_fx.collapse.scss
index 836d453..7d03aef 100644
--- a/src/scss/_fx.collapse.scss
+++ b/src/scss/_fx.collapse.scss
@@ -1,49 +1,49 @@
-@if ( $mb_fx_collapse ) {
+@if ($mb_fx_collapse) {
+ // Hamburger
+ #{$mb_module_collapse} {
+ b {
+ &:nth-of-type(1) {
+ transition: bottom 0.2s ease, margin 0.2s ease,
+ transform 0.2s ease;
+ transition-delay: 0.2s, 0s, 0s;
+ }
+ &:nth-of-type(2) {
+ transition: top 0.2s ease, opacity 0s ease;
+ transition-delay: 0.3s, 0.3s;
+ }
+ &:nth-of-type(3) {
+ transition: top 0.2s ease, transform 0.2s ease;
+ }
+ }
+ }
- // Hamburger
- #{$mb_module_collapse} {
- b {
- &:nth-of-type(1) {
- transition: bottom 0.2s ease, margin 0.2s ease, transform 0.2s ease;
- transition-delay: 0.2s, 0s, 0s;
- }
- &:nth-of-type(2) {
- transition: top 0.2s ease, opacity 0s ease;
- transition-delay: 0.3s, 0.3s;
- }
- &:nth-of-type(3) {
- transition: top 0.2s ease, transform 0.2s ease;
- }
- }
- }
-
- // Cross
- #{$mb_module_collapse_opened} {
- b {
- &:nth-of-type(1) {
- bottom: calc( 50% - var( --mb-bar-spacing ) - var( --mb-bar-height ) );
- margin-bottom: calc( var( --mb-bar-spacing ) + ( var( --mb-bar-height ) / 2 ) );
- transform: rotate( 45deg );
- transition-delay:
- calc( var( --mb-cross-timeout ) + 0.1s ),
- calc( var( --mb-cross-timeout ) + 0.3s ),
- calc( var( --mb-cross-timeout ) + 0.3s );
- }
- &:nth-of-type(2) {
- top: calc( 50% + var( --mb-bar-spacing ) );
- opacity: 0;
- transition-delay:
- calc( var( --mb-cross-timeout ) + 0s ),
- calc( var( --mb-cross-timeout ) + 0.2s );
- }
- &:nth-of-type(3) {
- top: calc( 50% - ( var( --mb-bar-height ) / 2 ) );
- transform: rotate( -45deg );
- transition-delay:
- calc( var( --mb-cross-timeout ) + 0.3s ),
- calc( var( --mb-cross-timeout ) + 0.3s );
- }
- }
- }
-
-}
\ No newline at end of file
+ // Cross
+ #{$mb_module_collapse_cross} {
+ b {
+ &:nth-of-type(1) {
+ bottom: calc(
+ 50% - var(--mb-bar-spacing) - var(--mb-bar-height)
+ );
+ margin-bottom: calc(
+ var(--mb-bar-spacing) + (var(--mb-bar-height) / 2)
+ );
+ transform: rotate(45deg);
+ transition-delay: calc(var(--mb-animate-timeout) + 0.1s),
+ calc(var(--mb-animate-timeout) + 0.3s),
+ calc(var(--mb-animate-timeout) + 0.3s);
+ }
+ &:nth-of-type(2) {
+ top: calc(50% + var(--mb-bar-spacing));
+ opacity: 0;
+ transition-delay: calc(var(--mb-animate-timeout) + 0s),
+ calc(var(--mb-animate-timeout) + 0.2s);
+ }
+ &:nth-of-type(3) {
+ top: calc(50% - (var(--mb-bar-height) / 2));
+ transform: rotate(-45deg);
+ transition-delay: calc(var(--mb-animate-timeout) + 0.3s),
+ calc(var(--mb-animate-timeout) + 0.3s);
+ }
+ }
+ }
+}
diff --git a/src/scss/_fx.spin.scss b/src/scss/_fx.spin.scss
index d81e9bc..241905e 100644
--- a/src/scss/_fx.spin.scss
+++ b/src/scss/_fx.spin.scss
@@ -1,40 +1,36 @@
-@if ( $mb_fx_spin ) {
+@if ($mb_fx_spin) {
+ // Hamburger
+ #{$mb_module_spin} {
+ b {
+ &:nth-of-type(1) {
+ transition-delay: 0.2s, 0s;
+ }
+ &:nth-of-type(2) {
+ transition-duration: 0s;
+ transition-delay: 0.2s;
+ }
+ &:nth-of-type(3) {
+ transition-delay: 0.2s, 0s;
+ }
+ }
+ }
- // Hamburger
- #{$mb_module_spin} {
- b {
- &:nth-of-type(1) {
- transition-delay: 0.2s, 0s;
- }
- &:nth-of-type(2) {
- transition-duration: 0s;
- transition-delay: 0.2s;
- }
- &:nth-of-type(3) {
- transition-delay: 0.2s, 0s;
- }
- }
- }
-
- // Cross
- #{$mb_module_spin_opened} {
- b {
- &:nth-of-type(1) {
- transform: rotate( 135deg );
- transition-delay:
- calc( var( --mb-cross-timeout ) + 0s ),
- calc( var( --mb-cross-timeout ) + 0.2s );
- }
- &:nth-of-type(2) {
- transition-delay: calc( var( --mb-cross-timeout ) + 0s );
- }
- &:nth-of-type(3) {
- transform: rotate( 225deg );
- transition-delay:
- calc( var( --mb-cross-timeout ) + 0s ),
- calc( var( --mb-cross-timeout ) + 0.2s );
- }
- }
- }
-
-}
\ No newline at end of file
+ // Cross
+ #{$mb_module_spin_cross} {
+ b {
+ &:nth-of-type(1) {
+ transform: rotate(135deg);
+ transition-delay: calc(var(--mb-animate-timeout) + 0s),
+ calc(var(--mb-animate-timeout) + 0.2s);
+ }
+ &:nth-of-type(2) {
+ transition-delay: calc(var(--mb-animate-timeout) + 0s);
+ }
+ &:nth-of-type(3) {
+ transform: rotate(225deg);
+ transition-delay: calc(var(--mb-animate-timeout) + 0s),
+ calc(var(--mb-animate-timeout) + 0.2s);
+ }
+ }
+ }
+}
diff --git a/src/scss/_fx.squeeze.scss b/src/scss/_fx.squeeze.scss
index 4e73200..f6da98f 100644
--- a/src/scss/_fx.squeeze.scss
+++ b/src/scss/_fx.squeeze.scss
@@ -1,37 +1,33 @@
-@if ( $mb_fx_squeeze ) {
+@if ($mb_fx_squeeze) {
+ // Hamburger
+ #{$mb_module_squeeze} {
+ b {
+ &:nth-of-type(1) {
+ transition-delay: 0.1s, 0s;
+ }
+ &:nth-of-type(2) {
+ transition-delay: 0.1s;
+ }
+ &:nth-of-type(3) {
+ transition-delay: 0.1s, 0s;
+ }
+ }
+ }
- // Hamburger
- #{$mb_module_squeeze} {
- b {
- &:nth-of-type(1) {
- transition-delay: 0.1s, 0s;
- }
- &:nth-of-type(2) {
- transition-delay: 0.1s;
- }
- &:nth-of-type(3) {
- transition-delay: 0.1s, 0s;
- }
- }
- }
-
- // Cross
- #{$mb_module_squeeze_opened} {
- b {
- &:nth-of-type(1) {
- transition-delay:
- calc( var( --mb-cross-timeout ) + 0s ),
- calc( var( --mb-cross-timeout ) + 0.1s );
- }
- &:nth-of-type(2) {
- transition-delay: calc( var( --mb-cross-timeout ) + 0s );
- }
- &:nth-of-type(3) {
- transition-delay:
- calc( var( --mb-cross-timeout ) + 0s ),
- calc( var( --mb-cross-timeout ) + 0.1s );
- }
- }
- }
-
-}
\ No newline at end of file
+ // Cross
+ #{$mb_module_squeeze_cross} {
+ b {
+ &:nth-of-type(1) {
+ transition-delay: calc(var(--mb-animate-timeout) + 0s),
+ calc(var(--mb-animate-timeout) + 0.1s);
+ }
+ &:nth-of-type(2) {
+ transition-delay: calc(var(--mb-animate-timeout) + 0s);
+ }
+ &:nth-of-type(3) {
+ transition-delay: calc(var(--mb-animate-timeout) + 0s),
+ calc(var(--mb-animate-timeout) + 0.1s);
+ }
+ }
+ }
+}
diff --git a/src/scss/_fx.tornado.scss b/src/scss/_fx.tornado.scss
index 50d900e..1d00f81 100644
--- a/src/scss/_fx.tornado.scss
+++ b/src/scss/_fx.tornado.scss
@@ -1,42 +1,39 @@
-@if ( $mb_fx_tornado ) {
+@if ($mb_fx_tornado) {
+ // Hamburger
+ #{$mb_module_tornado} {
+ b {
+ &:nth-of-type(1) {
+ transition: bottom 0.2s ease, transform 0.2s ease;
+ transition-delay: 0.2s;
+ }
+ &:nth-of-type(2) {
+ transition: opacity 0s ease, transform 0.2s ease;
+ transition-delay: 0.1s, 0.1s;
+ }
+ &:nth-of-type(3) {
+ transition: top 0.2s ease, transform 0.2s ease;
+ transition-delay: 0s;
+ }
+ }
+ }
- // Hamburger
- #{$mb_module_tornado} {
- b {
- &:nth-of-type(1) {
- transition: bottom 0.2s ease, transform 0.2s ease;
- transition-delay: 0.2s;
- }
- &:nth-of-type(2) {
- transition: opacity 0s ease, transform 0.2s ease;
- transition-delay: 0.1s, 0.1s;
- }
- &:nth-of-type(3) {
- transition: top 0.2s ease, transform 0.2s ease;
- transition-delay: 0s;
- }
- }
- }
-
- // Cross
- #{$mb_module_tornado_opened} {
- b {
- &:nth-of-type(1) {
- transform: rotate( -135deg );
- transition-delay: calc( var( --mb-cross-timeout ) + 0s );
- }
- &:nth-of-type(2) {
- opacity: 0;
- transform: rotate( -135deg );
- transition-delay:
- calc( var( --mb-cross-timeout ) + 0.4s ),
- calc( var( --mb-cross-timeout ) + 0.1s );
- }
- &:nth-of-type(3) {
- transform: rotate( -225deg );
- transition-delay: calc( var( --mb-cross-timeout ) + 0.2s );
- }
- }
- }
-
-}
\ No newline at end of file
+ // Cross
+ #{$mb_module_tornado_cross} {
+ b {
+ &:nth-of-type(1) {
+ transform: rotate(-135deg);
+ transition-delay: calc(var(--mb-animate-timeout) + 0s);
+ }
+ &:nth-of-type(2) {
+ opacity: 0;
+ transform: rotate(-135deg);
+ transition-delay: calc(var(--mb-animate-timeout) + 0.4s),
+ calc(var(--mb-animate-timeout) + 0.1s);
+ }
+ &:nth-of-type(3) {
+ transform: rotate(-225deg);
+ transition-delay: calc(var(--mb-animate-timeout) + 0.2s);
+ }
+ }
+ }
+}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 9edc3bc..23e2b60 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,6 +1,8 @@
/** Selector for the button. */
$mb_module: '.mburger' !default;
+$__opened: '.mm-wrapper_opened';
+
/** Selector for the button with the "collapse" effect. */
$mb_module_collapse: '#{$mb_module}--collapse' !default;
@@ -13,26 +15,23 @@ $mb_module_squeeze: '#{$mb_module}--squeeze' !default;
/** Selector for the button with the "tornado" effect. */
$mb_module_tornado: '#{$mb_module}--tornado' !default;
-/** Selector for the wrapper when the menu is opened. */
-$mb__opened: '.mm-wrapper_opened' !default;
-
/** Selector for the button when the menu is opened. */
-$mb_module_opened: '#{$mb__opened} #{$mb_module}' !default;
+$mb_module_cross: '#{$__opened} #{$mb_module}' !default;
/** Selector for the button with the "collapse" effect when the menu is opened. */
-$mb_module_collapse_opened: '#{$mb__opened} #{$mb_module_collapse}' !default;
+$mb_module_collapse_cross: '#{$__opened} #{$mb_module_collapse}' !default;
/** Selector for the button with the "spin" effect when the menu is opened. */
-$mb_module_spin_opened: '#{$mb__opened} #{$mb_module_spin}' !default;
+$mb_module_spin_cross: '#{$__opened} #{$mb_module_spin}' !default;
/** Selector for the button with the "squeeze" effect when the menu is opened. */
-$mb_module_squeeze_opened: '#{$mb__opened} #{$mb_module_squeeze}' !default;
+$mb_module_squeeze_cross: '#{$__opened} #{$mb_module_squeeze}' !default;
/** Selector for the button with the "tornado" effect when the menu is opened. */
-$mb_module_tornado_opened: '#{$mb__opened} #{$mb_module_tornado}' !default;
+$mb_module_tornado_cross: '#{$__opened} #{$mb_module_tornado}' !default;
-/** Timeout before starting the "cross" animation, ensures the animation starts after the menu is fully opened. */
-$mb_cross_timeout: 0.4s !default;
+/** Timeout before starting the animation, ensures the animation starts after the menu is fully opened. */
+$mb_animate_timeout: 0.4s !default;
/** Whether or not to include the CSS for the "collapse" animation. */
$mb_fx_collapse: true !default;
diff --git a/src/scss/mburger.scss b/src/scss/mburger.scss
index 8af9fd6..fcf7ac3 100644
--- a/src/scss/mburger.scss
+++ b/src/scss/mburger.scss
@@ -1,5 +1,5 @@
-/*
- * mburger CSS v1.3.0
+/*!
+ * mburger CSS v1.3.1
* mmenujs.com/mburger
*
* Copyright (c) Fred Heusschen
diff --git a/src/scss/webcomponent.scss b/src/scss/webcomponent.scss
index f858427..0a80680 100644
--- a/src/scss/webcomponent.scss
+++ b/src/scss/webcomponent.scss
@@ -6,13 +6,13 @@ $mb_module_squeeze: ':host( [fx="squeeze"] )';
$mb_module_tornado: ':host( [fx="tornado"] )';
// Selector for the button when the menu is opened.
-$mb_module_opened: ':host( [state="cross"] )';
-$mb_module_collapse_opened: ':host( [state="cross"][fx="collapse"] )';
-$mb_module_spin_opened: ':host( [state="cross"][fx="spin"] )';
-$mb_module_squeeze_opened: ':host( [state="cross"][fx="squeeze"] )';
-$mb_module_tornado_opened: ':host( [state="cross"][fx="tornado"] )';
+$mb_module_cross: ':host( [state="cross"] )';
+$mb_module_collapse_cross: ':host( [state="cross"][fx="collapse"] )';
+$mb_module_spin_cross: ':host( [state="cross"][fx="spin"] )';
+$mb_module_squeeze_cross: ':host( [state="cross"][fx="squeeze"] )';
+$mb_module_tornado_cross: ':host( [state="cross"][fx="tornado"] )';
-$mb_cross_timeout: 0s;
+$mb_animate_timeout: 0s;
@import 'variables';
@import 'base';
diff --git a/src/ts/mburger.ts b/src/ts/mburger.ts
index d6ebdea..f46bcb4 100644
--- a/src/ts/mburger.ts
+++ b/src/ts/mburger.ts
@@ -1,5 +1,5 @@
/*
- * mburger webcomponent CSS v1.3.0
+ * mburger webcomponent v1.3.1
* mmenujs.com/mburger
*
* Copyright (c) Fred Heusschen
@@ -15,22 +15,26 @@ mBurger.innerHTML = `
- `;
+ `;
customElements.define(
'm-burger',
class extends HTMLElement {
- menu: HTMLElement;
+ /** The menu node. */
+ menuNode: HTMLElement = null;
+
+ /** API for the menu. */
+ menuApi: {
+ bind: Function;
+ open: Function;
+ } = null;
constructor() {
super();
- var content = mBurger.content.cloneNode(true);
-
// Attach shadow DOM
+ var content = mBurger.content.cloneNode(true);
this.attachShadow({ mode: 'open' }).appendChild(content);
-
- this.menu = null;
}
static get observedAttributes() {
@@ -39,31 +43,41 @@ customElements.define(
attributeChangedCallback(name, oldValue, newValue) {
if (name == 'menu') {
- this.menu = newValue ? document.getElementById(newValue) : null;
+ // Set the new menu node and API.
+ this.setMenu(newValue);
- if (this.menu) {
- let API = this.menu['mmenu'];
- if (API) {
- API.bind('open:after', () => {
- this.setAttribute('state', 'cross');
- });
- API.bind('close:after', () => {
- this.removeAttribute('state');
- });
- }
+ // Change the hamburger state when opening and closing the menu.
+ if (this.menuApi) {
+ this.menuApi.bind('open:after', () => {
+ this.setAttribute('state', 'cross');
+ });
+ this.menuApi.bind('close:after', () => {
+ this.removeAttribute('state');
+ });
}
}
}
connectedCallback() {
+ // Open the menu when clicking the hamburger.
this.addEventListener('click', evnt => {
- if (this.menu && this.menu.classList.contains('mm-menu')) {
- let API = this.menu['mmenu'];
- if (API && API.open) {
- API.open();
- }
+ if (this.menuApi && this.menuApi.open) {
+ this.menuApi.open();
}
});
}
+
+ /**
+ * Set the menu node and API.
+ * @param {string} id The ID-attribute for the menu node.
+ */
+ setMenu(id: string) {
+ this.menuNode = id ? document.getElementById(id) : null;
+ this.menuApi = null;
+ if (this.menuNode) {
+ this.menuApi =
+ this.menuNode['mmApi'] || this.menuNode['mmenu'] || null;
+ }
+ }
}
);