横幅がスマホサイズになった時にヘッダーメニューをアイコンに変えて、レスポンシブ用のヘッダーメニューにするやり方を説明する。
完成のイメージ
完成系は下。ある幅までいくと、ヘッダーメニューが3本線のアイコンに変化する。
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画面サイズになってもアイコンが消えなくなる。
下記はアイコンが消えなくなってしまう例。
fontawesomeのリンクをstylesheet.cssの下に書くと、アイコンが消えなくなる。
<!-- これはダメな例 -- !>
<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;
}
}
画面幅をどこまで狭めるとアイコンに変化するかの設定に関しては、ブレイクポイントで設定する。
詳しくは下記に書いた。
-
-
[CSS] レスポンシブ対応のためのブレイクポイントの設定のやり方
CSSでレスポンシブサイトを作る時に用意すべきステップを整理。 CSSでウェブサイトをレスポンシブ対応にするためには、ブレイクポイントを作成する必要がある。 そもそもブレイクポイントとは？ ブレイクポ ...
続きを見る
これで、ある画面幅まで狭めると、ヘッダーメニューがアイコンに変化するようになる。
