スマートフォン用のメニュー画面をマークアップしていきます。
- 要素の作成
- closeアイコンの設置
- 要素のスタイル
要素の作成
・ではハンバーガーメニューを押した時の画面を作っていきます。
・ハンバーガーメニューは基本的に画面の小さい中で効率的に要素を表示していくので今回もスマートフォンの画面を想定していきます。
・まず要素を確認していきます。必要なものは閉じるためのマテリアルアイコンと中身のメニューを3つほど用意していきましょう。
・divタグでまず親要素を作っておいてクラス名を作っていきます。かぶせたいのでクラス名はoverlayとしておきます。
closeアイコンの設置
・その中にはまず閉じるマークのマテリアルアイコンを書いて行きます。
・その後にリストでメニューを書いていきましょう。まずnavタグを使ってその中にul,liを書いていきクリックできるようにしたいのでaタグでmenuと書いていきます。aタグはhref属性を付けておきます。今回はサンプルなのでトップに戻るように#としておきます。
・こんな感じです。
<div class="overlay">
<span class="material-icons" id="close">close</span>
<nav>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</nav>
</div>
要素のスタイル
・ではこれらの要素をスタイリングしていきます。
・セレクタはoverlayとしてあげます。
・スタイリングはまず全画面で固定表示してその他の要素も見えるように半透明にしていきます。
・まず固定表示ですがposition: fixed;としてあげてtop, bottom, right, leftをそれぞれ0にしてあげます。
・次に半透明にはrgbaを使っていきましょう。白い半透明なのでバックグラウンドをrgba(255, 255, 255, 0.95);としてあげればいいでしょう。
・こんな感じです。
.overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(255, 255, 255, 0.95);
}