解説12-2：②ヘッダーナビゲーション

ヘッダーナビゲーションを、タップすると開くように変更ましょう。
なお、右上のアイコン部分は画像を使います。

【完成イメージ】

1.作るレイアウトを整理する

最初に、これから作る部分の情報を整理しましょう。

• 初期状態で何を見せて、何を隠すか
• メニューを開いたときの表示はどうするか

【初期状態】

【メニューを開いた時】

2.menuボタンを作る

どちらの場合でも、右上にmenuのボタンは必要です。
先にmenuボタンの表示を作ります。

</nav>タグの下にbuttonタグを挿入します。
後に行うjavascriptの方でidを使いたいので、idも設定しておきましょう、

lp.html

<button type="button" id="navbtn"></button>

まだbuttonタグ部分は、上図右のような表示です。
CSSの方で大きさを決めて、背景としてmenuボタンの画像を読み込ませます。

style.css

/* @media(max-width: 576px) {} 内に書く */

/* ---------------------- */
/* nav
/* ---------------------- */
#navbtn{
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 25px;
    height: 25px;
    border: none;
    background: url('images/navbtn.svg') center;
    background-size:  25px 25px;
    cursor: pointer;
}

HOMEと重なるくらいの位置に、場所が変わっていれば成功です。

PC幅では表示しない設定

buttonタグを挿入すると、PC幅で見たときにも影響します。
CSSはメディアクエリ内なので適用されませんが、htmlにタグが入ってしまっているので下図のように見えます。

見えなくするために、表示・非表示を切り替えるクラスを作りましょう。

style.css

/* @mediaの外（上）に書く */
    .d-none{
        display: none;
    }

/* @media(max-width: 576px) {} 内に書く */
    .d-sp-block{
        display: block;
    }

ボタンタグに、作った2つのクラスを加えます。

lp.html

<button type="button" id="navbtn" class="d-none d-sp-block"></button>

スマホ幅では表示、それ以上幅の場合はbutton部分が消えているか確認してください。

3.メニューが開いているときの表示を作る

次に、メニューが開いているときの表示を作っていきます。

3-1.位置決め

赤字で書いた「重ねる」という部分がポイントになります。
このままだとファーストビュー画像の上に表示されてしまうので、positionプロパティを指定して重なるようにしましょう。

style.css

  header nav ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 2.5rem; /* #navbtnと重ならないようにする */
    background: rgba(255,255,255,0.85);
  }

「重ねる」という最初の関門はクリアできました。
が、absoluteだとページがスクロールされたとき、置き去りになってしまいます。

上のアニメーションのようにpositionの値をfixedにした方が、スマホ操作でちょっと指が動いてしまったときにも安定して見えるのではないでしょうか。

ちょっと直しておきましょう。 検証ツールによると、ページ最上部との間にできている隙間は、ulタグに付いているブラウザCSSが原因のようです。
1rem（16px）分も合わせて調整しましょう。

style.css

header nav ul{
    position: fixed;
    top: -1rem;
    left: 0;
    width: 100%;
    padding-top: 3.5rem;
    background: rgba(255,255,255,0.85);
}

※ #navbtn のposition値は変えません。

3-2.li要素の並び順とスタイル

次に、d-flexクラスで横並びになっているli要素を、縦に並べます。
スマホ幅の時はflex itemを縦に並べられるよう「flex-sp-column」クラスを作りましょう。

style.css

/* @media(max-width: 576px) {} 内に書く */
.flex-sp-column{
    flex-direction: column;
}

ulタグに「flex-sp-column」クラスを追加します。

CSSで余白を調整すれば、メニューを開いたときのul要素の設定は完了です。

4.メニューの開閉機能を作る

いよいよ menu をタップで表示・非表示を切り替える部分です。 ここは少しだけjavascriptを使います。

4-1.javascriptを設定する

お好きな名前をつけて、拡張子が.jsのファイルを新規作成してください。
実習ではmihon.jsとして、htmlファイルと同階層に入れています。

作成したjsファイルに、以下のコードを貼り付けます。
javascript入門講座を受けられた方なら、見覚えのある記述かと思います。

mihon.js

document.getElementById("navbtn").onclick = function(){
  document.querySelector('header').classList.toggle('open');
}

2行目は「headerにopenクラスがあれば取り除く、なければ追加する」という指示です。

querySelector()は()内に書いたHTML要素を検出・取得するメソッド。
そのあとのclassList.toggle('クラス名')で、クラスの有無を切り替えています。

htmlファイルから、このjsファイルを読み込んで確認してみましょう。
ページ下部、</body>直前で読み込ませます。

lp.html

  <script src="mihon.js"></script>
</body>

ブラウザで動作を確認してみましょう。
検証ツールで見ると、#navbtnをクリックするたびに、headerタグにopenクラスが付いたり外れたりしていることがわかります。

4-2.表示・非表示の設定

headerにopenクラスが付いている時と、付いていない時。
この２つを使って、メニュー部分の表示と非表示を切り替えます。

あわせて、#navbtnの表示位置も固定しましょう。

style.css

header nav{
    display: none;
}

/* メニューを開いた時*/
header.open nav{
    display: block;  
}

header.open #navbtn{
    position: fixed;
}

これでヘッダーナビゲーションは完成です。