*

ウェッブ制作

ホーム >  Web制作 >  変化を付ける小技 > 
jQueryでドロップダウンメニュー MENU 

JQuery・メニューにマウスを重ねて下層のメニュー表示する横型のドロップダウンメニュー更新

当サイトのグローバルメニューをドロップダウンメニューに変更した例で以下に記述します。
教えて頂いたサイト → 誰でも出来る!jQueryでドロップダウンメニューをわずか7行で完成させる方法

1.HTML表記

2.メニューのCSS表記

※ 9行目 z-index:1;は、異なる要素が位置的に重なる場合、後から読み込まれた要素が上に被さるが、画像がある場合は、画像の下に入ってしまい、メニューが部分的に見えない状態になってしまう。これを避けるため、メニューのCSSでこの指定を行っている。通常は重ねて表示するケースは少ないが、ドロップダウンメニューの場合は、マウスが重なった時に一時的に表示するので、このような指定が必要になる。

20170702 「z-index:1」の値を「100」に変更。ソースコード表示をCrayon Syntax Highlighterに変えたところ、メニューの一部が隠れてしまったため、大きな値として100を入れる。値の根拠は特に無し。

3.メニューのjQuery表記