メガドロップダウン

グローバルメニューにマウスのっけると動くアイツです。
今回のメガドロップダウンメニューの主な仕様は以下の通りです。

ホバー処理でメガドロップダウンメニュー(以下MDD)を表示
MDD対応非対応を分ける事ができる
MDD表示中に他MDD対応タブにマウスオンした場合は、内容のみ切替え(スライド系のアニメーションを行わない)
MDD対応タブにマウスオンしてから動作までディレイがあり、その間にマウスアウトした場合は動作を抑制する。
MDDリストとMDD本体は、クラス名で判定を行う方式とする

■このサイトについて
■言い訳のしようがない内容
■謝罪する気はあるのか？

■製品なんてないクセに！
■やめないで！私の為にもっと争え！
■先輩！これ飲んでください！(朝顔の種)
■先輩！突きあってください！(フェンシング)
■先輩！隙です！ｸﾞｻｰ(暗殺)

■趣味全開じゃいかんのか？
■そう(趣味全開に)なればそう(こんなサイトに)なるやろ
■まな板
■なんでそんなんを、さい配のアレを言われなアカンのや!
■自重しないって素敵な事だと思います。

■金曜日だからもう帰りたい
■眠たいからもう帰りたい
■月曜日だからもう帰りたい

メガドロップダウンの内容について

マークアップとJS処理について記述していきます。

マークアップ

長いので別窓で

JS処理

長いので別窓で

解説

簡単な初期状態について

マークアップとしては、ホバーイベント用のリストタグの下に、それぞれのMDD本体を置いてます。
CSSでMDD本体の高さを0にしてたり、子要素(実際のMDDコンテンツ)をdisplay:none;にしてます。

イベントバインドについて

今回のイベントバインドについては、リストタグとMDDの一番親(リストと本体の親)にかけてます。
リストタグにはmouseenter 親に対してはmouseleaveをそれぞれつけています。

リストタグのイベント処理内容について

処理自体は見ての通り。
カーソルかすりに対応するように本処理をsetTimeoutで遅延させています(0.3秒)

また、既に開いている場合は、開き直しをさせず、その場で内容を入れ替えており
今回はshow/hideでの切り替えですが、スライドでの入れ替えも問題なく行えるものとなります。
indexを別途取得することにより、スライドの切り替え(左右の切り替え)も行う事ができます。
例えば A|B|C|Dのリストで　まずBを表示させた後　Cを表示させた場合は右からCがスライド
逆にBを表示させた後Aを表示させた場合は左からAがスライドのような動作が想定できます。

リストタグ自体にはmouseleave処理はありません。MDDコンテンツ内が見れなくなる為です。

MDDの親のイベント処理内容について

現在開いているclassを記憶していますので、それをslideUpで閉じます。
また、ここでclearTimeoutを行う事で、完全にオープン処理をカットします。