ハンバーガーメニュー「三」が「×」にトランスフォームするアレ

2019/12/10

何故、日本のpodcastのIT系ジャンルのモノには、おっさんが淡々とつぶやいていたり、聴いている側を無視したテンションでのいわゆるオタク受けするモノしかないんだろう？？？となんとなく不満を感じている、ユゲタです。 ITに強い人はどうしても見た目もコミュニケーションも弱い人が多いのも事実で、そうした人達の集まる飲み会に参加すると、どの言語を使っているかという探り合いから、自分がどれだけすごい経験をしたか（どれだけコアな技術を扱ったか）というマウントの取り合いが、非常に嫌で、数人いる中でマウントを取れた人のドヤ顔が非常に見るに耐えられない感覚なんです。悪口ばかり言ってすみません・・・一つ言えるのは同年代かどうかというのもあり、おそらく別年代から見た下駄は、同じ様に見られているんでしょうね・・・スマホが市民権を得て、政府もスマホアプリで災害情報サイトなどを構築してそれに対する助成金などをばらまいているのですが、そんなスマートフォンにハンバーガーメニューを付ける事に抵抗がかなり無くなってきました。今回は、そんなハンバーガーメニューのデモを作ったので、ソースコードとサンプル（デモ）を掲載しておきます。

ハンバーガーメニュー

今やwikipediaにも掲載されているハンバーガーメニューボタンですが、スマートフォンが出てきてから作られたと思っていたら、かなり昔からインターフェイスアイコンとして存在していたんですね。（知らんかった・・・） https://ja.wikipedia.org/wiki/ハンバーガーボタン正確には「折りたたみボタン」というんですが、３つの線をハンバーガーというところなどはアメリカンな感じがして、当時非常におもろかったのを覚えています。スマホ登場初期の頃に、ヘッダメニューにこれを設置したら、「このボタンの意味がわからない」と外すように支持された事もよく覚えています。確かに一目見て、内容を理解させられるアイコンってすごいインターフェイスの一因を担っているということがその時に理解できたんですが、一度市民権を得られると、色々なバージョンも発生してきて、いまでは、ハンバーガーメニューをクリックすると、メニューが表示されて、そのメニューのバツボタンに変形するというケースが非常に多く増えているように感じます。とある会社のホームページを作る時に、その仕様を求められて作ってみたので、転記も簡単に作ったので、ソースコードを掲載しておきますね。

ソース

<div class="content-header">
  <div class="humbarger-menu">
    <span class="bar1"></span>
    <span class="bar2"></span>
    <span class="bar3"></span>
  </div>
</div>

.humbarger-menu {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  cursor: pointer;
}
.humbarger-menu .bar1 {
  transform-origin: 0 2px;
  transform: translateY(-10px);
}
.humbarger-menu span {
  position: absolute;
  top: calc(50% - 2px);
  display: block;
  width: 80%;
  height: 3px;
  background-color: #666;
  margin-left: 10%;
}
.humbarger-menu .bar2 {
  transform: translateY(0px);
}
.humbarger-menu .bar3 {
  transform-origin: 0 2px;
  transform: translateY(10px);
}

.content-header[data-status="open"] .humbarger-menu .bar1{
  animation: anim-humbarger-menu-open-1 0.1s linear forwards;
}
@keyframes anim-humbarger-menu-open-1{
  0%{
    transform:translateY(-10px) translateX(0px) rotate(0deg);
  }
  100%{
    transform:translateY(-11px) translateX(4px) rotate(45deg);
  }
}

.content-header[data-status="open"] .humbarger-menu .bar3{
  animation: anim-humbarger-menu-open-3 0.1s linear forwards;
}
@keyframes anim-humbarger-menu-open-3{
  0%{
    transform:translateY(10px) translateX(0px) rotate(0deg);
  }
  100%{
    transform:translateY(11px) translateX(4px) rotate(-45deg);
  }
}

.content-header[data-status="open"] .humbarger-menu .bar2{
  animation: anim-humbarger-menu-open-2 0.1s linear forwards;
}
@keyframes anim-humbarger-menu-open-2{
  0%{
    opacity : 1.0;
  }
  100%{
    opacity : 0.0;
  }
}
.content-header[data-status="close"] .humbarger-menu .bar1{
  animation: anim-humbarger-menu-close-1 0.1s linear forwards;
}
@keyframes anim-humbarger-menu-close-1{
  0%{
    transform:translateY(-11px) translateX(4px) rotate(45deg);
  }
  100%{
    transform:translateY(-10px) translateX(0px) rotate(0deg);
  }
}

.content-header[data-status="close"] .humbarger-menu .bar3{
  animation: anim-humbarger-menu-close-3 0.1s linear forwards;
}
@keyframes anim-humbarger-menu-close-3{
  0%{
    transform:translateY(11px) translateX(4px) rotate(-45deg);
  }
  100%{
    transform:translateY(10px) translateX(0px) rotate(0deg);
  }
}

.content-header[data-status="close"] .humbarger-menu .bar2{
  animation: anim-humbarger-menu-close-2 0.1s linear forwards;
}
@keyframes anim-humbarger-menu-close-2{
  0%{
    opacity : 0.0;
  }
  100%{
    opacity : 1.0;
  }
}

;(function(){

  var LIB = function(){};


  LIB.prototype.event = function(target, mode, func , flg){
    flg = (flg) ? flg : false;
		if (target.addEventListener){target.addEventListener(mode, func, flg)}
		else{target.attachEvent('on' + mode, function(){func.call(target , window.event)})}
  };
  LIB.prototype.construct = function(){
    var lib = new LIB();
    switch(document.readyState){
      case "complete"    : new MAIN;break;
      case "interactive" : lib.event(window , "DOMContentLoaded" , function(){new MAIN});break;
      default            : lib.event(window , "load" , function(){new MAIN});break;
    }
  };


  var MAIN = function(){
    this.humbarger();
  };

  MAIN.prototype.humbarger = function(){
    var lib = new LIB();
    var humbarger_menu = document.querySelector(".humbarger-menu");
    if(humbarger_menu){
      lib.event(humbarger_menu , "click" , (function(e){
        var target = document.querySelector(".content-header");
        if(!target){return;}
        if(target.getAttribute("data-status") === "open"){
          target.setAttribute("data-status" , "close");
        }
        else{
          target.setAttribute("data-status" , "open");
        }
      }).bind(this));
    }
  };
  MAIN.prototype.flg_currentPage = function(){
    var urlinfo = new LIB().urlinfo();
    urlinfo.file = (urlinfo.file) ? urlinfo.file : "./";
    var menus = document.querySelectorAll(".menu-area ul.menu li");
    for(var i=0; i<menus.length; i++){
      var a = menus[i].querySelector("a");
      if(urlinfo.file == a.getAttribute("href")){
        menus[i].setAttribute("data-current" , "1");
      }
      else{
        menus[i].setAttribute("data-current" , "0");
      }
    }
  };


  new LIB().construct();
})();

デモ

See the Pen Humbarger menu by YugetaKoji (@geta1972) on CodePen.

あとがき

残念ながら、cssだけで完結しなかったので、jsを使ったバージョンなのですが、サイトの配置したい箇所に、HTMLを突っ込んで貰えれば動作すると思います。ただ、メニューリストの表示や、閉じる処理、カラーバランスなどは、自己責任にて、ご使用ください。こういう話を飲み会でしても、盛り上がるか盛り上がらないかはあなた次第・・・

ハンバーガーメニュー「三」が「×」にトランスフォームするアレ