MD-Blog_Web Creative

こんな動画を見ていたらふと思いついたもので、「くだらないは正義」という信念のもと、標題のとおり実践してみました。

なお、本来私のような <small>「Web作ってます」</small> とかいう立場だと、巷でほんのり騒がれている、"ハンバーガーメニューってUIとして結局どうなの？"みたいなことを語ったりしなければならないのかもしれませんが、もちろんそんな高尚なことはしませんのである意味ご安心ください。

ハンバーガーメニューとは、スマートフォンやタブレットサイトでよく見かける、三本線アイコン（時に二本、それ以上も）のナビゲーション。大抵の場合、クリックするとそのサイトのグローバルメニューが開く。 名前の由来は「ハンバーガーに見えるから（上からパン・肉・パン） 」！

ハンバーガーを作る

まずは、ハンバーガーがなければ始まりません。

ということで材料です。
ハンバーガーメニューは三本線が主流ですが、実際それでは文字通り味気ないので他の具も挟みますよ。

1. パン（バンズ）
   所謂ハンバーガー用があればそれを。今回は奇跡的に、形がちょうどそれっぽいセブンイレブンの『ふわふわバジル＆チーズのパン』を発見
2. レタス
   予算に余裕があればフリルレタスを使いたいところだが贅沢は敵
3. トマト
   真ん中部分を横にスライス。...したところ上下部分が中途半端に余ったがお店では一体どうしているのだろうか？
4. 玉ねぎ
   焼いたらバラバラになるがここはやはり焼きたい
5. 肉（パティ）
   イチから作れる気もしないので、スーパーの精肉売り場であとは焼くだけのものを購入。お好みでチーズをon ※返しに失敗したため裏側から撮影
6. マヨネーズ
7. ケチャップ

ブログ用に材料ひとつひとつを上から撮った後、ハンバーガーメニュー用に横からも撮影します（必死）。
これだけで1時間以上かかりましたが、8割方終わったも同然。
早くも達成感がこみ上げてきました。

そして"ハンバーガー"メニューを作る

さて、ここからが本題です。
画像の切り抜きやレタッチ等は事前に済ませておきます。

• 具でDOMを分けたり...

<div class="hamburgerMenu data-menu1" id="data-menu2">
  <div class="buns-up item"></div>
  <div class="mayo item"></div>
  <div class="greenLeaf item"></div>
  <div class="tomato item"></div>
  <div class="onion item"></div>
  <div class="ketchup item"></div>
  <div class="patty item"></div>
  <div class="buns-down item"></div>
</div>

• 具をScssのfor文でまわしたり...

$itemH: 40px 13px 33px 17px 14px 17px 23px 30px;
$itemsLength: length($itemH);
.hamburgerMenu {
  > .item {
    @for $num from 1 through $itemsLength {
      &:nth-child(#{$num}) {
        z-index: -($num)+$itemsLength+1;
        -webkit-transition-delay: $num*0.02s;
                transition-delay: $num*0.02s;
      }
    }
  }
}

• jQueryでランダムに王道のハンバーガーメニューも出すようにしてみたり...

_icon1 = Math.round(Math.random()*1)+1;
$('#data-menu' + _icon1).css({
  display: 'block'
});

などなど、
ゴニョゴニョした結果のDEMOはこちらです。

» DEMO：ハンバーガーメニューをハンバーガーで作ってみた

"ハンバーガーメニューはクリック率が悪い"なんて検証結果もあるようですが、リアルハンバーガーだとやっぱり何だかよくわからないですね。UIとして完全に破綻！
逆に「このハンバーガーは一体何？」ということでクリックされるのを期待といったところでしょうか。

まとめ

最初の宣言通り、ハンバーガーメニューに対する考察等も特にありませんが、これぞチャレンジ＝MONSTER DIVEメンバーとしての心得のひとつに添った内容であることを願うばかりです。

ま、こういうのは勢いが大事ですよね！
以上です！

※このあとスタッフが美味しくいただきました。←結局はこれが言いたかっただけ