ハンバーガーメニューをおしゃれに作ってみました

スマホでは、ヘッダーメニューやサイドバーメニューをずっと表示していると、表示領域が少なくなってしまうため、ハンバーガーメニューでメニューを開閉できるようになっています。

こんなので、スマホでは右上に表示されているやつですね。

これをおしゃれな感じで実装したいと思います

spanタブで３本選を作る

バーガーメニューを実装する際に、アイコンを使うこともよくあると思いますが、アニメーションを設定するとアイコン全体で動きしかつけれないので、今回は、１本１本それぞれcssを適用するために別々にします。

    <button class="hamburger" onclick="document.querySelector('body').classList.toggle('menu-open');">
        <span></span>
        <span></span>
        <span></span>
    </button>

javascriptで、クリックされ時に、適用されるクラスを変更する準備だけしておきます。

.hamburger {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.hamburger > span {
    /* 黒線にする */
    background-color: black;
    /* 横幅 */
    width: 36px;
    /* 高さ */
    height: 2.5px;
    /* ブロックに変更 */
    display: block;
    /* 下のあいだ調整 */
    margin-bottom: 8px;
}

とりあえず、バーガーメニューが出来上がりました！何にも動きませんが（笑）

いちばん下の線に、下がないけど、margin-bottomが適用されているので、３本目だけ０に変更します。

.hamburger span:nth-child(3) {
    /* いちばん下なのでゼロに変更 */
    margin-bottom: 0px;
}

クリックしたらBody部のバックグラウンドカラーを変更する

メニューが開くと、バックグラウンドカラーを変更することで分かりやすくします。

onclick=”document.querySelector(‘body’).classList.toggle(‘menu-open’);”をHTMLに記載しているので、クリックした時に、クラスがmenu-openに変更されます。なので、menu-openにバックグラウンドカラーを黒に変更してみます。

.menu-open {
    background-color: #000000;
}

こうすると、ハンバーガーメニューをクリックすると背景が真っ黒になります。真っ黒だとバーガーメニューもどにいったか分からなくなるので、spanは白に変更します。

.menu-open .hamburger span{
    background-color: white;
}

クリックすると、白と黒が反転するようになりました。

アニメーションをつける

今のままだと、瞬時に白と黒が反転するだけなので、オシャレさはありません。まずは一番上のバーからアニメーションをつけたいと思います。

クルっと回るようにしてオシャレさをだしたいと思います。

.hamburger > span {
    /* 黒線にする */
    background-color: black;
    /* 横幅 */
    width: 36px;
    /* 高さ */
    height: 2.5px;
    /* ブロックに変更 */
    display: block;
    /* 下のあいだ調整 */
    margin-bottom: 8px;
    /* アニメーション完了までの時間 */
    transition: transform 1s;
}

.hamburger span:nth-child(3) {
    /* いちばん下なのでゼロに変更 */
    margin-bottom: 0px;
}
/* メニューオープンで黒に変更 */
.menu-open {
    background-color: #000000;
}
/* メニューオープンでspanを黒に変更 */
.menu-open .hamburger span {
    background-color: white;
}

/* いちばん上のバー */
.menu-open .hamburger span:nth-child(1) {
    /* 開始までの時間 */
    transition-delay: 0.2s;
    /* 下に10px移動　反時計回り315度回る */
    transform: translateY(10px) rotate(-315deg);
}

いい感じに回って×の一本が出来上がりました！

同じ要領で、下のバーも動きをつけようと思います。

/* いちばん下のバー */
.menu-open .hamburger span:nth-child(3) {
    transform: translateY(-10px) rotate(315deg);
}

後は、真ん中のバーをなくすことで、×を完成させようと思います。

/* 真ん中のバー */
.menu-open .hamburger span:nth-child(2) {
    transform: translateX(-18px) scale(0);
}

ハンバーガーメニュー完成

これで、完成です！まだ、さっとかけるわけではないですが、本やネットの情報を参考に作ることができました！

用語さえ知っていれば、ググったりすることができるので、作りたいものが実現できますね！

では、動画で確認してみます！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

あつし

「＠縁紡ぐ」にご訪問頂きありがとうございます。
業務改善やＩＴ化、システム開発・プロジェクトチーム運用支援を行っています。
お気軽にご相談ください。

ハンバーガーメニューをおしゃれに作ってみました