ハンバーガーアイコンの実装

こんなことを説明しています！

  1. ハンバーガーアイコンの作り方
  2. [ flex-flow + justify-content ]プロパティで縦中央揃え
  3. ユーザー目線のちょっとした気遣い

解説動画

コードの解説

HTMLの記述

<header class="header">
    <div class="logo"><a>ロゴ</a></div>
    <div class="drawer-icon">
        <span class="bar bar1"></span>
        <span class="bar bar2"></span>
        <span class="bar bar3"></span>
    </div>
</header>

手順

▶︎ ３本の棒を<span> を使って作る。

▶︎ 共通のクラス bar と 特有のクラス bar1 ~ bar3 をつけておく 

CSSの記述

.header {
    width: 100%;
    height: 90px;
    background: #f5e9e9;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-icon {
    padding: 20px 30px;
    width: 100px;
    height: 70px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    .bar {
        display: block;
        width: 100%;
        height: 2px;
        background: #000;
        transition: all  0.3s ease;
    }
    &:hover {
        cursor: pointer;
    }
}
.drawer-icon.js-open {
    .bar1 {
        transform: translateY(14px) rotate(30deg);
    }
    .bar2 {
        display: none;
    }
    .bar3 {
        transform: translateY(-14px) rotate(-30deg);
    }
}

手順

▶︎ drawer-icon の箱を作る

▶︎ ユーザーが押しやすいように padding で余白を上下左右につけ、アイコンより少し外側を押したときにも反応するようにしておく

▶︎ [ flex-flow : column ] でフレックスコンテナの向きを縦にし、[ justify-content : space-between ] プロパティで両端均等揃えにすることで、３本の棒が縦に均等に配置される

▶︎ js-open クラスがついたときのアイコンの位置を調整

▶︎ transform プロパティの使い方に注意！ ( こちらの記事 を参考 )

jQueryの記述

$('.drawer-icon').on('click', function () {
    $(this).toggleClass('js-open');
    return false;
});

手順

▶︎ drawer-icon を押したら js-open クラスのつけ外しを行う

解説で使用したスニペット

scss.json
"hover": {
    "prefix": "hover",
    "body": [
        "&:hover {",
        "    $1",
        "}",
    ],
    "description": "hoverアクションの際に使用できる"
},
javascript.json
"click": {
    "prefix": "click",
    "body": [
        "\\$('$1').on('click', function () {",
        "    $2",
        "    return false;",
        "});",
    ],
    "description": "クリックイベント"
},

"class": {
    "prefix": "class",
    "body": [
        "\\$('$1').$2Class('$3');",
    ],
    "description": "クラスの付け外し"
},
ブログに戻る

コメントを残す