読者です 読者をやめる 読者になる 読者になる

ここにタイトルが入ります

デザイン&プログラミングのことも書くし、それ以外のことも書く。

【JavaScript】amazonのドロップダウンメニューぽいものを実装するJQueryプラグイン

JavaScript

※2013/12追記

詳しく解説されていた記事がありましたのでそちらを参照されることをおすすめします。
〜参考になりました!〜
Amazonのメガドロップダウンメニューの動作を実現する「jQuery-menu-aim.js」の使い方 | Tips Note

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜


amazonの左上にあるメニューあるじゃないですか。
これね↓
f:id:blog_711fumi:20131015005855p:plain

これっぽいメニューを簡単に実装できるJQuery用のプラグインがこちら。
kamens/jQuery-menu-aim · GitHub

使用方法

使いたいページでJQueryjquery.menu-aim.jsを読み込みます。

使い方はREADMEまんまなのですが、

$("ul.menu").menuAim({
  activate: function(row) {
    #処理  
  },
  enter: function(row) {
    #処理
  }
});

のように、JQueryオブジェクトのmenuAimメソッドの引数として、
ハッシュで設定するイベントとその時に行う処理を実装します。


で、ハッシュとして渡せる設定が複数あるのですが…

まずactivateとenter、deactivateとexitの違いがわからん…
両方ともマウスオーバーした時の処理に見えるんだけど。

enterの説明に

Entering a row does not mean the row has been activated, as the user may be mousing over to a submenu.

とあるが結局どう違うのかわからん…(*_*)


…という訳で設定の説明を下に記載してますが
結構間違ってるかもしれませんその時はごめんなさい〜


activate,enter :
カーソルが当たった時の処理?

deactivate,exit :
カーソルが外れた時の処理?

exitMenu :
メニューからマウスカーソルが外れた時の処理

rowSelector :
イベントが付与されるターゲットのrowを表すセレクタを設定する
デフォルトでは"> li"となっているので、設定しなければmenuの子要素liがrowとして処理される

submenuSelector :
activateイベントを付与する対象を設定できる
デフォルトでは"*"となっているので、すべてのrowにイベントが設定される

submenuDirection :
サブメニューをどの方向に出すか
"left"、"above"、"below"、"right"の4方向から選べる(デフォルトは右)



…activateとenterの違いがわからずモヤモヤしていますが
ご興味ある方は使ってみてはいかがでしょうか。
(雑ですみません(´・ω・`))