ハンバーガーメニューの要素配置

2021-08-13

スマートフォン用のメニュー画面をマークアップしていきます。

・ではハンバーガーメニューを押した時の画面を作っていきます。

: ヘッダーのスタイリング

ロゴとメニューアイコン、本文のスタイルを調整していきます。ロゴのスタイルマテリアルアイコンのスタイル mainのスタイルロゴのスタイル・ではもう少し細かいスタイリングをしていきたいと思います。 ...

・ハンバーガーメニューは基本的に画面の小さい中で効率的に要素を表示していくので今回もスマートフォンの画面を想定していきます。

・まず要素を確認していきます。必要なものは閉じるためのマテリアルアイコンと中身のメニューを3つほど用意していきましょう。

・divタグでまず親要素を作っておいてクラス名を作っていきます。かぶせたいのでクラス名はoverlayとしておきます。

・その中にはまず閉じるマークのマテリアルアイコンを書いて行きます。

・その後にリストでメニューを書いていきましょう。まずnavタグを使ってその中にul,liを書いていきクリックできるようにしたいのでaタグでmenuと書いていきます。aタグはhref属性を付けておきます。今回はサンプルなのでトップに戻るように＃としておきます。

・こんな感じです。

<span class="material-icons" id="close">close</span>

<nav>

<ul>

</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);

}