よく見るハンバーガーメニューを作ってみよう

こんばんは！「今日はこれって簡単に作れるの？いや、作ってみないとわからないよ。じゃあ作ってみようよ！！」シリーズ第一弾！！
ハンバーガーメニューに挑戦してみました！

ハンバーガーメニューって？

最近のホームページやアプリで、見かけない数の方が少ないんじゃないか？というくらい当たり前になったハンバーガーメニュー。
あのAppleのサイトでさえ採用したハンバーガーメニュー。
見ると押したくて押したくて仕方ない誘惑をしてくるハンバーガーメニュー。

burger_img

↑こんなヤツね。

一般的にはナビゲーションに用いられていて、スマホとかタブレットでのナビに採用が多いのかな？
もちろん、PC用のWebサイトでも採用されているパターンもあります。

何せコイツは省スペース。

スマホみたいな画面が狭い所にPC並のナビを横並びに入れても見にくい、醜い。場所も取るからファーストビューの1/5くらいは無くなってしまって伝えたいことを十分に伝えられないなんてことも…

そんな悩みを解消？したのがこのハンバーガー野郎なんですねぇ。
シレッと端っこの方にいるだけで、今やボタンと認識してくれるし、コンテンツを別場所に格納できるので、狭い画面では非常に便利！！

面白いアニメーションをするものから、一風変わったデザインのものまで、プラグインとかも沢山あって、グーグル先生に聞けばいくらでも出てきますが、

シンプルなのでいーのだ！
そして無駄なプラグインの導入は避けたいのだ！

というボクの信念があるので、今回は作ってみました。

ハンバーガーメニューを作ろう！

前置きが長くなりましたが、サクッと作って見ましょう。

まずはHTML！

<header>
    <div class="burger">
        <div class="normal"></div>
        <div class="normal"></div>
        <div class="normal"></div>
    </div>
</header>

<ul class="nav">
    <li class="nav-list"><a href="#">Sample 1</a></li>
    <li class="nav-list"><a href="#">Sample 2</a></li>
    <li class="nav-list"><a href="#">Sample 3</a></li>
    <li class="nav-list"><a href="#">Sample 4</a></li>
</ul>

至ってシンプルですね。実際バーガー部分だけだとnavは無視で大丈夫です。

次はCSS！とゆーかSass！！

//RESET
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

a{
    color: inherit;
    text-decoration: none;
}

//STYLE
body{
    font-family: sans-serif;
}

header{
    width: 100%;
    max-width: 960px;
    margin: 50px auto 0;

    .burger{
        width:30px;
        height:21px;
        cursor:pointer;
        position:relative;
        z-index: 1;

        & > div{ // .normal
            width:100%;
            height:3px;
            background-color:gray;
            border-radius: 6px;
            position:absolute;
        }
    }
}

.normal{
    &:first-child{
        top:0;
        left:0;
        transition:0.2s;
    }

    &:nth-child(2){
        top:9px;
        left:0;
    }

    &:last-child{
        top:18px;
        left:0;
        transition:0.2s;
    }
}

.burger:hover{
    .normal{
        &:first-child{
            top:-3px;
        }

        &:last-child{
            top:21px;
        }
    }
}

.topline{
    animation:top 0.5s;
    transform:rotate(45deg);
    top:10px;
}
.bottomline{
    animation:bottom 0.5s;
    transform:rotate(-45deg);
    top:10px;
}

@keyframes top{
    0%{transform:rotate(0deg)}
    0%{top:0}
    100%{transform:rotate(45deg)}
    100%{top:10px}
}
@keyframes bottom{
    0%{transform:rotate(0deg)}
    0%{top:21px}
    100%{transform:rotate(-45deg)}
    100%{top:10px}
}

.nav{
    width: 100%;
    background-color: black;
    color: white;
    display: none;
    opacity: 0.7;
    position: fixed;
    top: 0;
    left: 0;

    &-list{
        text-align: center;
        margin-top: 40px;

        &:first-child{
            margin-top: 100px;
        }
    }
}

プレフィックスに関してはボクはGulpを使っているので自動で付けてくれる仕組みを取っています。
最後にjQuery！！！

// navigation style
var windowH = $(window).height();
$(".nav").height(windowH);

// burger menu
var open = false;

$(".burger").click(function(){
    var $lines = $(this).children("div");
    var check = $lines.hasClass("normal");

    if(check){
        $lines.removeClass("normal");
        $lines.first().addClass("topline");
        $lines.eq(1).css("display","none");
        $lines.last().addClass("bottomline");
    }
    else{
        $lines.removeClass().addClass("normal");
        $lines.eq(1).stop().fadeIn();
    }

    if(!open){
        $(".nav").stop().fadeIn();
        open = true;
    }
    else{
        $(".nav").stop().fadeOut();
        open = false;
    }
});

こちらもnavを無視するなら9-21行目のみで大丈夫です。

で、出来上がったのがこちら↓

DEMO

今回の問題点は、CSS3のAnimationを利用しているのでIE10+でしか対応が出来ていないということ。
これじゃあ現実的ではないよね…まぁ、また改良して第二弾をいつかやってみましょう！

ありがとうございました！

ハンバーガーメニューって？

ハンバーガーメニューを作ろう！

CATEGORIES