Web制作ラボ

ドロップダウンメニューを親要素の真ん中へ配置する方法【CSSで実装】

ドロップダウンメニュー グローバルナビの中央へ!Web制作ラボ

今回はドロップダウンメニューを、横幅が可変(widthを指定していない)親要素の真ん中へ配置する方法について解説します。

この記事を書いた人:DoGgy
(@DoGgy_doggyblog
普段は在宅フリーランスとしてWebデザイナーのお仕事をしています。
プロフィールページはこちら

ドロップダウンメニューとは?

Webサイトで使われるメニューには色々な種類が有るので、念のため本題に入る前にドロップダウンメニューがどんな物なのかおさらいしておきましょう。

ドロップダウンメニューとは、以下のようにグローバルナビにマウスを乗せたり、クリックしたりすると出現するメニューのことです。

See the Pen
JjovjqZ
by DoGgy (@DoGgy12)
on CodePen.

ちなみに上のメニューはJavascriptを使用せず、CSSのみで実装しています。

CSSのみでドロップダウンメニューを実装する方法が知りたい方のために、コメントアウトで解説も入れていますので、気になる方はCodepenでCSSの記述内容をご覧ください。

【CodePenの使い方を解説】簡単に使えて学習効率アップ!
HTMLやCSS、JavaScriptを勉強している皆さんならば、以下の様な埋め込みを目にされた経験...

ドロップダウンメニューを親要素の真ん中へ配置する方法

それでは本題です。

先ほどご覧いただいたドロップダウンメニューの位置は、親要素の左側に揃っていましたよね。

親要素(.gnav)の左端とドロップダウンメニュー(.dropdown-menu)の左端が揃っている

ドロップダウンメニューに「left: 0;」を指定しているので当然といえば当然なのですが、これを親要素の中央に配置しようとすると、少しだけ工夫が要ります。

「left: 0」の数値を弄るだけなのですが、先に結果をご覧ください。

See the Pen
abzGzrr
by DoGgy (@DoGgy12)
on CodePen.

小窓で見ると左端のメニューが画面外に出てしまっていますが、実際のレイアウトでは、marginやpaddingで画面端とメニューの間に空間を作るなどすれば問題ありません。

親要素の横幅が可変ですが、ドロップダウンメニューが中央に配置されていますね。

位置指定についての内容が見やすいように、関係のあるプロパティだけ抜粋しました。

.gnav-item {
line-height: 40px;
position: relative;
}

.dropdown-menu {
position: absolute;
top: 40px;
left: calc ( 200px - 100% ) / -2 ); /* ←ここ! */
width: 200px;
}

X軸(left:)の指定に、数値計算ができるcalc()関数を使います。
※calcについて不明な方は以下の記事を参照ください。

【SASS、SCSS】calcの計算式で変数を使うときの記述方法
このページをご覧になられたということは、SCSSでcalc()関数をご使用になられた方でしょうか。...

以下の計算で常に親要素の中央に配置する事が出来ます。

left: calc(( 【ドロップダウンメニューの横幅】 – 100% ) / -2 ); 

ちなみに上記の「100%」は.gnav-item(今回の例では「web制作」や「Adobe」など)のwidthが入ります。

あとは算数の問題です。以下の例をご覧ください。

ドロップダウンメニューの計算式について図解

上記の結果、ドロップダウンメニューが左側へ100px移動(left: -100px;となるため)して親要素の中央へ配置されるという訳です。

おわりに

ドロップダウンメニュー 真ん中 配置」や「ドロップダウンメニュー 中央寄せ」で検索しても、ドンピシャの内容が見つからなかったので記事にしてみました。

需要が有るかわかりませんが、誰かのお役に立つことを願って、失礼いたします!

トップページへ戻る