burger actions

by Yunus Gaziev

HTML

<button id="burger" class="burger burger--htx">
    <span>
        toggle menu
    </span>
</button>

CSS

.burger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 96px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
}

.burger:focus {
  outline: none;
}

.burger span {
  display: block;
  position: absolute;
  top: 44px;
  left: 18px;
  right: 18px;
  height: 8px;
  background: white;
}

.burger span::before,
.burger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #fff;
  content: "";
}

.burger span::before {
  top: -20px;
}

.burger span::after {
  bottom: -20px;
}

.burger--htx {
  background-color: #ff3264;
}

.burger--htx span {
  -webkit-transition: background 0s 0.3s;
          transition: background 0s 0.3s;
}

.burger--htx span::before,
.burger--htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
          transition-delay: 0.3s, 0s;
}

.burger--htx span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}

.burger--htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.burger--htx.is-active {
  background-color: #cb0032;
}

.burger--htx.is-active span {
  background: none;
}

.burger--htx.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.burger--htx.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.burger--htx.is-active span::before,
.burger--htx.is-active...

JavaScript

!function(e,n){"use strict";function o(n){return n&&"undefined"!=typeof e&&(n===e||n.nodeType)}function s(e){if(arguments.length<=0)throw new Error("Missing arguments in extend function");var n,t,i=e||{};for(t=1;t<arguments.length;t++){var r=arguments[t]||{};for(n in r)"object"!=typeof i[n]||o(i[n])?i[n]=i[n]||r[n]:i[n]=s(i[n],r[n])}return i}function t(e,n){n=s(n,t.options);var o=this;this.elem=e,this.initialised=!1,this.opened=!1,this.classes=n.classes,this.onClose=n.onClose,this.onOpen=n.onOpen,this.elem.addEventListener("click",function(){var e=o.elem.classList,n=o.classes;e.contains(n.opened)?(e.remove(n.opened),e.add(n.closed),o.onClose&&o.onClose.call(o)):(e.remove(n.closed),e.add(n.opened),o.onOpen&&o.onOpen.call(o))},!1)}t.prototype={constructor:t,init:function(){this.initialised=!0,this.opened=!0},destroy:function(e){this.initialised=!1,this.opened=!1}},t.options={classes:{opened:"hamburger--opened",closed:"hamburger--closed"}},e.Hamburger=t}(window,document);


	// подключение бургера
	var hamburger  = new Hamburger(document.getElementById('burger'), {
        classes : {
          opened : 'is-active',
          closed : 'no-active'
        },
        onOpen : function() {
            // какие то действия при открытии
            console.info('opened');
        },
        onClose : function() {
            // какие то действия при закрытии
            console.info('closed');
        },
    });
    // инициализация
    hamburger.init();