HoverMenu

ページ上の好きな所で、ボタンひとつでメニューを呼び出して表示することができたら便利だと思いませんか？

今回ご紹介する『jQuery HoverMenu』は、Ctrlキーを押すことで簡単にメニューが呼び出せるものです。

サンプルを見て頂いたほうがわかりやすいと思います。

ボタンひとつで呼び出せるクイックアクセスメニュー『jQuery HoverMenu』サンプル

デフォルトではCtrlキーが対応していますが、割り当てるキーの変更も可能です。

【使用方法】

こちらのサイトからダウンロードします。ZIPという箇所をクリックするとダウンロードが始まります。ZIPファイルとして保存されますので、解凍して下さい。

https://github.com/alexcheuk/hovermenu

＜head＞部分にCSSやJSファイルを読みこませる記述をします。ファイルの場所に注意してパスを貼ってください。

これだけで動くようになりますが、リンク先などがデフォルトのままですのでhovermenu.jsというファイルをいじって少しカスタマイズします。

メニューの各項目がクリックされたときのイベントは、hovermenu.jsファイル内の行番号144からになります。アイコンを変更したいときは、icon:”～”の部分を表示させたいアイコンの名称に変更します。アイコンとその名称は次のサイトを参考にして下さい。

http://fortawesome.github.io/Font-Awesome/icons/

また、デフォルトではCtrlキーで、メニューが表示されますが、行番号29にその記述があります。Ctrlキーのキーコードは17ですので、このkeyCode==17を変更してあげます。

if(event.keyCode==17 && !hovermenu.isOpened) _.openMenu(event);

Shiftキーを対応させたければ「keyCode==16」、スペースキーならば「keyCode==32」といった具合です。

キーコードの調べ方は、こちらのサイトを利用するとブラウザ上で確認できます。
KeyCode Library test

今回のサンプルはほとんど本家のデモのままで申し訳ないですが、デザインなどカスタマイズしてサイトの雰囲気にあわせたメニューを表示させたら素敵なサイトが出来そうです。

Tweet

あわせてお読みください

にゅるっと出てくるスマホで便利なお洒落メニュー「Animated Border Menus 」

スマホやタブレットでメニューを表示させたいときに活用できるレスポンシブタイプのメニュー「Animated Border Menus 」を紹介します。 メニューア…



レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」

Responsive Multi-Level Menu | Codrops 今回は、主にスマートフォンサイトで活躍しそうなレスポンシブタイプのドロップダウンメニ…



クリックすると横からメニューが現れるjQueryプラグイン『Sidr』

Sidr スマホのサイトでボタンやリンクをタップすると隠れていたメニューが横から現れるというのがよく使われます。 FacebookのページやYouTubeでも…