【CSS】ハンバーガーメニューのボタンアニメーション4選

css

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

事前準備

本サンプルでは、リセット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本線からバツへ

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

<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>
.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度回転

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

<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>
.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.

<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>
.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.

<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>
.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;
}