【WordPressオリジナル(自作)テーマ制作】ドロップダウンメニューを最前面に出す方法

メニューが隠れているプログラミング備忘録
スポンサーリンク

ドロップダウンメニューが、背景や他の要素に隠れて困っていませんか?

どうも、ちゃんカマです。

WordPressのオリジナルテーマ制作において、ドロップダウンメニューを自作しました。
しかし、そのメニューがContact Form 7 で作成したフォーム入力欄に隠れてしまっていました。

今回は、この隠れてしまったドロップダウンメニューを最前面に表示させる方法を書いていきます。

以前に投稿した、WordPressでドロップダウンメニューを作成する方法はこちら

CSSのプロパティ「z-index」を使う

結論、隠れてしまっているメニュー部分に、この「z-index」というプロパティを指定してあげると改善できます。

この z-index は初期値が 0 になります。
つまり、何も指定しないと全ての要素が z-index: 0; になります。

CSS
z-index: 0;

なので、メニューの隠れている部分の要素に z-index: 1; を指定すると、隠れないで上に表示させることが出来ます。

z-index は値の数値が大きいものほど、上に表示されます。

CSS
z-index: 1;

z-index の詳細については、こちらを確認してみてください。
http://www.htmq.com/style/z-index.shtml

デベロッパーツールで隠れているメニューの要素を確認

では、メニューのどの要素に z-index を指定すれば良いのか?
それを確認するために、デベロッパーツールを開いて見てみます。

今回、フォームの入力欄の下に隠れてしまっている部分は、ドロップダウンメニューの中身の部分になります。

メニューの隠れている部分
この部分が隠れている

では、このドロップダウンメニューの中身の部分の要素を、デベロッパーツールで確認します。

確認すると、「sub-menu」というクラス名が付与されていることが分かります。
これは、WordPressでドロップダウンメニューを作成すると、自動で付与されるクラス名になります。

デベロッパーツールの画面
sub-menuというクラスが付与されている

sub-menu クラスに z-index を指定

では、sub-menu クラスに z-index を指定します。
CSSに以下のように z-index を追加します。

CSS
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -1.5%;
  width: 150px;
  background: #87cefa;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
  margin: 2px;
/* ここに z-index を追加 */
  z-index: 1;
}

自分の場合は、他の要素には z-index を指定していないので、z-index: 1; としました。
もしも他の要素にも z-index を指定している場合は、より大きな値を指定しないと、その要素の下に隠れてしまいます。

また、z-index 以外のCSSのプロパティは、あくまでも自分が制作しているサイトのものなので、参考程度にどうぞ。

これで、ドロップダウンメニューが隠れること無く、最前面に表示させることが出来ました。

改善後のドロップダウンメニュー
ドロップダウンメニューを最前面に表示出来た

まとめ

CSSのプロパティである z-index を使用して、無事にドロップダウンメニューを最前面に表示させることが出来ました。

今回の記事が皆さんの参考になれば幸いです。
以上、ちゃんカマでした。

コメント

タイトルとURLをコピーしました