CSSのみで作る追従ドロワーメニュー【jQuery不要】

2019年9月1日

ほとんどのスマホサイトやアプリで採用されている、3本線のボタンを押すとメニューが表示される「ドロワーメニュー」。
※ハンバーガーメニューやスライドメニューなどとも呼ばれています。

ドロワーメニューはHTML+CSSのみで実装が可能で、jQueryやfontawesomeなどのライブラリを読み込む必要もなく、お手軽に実装できます。

現在このページ限定で、追従するドロワーメニューを実装しておりますので、求めている動作と同じ場合は是非チェックしてみてください。

完成ソースコードはこちら

作成したソースコードと共に解説していきますので、まずはソースコードを見てみてください。

HTML

ドロワーメニューを機能させるHTMLの記述です。

<body>タグの直下に置いてください。

中央にサイトアイコンなどの表示が不要な場合は、.header-site-iconの部分は削除してください。

<body>
<div class="header-fixed">
    <div class="header-fixed-in">
        <input type="checkbox" id="header-hamburger"><!-- チェックボックス非表示 -->
        <label for="header-hamburger" class="header-hamburger-icon"><span></span></label><!-- チェックボックスラベルのハンバーガーメニュー -->
        <label id="header-close" for="header-hamburger"></label><!-- 背景暗くする用 -->
        <div id="header-content">
            <!-- 表示時のコンテンツの中身 -->
            <ul>
                <li>コンテンツ1</li>
                <li>コンテンツ2</li>
                <li>コンテンツ3</li>
                <li>コンテンツ4</li>
                <li>コンテンツ5</li>
            </ul>
        </div>
        <!-- サイトアイコンを中央に表示 -->
        <div class="header-site-icon">
            <img src="https://kinocolog.com/wp-content/uploads/2019/07/kinocolog_white.png">
        </div>
    </div>
</div>
</body>

記述の内容はごく単純で、

「チェックボックス（#header-hamburger）にチェックが入る」
↓
「#header-closeと#header-contentを表示」

としているだけです。
チェックボックスはform部品そのまま使用しているわけではなく、ラベル要素を使用して、チェックボックスの仕組みを担っています。

ラベルにあたる部分は、三本線の←これで、タップするとチェックが入る⇒特定の要素が表示される仕組みをCSSに仕組んでいます。

CSS

次に、肝となるCSSの設定です。

各項目ごとに、ソースコードで簡単な解説を添えておりますのでご確認ください。

.header-fixed{
    /* 追従 */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    
    padding: 10px;
    z-index: 100000;
    background-color: #00AA13;
    box-sizing: border-box;
}

.header-fixed-in{
    position: relative;
    height: 30px; /* ヘッダーの縦幅を指定 */
}

/* チェックボックスは非表示（ラベルで操作するため） */
#header-hamburger{
    display: none;
}

/* ハンバーガーアイコンの位置を指定（左） */
.header-hamburger-icon{
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
/* ハンバーガーアイコンの三本線をCSSで書く（上下の線） */
.header-hamburger-icon span{
    display: block;
    position: relative;
    width: 30px;
    height: 20px;
    border-top: solid 4px #FFF;
    border-bottom: solid 4px #FFF;
    box-sizing: border-box;
    cursor: pointer;
}
/* ハンバーガーアイコンの三本線をCSSで書く（中央の線） */
.header-hamburger-icon span:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 4px;
    top: 4px;
    background-color: #FFF;
}
/* 中央にサイトロゴを表示 */
.header-site-icon{
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
.header-site-icon img{
    width: auto;
    height: 100%;
}

/* 背景を暗くする（デフォルトは非表示） */
#header-close{
    display: none;
    position: fixed;
    z-index: 150000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
}

/*スライドで表示させるコンテンツ*/
#header-content{
    z-index: 200000;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 60%;
    max-width: 300px;
    box-sizing: border-box;
    padding: 5px;
    transition: .3s;
    background: #FFF;
    /* デフォルト非表示（左側の見えないところに位置させる） */
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

/*チェックが入ったらコンテンツを表示*/
#header-hamburger:checked ~ #header-content{
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

/*チェックが入ったらコンテンツ外を暗くする*/
#header-hamburger:checked ~ #header-close{
    display: block;
    opacity: .7;
}

追従するメニュー全体を「.header-fixed」で囲んであります。

そしてこの要素に「position: sticky」と記述することで、親要素に自動的に追従するようになります。

参考 CSSのposition:stickyの使い方と効かないケースを解説

.header-hamburger-icon spanは、ハンバーガーメニューを再現するための記述です。

要素の上と下に太いボーダーを付けて、疑似要素の:beforeで中央に線を引いています。

そして、#header-hamburger:checked ~ は、「チェックボックスにチェックが入ったら、このスタイルを適用する」という記述です。

「~」は同階層に位置する要素を指定するものなので、チェックが入ると「#header-content」と「#header-close」のスタイルが変化します。

transitionを設定することで、CSSのみでアニメーション的な動きも取り入れることが出来ますね。

参考 CSSアニメーションの使い方をサンプルで解説

昔はこの手の機能はjQueryありきでしたが、今はCSSだけで簡単に追従及びドロワーメニュー（ハンバーガーメニュー）を実装できるようになりました。

スマホでは最も主流かつ、ユーザーになじみのあるメニュー操作なので、是非実装してみましょう。

以上、CSSのみで作る追従ドロワーメニュー、でした。

CSS