【コピペ可】ハンバーガーメニューのボタンアニメーション4選

css

コピペ可能なハンバーガーメニューのボタンアニメーションを4つほどご紹介します。それぞれデモとサンプルコードを用意しました。メニュー要素にjavascriptでisClosed クラスを付け替えることでアニメーションを実現しています。ハンバーガーメニューのボタンのアニメーションは「【コピペ可】ハンバーガーメニューの開閉アニメーション4選」に載せています。

事前準備

本サンプルでは、リセットCSSにdestyle.css(https://github.com/nicolas-cusan/destyle.css)を使っています。HTMLとCSSをコピペする前に、事前に以下のCDNでデフォルトのブラウザスタイルをリセットしてからお試しください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.min.css">

3本線からバツへ

3本線からバツマークへ切り替わるボタンアニメーションです。

See the Pen Untitled by Yuto Seta (@yutoseta-the-sasster) on CodePen.

HTMLのソースコードです。

<button type="button" class="MenuBtn Style01">
        <span class="MenuBtn-BarFrame">
                <span class="MenuBtn-BarFrame-FirstBar"></span>
                <span class="MenuBtn-BarFrame-SecondBar"></span>
                <span class="MenuBtn-BarFrame-ThirdBar"></span>
        </span>
</button>

CSSのソースコードです。

.MenuBtn.Style01 {
    position: relative;

    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

    border: solid 2px #000000;
}

.MenuBtn.Style01 .MenuBtn-BarFrame {
    position: relative;
    display: block;
    width: 24px;
    height: 2px;
}

.MenuBtn.Style01 .MenuBtn-BarFrame-FirstBar {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: all .15s linear;


}

.MenuBtn.Style01 .MenuBtn-BarFrame-SecondBar {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: all .15s linear;

    transform: translateY(-8px) rotate(0deg);
}

.MenuBtn.Style01 .MenuBtn-BarFrame-ThirdBar {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    transition: all .15s linear;

    transform: translateY(8px) rotate(0deg);
}

.MenuBtn.Style01.isClosed .MenuBtn-BarFrame-FirstBar {
    opacity: 0;
}

.MenuBtn.Style01.isClosed .MenuBtn-BarFrame-SecondBar {
    transform: translateY(0) rotate(45deg);
}

.MenuBtn.Style01.isClosed .MenuBtn-BarFrame-ThirdBar {
    transform: translateY(0) rotate(-45deg);
}

3本線がくるっと縦向きに90度回転

3本線からくるっと90度縦向きに回転するボタンアニメーションです。

See the Pen ボタンアニメーション1 by Yuto Seta (@yutoseta-the-sasster) on CodePen.

HTMLのソースコードです。

<button type="button" class="MenuBtn Style02">
        <span class="MenuBtn-BarFrame">
                <span class="MenuBtn-BarFrame-FirstBar"></span>
                <span class="MenuBtn-BarFrame-SecondBar"></span>
                <span class="MenuBtn-BarFrame-ThirdBar"></span>
        </span>
</button>

CSSのソースコードです。

.MenuBtn.Style02 {
        position: relative;

        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        background: #eeeeee;
}

.MenuBtn.Style02 .MenuBtn-BarFrame {
        position: relative;
        display: block;
        width: 26px;
        height: 4px;
        transition: all .15s ease-in;
}

.MenuBtn.Style02 .MenuBtn-BarFrame-FirstBar {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background-color: #000000;
        transition: all .15s linear;


}

.MenuBtn.Style02 .MenuBtn-BarFrame-SecondBar {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background-color: #000000;
        transition: all .15s linear;

        transform: translateY(-9px) rotate(0deg);
}

.MenuBtn.Style02 .MenuBtn-BarFrame-ThirdBar {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background-color: #000000;
        transition: all .15s linear;

        transform: translateY(9px) rotate(0deg);
}

.MenuBtn.Style02.isClosed .MenuBtn-BarFrame {
        transform: rotate(90deg);
}

3本線から矢印戻るボタン

See the Pen ボタンアニメーション2 by Yuto Seta (@yutoseta-the-sasster) on CodePen.

HTMLのソースコードです。

<button type="button" class="MenuBtn Style03">
        <span class="MenuBtn-BarFrame">
                <span class="MenuBtn-BarFrame-FirstBar"></span>
                <span class="MenuBtn-BarFrame-SecondBar"></span>
                <span class="MenuBtn-BarFrame-ThirdBar"></span>
        </span>
</button>

CSSのソースコードです。

.MenuBtn.Style03 {
        position: relative;

        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        background: #eeeeee;
}

.MenuBtn.Style03 .MenuBtn-BarFrame {
        position: relative;
        display: block;
        width: 26px;
        height: 4px;
        transition: all .15s ease-in;
}

.MenuBtn.Style03 .MenuBtn-BarFrame-FirstBar {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background-color: #000000;
        transition: all .15s linear;


}

.MenuBtn.Style03 .MenuBtn-BarFrame-SecondBar {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background-color: #000000;
        transition: all .15s linear;

        transform-origin: center left;
        transform: translateY(-9px) rotate(0deg);
}

.MenuBtn.Style03 .MenuBtn-BarFrame-ThirdBar {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background-color: #000000;
        transition: all .15s linear;

        transform-origin: center left;
        transform: translateY(9px) rotate(0deg);
}

.MenuBtn.Style03.isClosed .MenuBtn-BarFrame-SecondBar {
        width: 16px;
        transform: translateY(1.414px) rotate(-45deg);
}

.MenuBtn.Style03.isClosed .MenuBtn-BarFrame-ThirdBar {
        width: 16px;
        transform: translateY(-1.414px) rotate(45deg);
}

メニューアイコンから別のアイコンへ切り替える

アイコンを閉じ開きで切り替えるアニメーションです。

See the Pen ボタンアニメーション4 by Yuto Seta (@yutoseta-the-sasster) on CodePen.

HTMLのソースコードです。

<button type="button" class="MenuBtn Style04">
        <span class="MenuBtn-BarFrame">
                <svg xmlns="http://www.w3.org/2000/svg" class="MenuBtn-BarFrame-OpenIcon" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" class="MenuBtn-BarFrame-CloseIcon" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
        </span>
</button>

CSSのソースコードです。

.MenuBtn.Style04 {
        position: relative;

        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        background: #eeeeee;
}

.MenuBtn.Style04 .MenuBtn-BarFrame {
        position: relative;
        display: block;
        width: 26px;
        height: 4px;
        transition: all .15s ease-in;
}

.MenuBtn.Style04 .MenuBtn-BarFrame-OpenIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 100%;
        opacity: 1;
        transition: all .15s linear;
}

.MenuBtn.Style04 .MenuBtn-BarFrame-CloseIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 100%;
        opacity: 0;
        transition: all .15s linear;
}

.MenuBtn.Style04.isClosed .MenuBtn-BarFrame-OpenIcon {
        opacity: 0;
}

.MenuBtn.Style04.isClosed .MenuBtn-BarFrame-CloseIcon {

        opacity: 1;
}

ハンバーガーメニューの開閉アニメーションについて

ハンバーガーメニューの開閉アニメーションについてはこちらの記事で解説しています。

css【コピペ可】ハンバーガーメニューの開閉アニメーション4選