ハンバーガメニューをつくってみた

ハンバーガーメニュー

簡易的なハンバーガーメニューです。
コピペしたら使えます。

デザインは好きなCSS当ててください。

HTML

<div id="hamburger_header" class="hamburger_header">

CSS例

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
  }

  .navToggle {
    display: none;
    /*通常時は非表示にしておきます*/
    position: absolute;
    /*bodyに対しての絶対位置指定です*/
    right: 13px;
    top: 13px;
    width: 30px;
    height: 25px;
    cursor: pointer
  }

  .navToggle div {
    position: relative
  }
  /*spanの絶対位置指定の親にします*/

  .navToggle span {
    display: block;
    position: absolute;
    /*#navToggle div に対して*/
    width: 100%;
    border-bottom: solid 3px #999;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out
  }

  .navToggle span:nth-child(1) {
    top: 0
  }

  .navToggle span:nth-child(2) {
    top: 11px
  }

  .navToggle span:nth-child(3) {
    top: 22px
  }

  .hamburger_header {
    position: fixed;
    top: 0;
    width: 100%;
  }

  .navTop {
    background-color: #ccc;
    height: 30px;
    margin: 0;
  }

  .nav {
    margin: 0;
    background: #eee;
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
  }

  .nav ul {
    margin: 0;
    list-style: none;
    padding-left: 15px;
  }

  .nav a {
    text-decoration: none;
    color: #000;
  }

  .navClose {
    opacity: 0;
  }

  .navOpen {
    opacity: 1;
  }

  .icon-animation {
    width: 30px;
    height: 30px;
    float: right;
    display: block;
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    margin-right: 15px;
  }

  .icon-animation span {
    width: 30px;
    height: 1px;
    display: block;
    background: #000;
    position: absolute;
    right: 0;
    top: 50%;
    margin-left: -25px;
  }

  .type-1 span {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .type-1 .top {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  .type-1 .bottom {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  .type-1.is-open .middle {
    background: rgba(255, 255, 255, 0);
  }

  .type-1.is-open .top {
    -webkit-transform: rotate(-45deg) translateY(0px);
    -ms-transform: rotate(-45deg) translateY(0px);
    transform: rotate(-45deg) translateY(0px);
  }

  .type-1.is-open .bottom {
    -webkit-transform: rotate(45deg) translateY(0px);
    -ms-transform: rotate(45deg) translateY(0px);
    transform: rotate(45deg) translateY(0px);
  }

  body {
    animation-name: hamburger;
    animation-duration: 10s;
    position: relative;
  }

  .doAnim {
    animation: hamburger 2s forwards;
  }

JS

      var hamburgerMenuList = {
        'はじめに': 'https://***',
        'このサイトについて': 'https://***',
        'メイン': 'https://***',
        'お問い合わせ': 'https://***',
        'さいごに': 'https://***'
      };

      var myUtil = {
        debug: true,
        log: function() {
          if (!this.debug || !(window.console && typeof window.console.log === 'function')) {
            return;
          }
          for (var i = 0, s = arguments.length; i < s; i++) {
            console.log(arguments[i]);
          }
        },
        get: function(selector) {
          return document.querySelector(selector);
        },
        createElm: function(tagName, option) {
          var elm = document.createElement(tagName);
          for (key in option) {
            var value = option[key];
            elm.setAttribute(key, value);
          }
          return elm;
        },
        addEvent: function(elm, eventName, cb) {
          elm.addEventListener(eventName, cb);
        },
        addClass: function(elm, className) {
          return elm.classList.add(className);
        },
        removeClass: function(elm, className) {
          return elm.classList.remove(className);
        },
        toggleClass: function(elm, className) {
          return elm.classList.toggle(className);
        },
        hasClass: function(elm, className) {
          return elm.classList.contains(className);
        }
      };


      (function(hb) {

        /***********関数定義***********/

          //nav生成関数
          function navMake() {
            wrapElm.appendChild(navTopElm);

            var navToggleElm = hb.createElm('div', {
              'class': 'navToggle'
            });
            wrapElm.appendChild(navToggleElm);

            navElm = hb.createElm('nav', {
              'class': 'nav navClose'
            });
            wrapElm.appendChild(navElm);
          }

          //icon生成関数
          function iconMake() {
            //iconWrapElm = elmMake();
            iconWrapElm = hb.createElm('div', {
              'class': 'icon-animation type-1'
            });
            navTopElm.appendChild(iconWrapElm);

            var iconTopElm = hb.createElm('span', {
              'class': 'top'
            });
            iconWrapElm.appendChild(iconTopElm);

            var iconMiddleElm = hb.createElm('span', {
              'class': 'middle'
            });
            iconWrapElm.appendChild(iconMiddleElm);

            var iconBottomElm = hb.createElm('span', {
              'class': 'bottom'
            });
            iconWrapElm.appendChild(iconBottomElm);

            console.log(iconWrapElm);
            return iconWrapElm;

          }

          //list生成関数
          function listMake() {
            var listWrapElm = hb.createElm('ul');
            navElm.appendChild(listWrapElm);

            for (var key in hamburgerMenuList) {
              menuElm = hb.createElm('li');
              listWrapElm.appendChild(menuElm);
              menuLinkElm = hb.createElm('a', {
                'href': hamburgerMenuList[key]
              });

              menuLinkElm.innerHTML = key;
              menuElm.appendChild(menuLinkElm);

              var headerHight = navTopElm.clientHeight;
              var bodyElm = hb.get('body');
              var htmlElm = hb.get('body');
              var styleSheet = document.styleSheets[0];
              var targetRuleIndex = styleSheet.cssRules.length;
            }

          }


          //icon Open OR Close判定関数
          function menuClick(elm) {
            hb.addEvent(elm, 'click', function() {
              hb.toggleClass(navElm, 'navClose');
              hb.toggleClass(navElm, 'navOpen');
              hb.toggleClass(iconWrapElm, 'is-open');
            });
          }


          //指定リンク先への遷移関数
          function linkJump(){
            var href = this.getAttribute('href');
            location.href = href;
          }



        /***********処理実行***********/

          var wrapElm = hb.get('#hamburger_header');
          var iconWrapElm , navElm , menuLinkElm , menuElm;
          var navTopElm = hb.createElm('div', {
            'class': 'navTop clearfix'
          });


          iconMake();
          navMake();
          listMake();
          menuClick(iconWrapElm);

          //イベント
          hb.addEvent(menuLinkElm, 'click', linkJump);
          menuClick(menuElm);
      }(myUtil));