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

ドロップダウンメニュー グローバルナビの中央へ! Web Design Tips
Web Design Tips

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

この記事を書いた人

DoGgy(2級ウェブデザイン技能士)

30歳で大手メーカーの営業マンを辞めて未経験からWeb制作を独学。現在は在宅フリーランスとして月平均50万円稼いでいます。
当ブログでは「在宅ワークの初め方」や「Web制作」について発信中!

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

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

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

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

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

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

 Codepenの使い方

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

それでは本題です。

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

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

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

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

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

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

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

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

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

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

まずはX軸(left:)に”50%”を指定し、次にtransformで要素のX軸を移動させるtranslateX()に”-50%”を指定。

これだけで親要素の中央に配置する事が出来ます。

この手法を使えばposition: absolute;を指定した要素を中央配置できるので、ドロップダウンメニュー以外でもどんどん活用してください!

おわりに

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

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