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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

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

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

これはコンテンツ同士の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を指定すると透明になりません。メニュー全体のデザインを半透明にするかは実際の背景に表示される内容との相性もあるので色々と試してみましょう。

まとめ

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

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

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

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください

WP Membersで会員サイトを構築する方法

大人気のWordPressプラグイン