Help us understand the problem. What is going on with this article?

ハンバーガーメニュー

はじめに

サイトのレスポンシブに伴ってハンバーガーメニューを実装してみました。

コード

$(function(){
    $(".btn-gnavi").on("click", function(){
        var rightVal = 0;
        if($(this).hasClass("open")) {
            rightVal = -300;
            $(this).removeClass("open");
        } else {
            $(this).addClass("open");
        }

        $("#global-navi").stop().animate({
            right: rightVal
        }, 200);
    });
});

JavaScript

.btn-gnavi {
    position: fixed;
    top: 3vw;
    right: 4vw;
    width: 30px;
    height: 24px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

.btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 4px;
    background: black;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

.btn-gnavi span:nth-child(1) {
    top: 0;
    margin-left: 5px;
}

.btn-gnavi span:nth-child(2) {
    top: 10px;
    margin-left: 5px;
}

.btn-gnavi span:nth-child(3) {
    top: 20px;
    margin-left: 5px;
}
.btn-gnavi span:nth-child(4) {
    display: inline-block;
    top: 20px;
    position: absolute;
    width: 0;
    height: 0;
    transition: all 400ms;
    white-space: nowrap;
    color: #ad9258;
}
.btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
.btn-gnavi.open span:nth-child(4) {
    display: none;
}
.btn-gnavi.open span {
    background: #fff;
}
.btn-gnavi.open span:nth-child(1) {
    width: 24px;
    -webkit-transform: translate(-7px,17px) rotate(45deg);
    transform: translate(-7px,17px) rotate(45deg)
}

.btn-gnavi.open span:nth-child(3) {
    width: 24px;
    -webkit-transform: translate(-7px,-17px) rotate(-45deg);
    transform: translate(-7px,-17px) rotate(-45deg)
}

css

まとめ

ハンバーガーメニューを実装することで、スマホ画面のように
小さい画面でも見せたいメニューの表示場所を十分に確保できることがわかりました。
また、三本線だけだとわかりずらいので、三本線の下に『menu』と表示させ、メニューが収納されていることがユーザーに伝わるように工夫してみました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away