Technology

[html / css] 横幅がスマホサイズになった時にヘッダーメニューをアイコンに変化させる

レスポンシブにする時に、ヘッダーメニューの欄を消して、アイコンに変化させる時の備忘録。

完成系は下。



fontawesomeのアイコンをヘッダー内に配置

fontawesomeのメニューアイコンを配置する。今回はこちらを使用。

<span class="fas fa-bars menu-icon"></span>


上記のコードをヘッダー内に配置する。

<header>
    <div class="container">
      <div class="header-left">
        <a href="./forest.html">
          <img src="./forest-black.png">
        </a>
      </div>

      <span class="fas fa-bars menu-icon"></span>

      <div class="header-right">
        <ul>
          <li>Experience</li>
          <li>Price</li>
          <li>Room</li>
        </ul>
      </div>
    </div>
  </header>


fontawesomeのリンクの配置の注意点

fontawesomeを使うときは、必ず<head></head>内にリンクをおく必要があるが、もし他のstylesheetの読み込みと一緒に書くときは注意が必要。

理由はわからないが、fontawesomeのリンクをstylesheetのリンクより下に書くと、これから行う操作を行ったとき、PC画面サイズになってもアイコンが消えなくなる。

<!-- これはダメな例 -- !>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">


fontawesomeのリンクは必ず上に書く。

<!-- これは良い例 -- !>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css">


stylesheet.cssではアイコンをdisplay.noneに設定

次に、stylesheetではアイコンは見せたくないので、display.noneに設定。

/* フォントサイズ、色、配置なども.menu-iconの中で設定  */

.menu-icon{
  display:none;
}


responsive.cssではアイコンをdisplay.blockに設定

responsive.cssの方ではアイコンを表示させるため、display:block;を使って表示させる。

逆にメニューは見えないようにしたいので、display:none;を記述して、メニュー表示を消す。

@media all and (max-width: ●●px) {

/* header-rightにあるメニュー要素を消す  */
 .header-right{
     display:none;
 }

/* メニューアイコンを表示させる  */
 .menu-icon{
   display:block;
 }
}


メニューアイコンをタップしてメニューバーを表示させるにはまた別の処理が必要になるので、ここまで。

-Technology