スマホ用メニューを開くとコンテンツ全体が下へずれる場合の解決策

スマートフォン向けに表示するメニューは一般的にハンバーガーメニューと呼ばれる三本線が使われますよね。そこで本日はスマホ用メニューのちょっとした設定をご紹介いたします。

スマホ用メニューを開くとコンテンツ全体が下へずれる場合の解決策

最近のスマホサイトではメニューに三本線（ハンバーガーメニュー）を表示することが多いです。

しかし、メニューを開くとコンテンツ全体がずれるケースがあります。以下のスクリーンショットを見れば「開いたメニューの範囲（大きさ）だけ全部が下側へ移動」してしまっていますよね。

これはコンテンツ同士のCSS指定が不足しているのが原因です。

CSS（position）を指定して解決する

カンタンに言えば「メニューとコンテンツに対して位置の指定」をすればOKです。

/* ずれるコンテンツ側に指定するCSS */
.under-content {
	position: relative;
}

/* ハンバーガーメニューに指定するCSS */
@media (max-width: 768px) {
	.navi-content {
		position: absolute;	
		z-index: 1;
		max-width: 100%;
		opacity: 0.95;
	}
}

以上のCSSを指定するだけで解決いたします。上記の書き方では解像度768pxまでに「ハンバーガーメニュー」が表示される前提なので実際は@mediaの「max-width」でpx値を調整することができます。

テーマによって「CSSのclass名」は違うので微調整して使えばOKです。あとメニューの背景全体に透明度をつけていますが好みで設定ください。本記事では重なりがわかるように半透明にしています。

透明度を調整するプロパティは「opacity」です。ちなみに1を指定すると透明になりません。メニュー全体のデザインを半透明にするかは実際の背景に表示される内容との相性もあるので色々と試してみましょう。

まとめ

本日は「ハンバーガーメニューのオープン時にコンテンツが下へずれる解決策」を解説いたしました。

コンテンツ全体が下にずれ込むこむよりは背景として固定されつつ、メニューが手前のレイヤーとして表示されるのが見た目としては自然です。メニューの表示は好みもあるので色々な動作を試すのがベスト。

ぜひお試しくださいませ。