HTML メニューボタンの作り方２（CSSでメニュー一覧を開く・閉じる、表示・非表示）

はじめに

今回はボタンを押すとメニュー一覧が表示されるメニューボタンを作成します。CSSだけで（Javascriptは使わずに）ヘッダー部分に配置します。

f:id:Start_python:20200209013639p:plain

ソースコード

base.html

<link rel="stylesheet" type="text/css" href="/static/base.css">

<header>
    <h3 id="user_name">レイルーク＠ふたり暮らし</h3>

    <div class="menu_box">
        <label id="menu" for="toggle">メニュー</label>
        <input type="checkbox" id="toggle">
        <ul class="dropdown_menu">
            <li><a href="/blog">ホーム</a></li>
            <li><a href="/blog/create">新規作成</a></li>
            <li><a href="/blog/logout">ログアウト</a></li>
        </ul>
    </div>

</header>

<label id="menu" for="toggle">メニュー</label>

「チェックボックス」用にラベルを作っています。ラベルをクリックした時にチェックボックスのオンオフが可能になるので、チェックボックスは非表示にできます。

<input type="checkbox" id="toggle">

チェックボックスを作成します。チェック選択中にメニュー一覧を表示して、チェック選択されてない時はメニュー一覧を非表示にします。

<ul>~</ul>

リストを表示します。

<li>~</li>

リストの項目を記述します。<ul>~</ul>の間に複数入れることができます。

base.css

header{
    position: fixed; /*絶対位置で固定*/
    top: 0px; /*上に配置*/
    left: 0px; /*左の隙間をなくす*/
    padding: 0px 30px; /*範囲内の余白（上下、左右）*/
    width: 100%; /*幅*/
    height: 60px; /*高さ*/
    background-image: url("back_image.jpg");
    /*画像を背景に指定*/
}

#user_name{
    position: absolute; /*絶対位置で表示*/
    margin: 20px 0; /*範囲外の余白*/
}

.menu_box{
    margin: 30px 60px 0 calc(100% - 180px); /*範囲外の余白*/
    text-align: right; /*右に寄せる*/
}

#toggle{
    display: none; /*非表示にする*/
}

.dropdown_menu{
    display: none; /*非表示にする*/
}

#toggle:checked+.dropdown_menu{
    display: block; /*リストを表示する*/
}

.dropdown_menu li{
    display: block; /*要素をインライン表示にする*/
    width: 120px; /*幅*/
    text-align: center; /*中央に表示する*/
    background-color: white; /*背景色*/
    border: outset 2px; /*外枠を作る（スタイル、太さ）*/
    cursor: pointer; /*カーソル（指のかたち）*/
}

<h3>と<label>を同じ高さ（行）に表示させたかったので、<h3>（#user_name）のほうを「絶対位置で表示」にしました。

ラベル、ボタン、リストを<div>要素に入れて、<label>の位置は<div>（.menu_box）のほうで設定しています。※ここを理解するのに苦労しました。

margin: 30px 60px 0 calc(100% - 180px); /*範囲外の余白*/

左位置はGoogle Chromeの「デベロッパーツール」で確認しながら決めました。

#toggle:checked+.dropdown_menu{

チェックボタン（#toggle）が選択された時にリスト（.dropdown_menu）を装飾します。「+」で指定する要素は、元の要素に隣接している必要があります。