ドロップダウンに一手間加えて美味しく
普通にボタンかなんかポチったらドロップダウンが出る何一つとして面白みも新鮮さもないヤツなんですが
hover時にちょっと一手間加える時があったのでなんとなくコンテンツにしてみました。
今回の要望
- ボタン or aタグクリックでドロップダウン。開いたり閉じたりを繰り返す。
- hoverした時に(ボタンが)開きそうな感じにして欲しい
hoverした時に(ボタンが)開きそうな感じにして欲しいってなんやねんって事ですが
ほんの少しぬるっと出るようにアニメーションしてくれって事らしいです。へぇ
アニメーションCSSでやろうかとも思いましたが、その後のクリックでドロップダウンの処理が控えているので
hoverのやつもJSでやったろうって事になりました。
いつものデモ
ここクリックで何か開くらしいですよ
ドロップダウンメニューコンテンツ
もじれつ
もじれつ
もじれつ
もじれつ
もじれつ
もじれつ
もじれつ
もじれつ
もじれつ
もじれつ
もじれつ
もじれつ
もじれつ
もじれつ
もじれつ
そこそこ長いですが、実行したJSは以下となります。
javascript
$(function(){ var overFlg = 0, // dd動作の制御フラグ ddTriggerElem = $('.ddTrigger'), // ddトリガー要素 ddContentsElem = $('.ddContents'); // dd要素 //----------------------------------------------- // オープントリガーのmouseover処理 // ドロップダウンが開いている場合は動作させない // ボタン無いの矢印背景と、ちょいでる要素を下げる //----------------------------------------------- ddTriggerElem.on('mouseover',function() { if(ddTriggerElem.hasClass('openElem')) return false; $(this).children('i').velocity('stop'); $(this).next('.hoverOpen').velocity('stop'); $(this).children('i').velocity({"top":"32px"},300,""); $(this).next('.hoverOpen').velocity({"bottom":"-10px"},300,""); }); //----------------------------------------------- // オープントリガーのmouseout処理 // ボタン無いの矢印背景と、ちょいでる要素を上げる(元に戻す) //----------------------------------------------- ddTriggerElem.on('mouseout',function() { var topPx = 22; if(ddTriggerElem.hasClass('openElem')){ topPx = 16; } $(this).children('i').velocity('stop'); $(this).next('.hoverOpen').velocity('stop'); $(this).children('i').velocity({"top":topPx+"px"},300,""); $(this).next('.hoverOpen').velocity({"bottom":"0px"},300,""); }); //----------------------------------------------- // オープントリガーのclick処理 // ドロップダウンの表示非表示 //----------------------------------------------- ddTriggerElem.on('click',function() { if(overFlg == 1) return false; // 動作中の場合は止める overFlg = 1; if(ddContentsElem.css('display') == 'none') { // open処理 ddTriggerElem.addClass('openElem'); // mouseoutを動作させて矢印やらを元に戻す ddTriggerElem.trigger('mouseout'); ddContentsElem.slideDown('300', function() { // フラグリセット overFlg = 0; }); } else { // close処理 ddTriggerElem.removeClass('openElem'); ddTriggerElem.trigger('mouseout'); ddContentsElem.slideUp('300', function() { // フラグリセット overFlg = 0; }); } }); });