いわしブログ

京都のウィンドミル代表いわしのブログです。wordpressやfacebookの設定、ブログ運営について備忘録代わりに更新してます。最近は動画も作ってます。

*

jQueryを用いたドロップダウンメニュー「jMenu」

   

ただいまお仕事で作成中のサイトがありまして、そこに設置する横長のメニューに選択項目をなるべくたくさん作りたいという要望がありました。
とはいえ、サイトの横幅には限りがある以上、項目を増やすと1つ1つのボタンが小さくなってしまいます。それならメニューを階層化すればいいだろうということで、マウスオンで展開するドロップダウンメニューを設置してみました。

候補はたくさんありましたが、今回は「MyjQueryPlugins」というjQueryライブラリ集サイトにあった「jMenu」を使うことにしました。
「jMenu」はjQueryを使ったドロップダウンメニューで、サブメニューは何層でも作成可能です。設置も簡単、コードをいじれば色や表示速度も変更できます。

http://www.myjqueryplugins.com/jquery-plugin/jmenu

jMenu jquery plugin – Horizontal navigations with unlimited dropdown sub-menus : MyjQueryPlugins

デモはこちらで確認できます。メニュー表示時間の調整やエフェクトの動作なども、その場で数値を変更して確認できます。

http://demos.myjqueryplugins.com/jmenu/

jMenu jQuery plugin : Demonstration – Horizontal navigation with unlimited sub-menus with jQuery : MyjQueryPlugins.com

では、さっそくjMenuを設置してみましょう。設置作業は大きく分けて2つ、HTMLへのコード記載と、CSSとjqueryファイルのアップロードです。

「jMenu」の設置 HTMLへの記載

CSSとjqueryの呼び出しコード記載

まずは、CSSとjqueryの呼び出しコードを<head></head>内に記載します。
このコードをそのままコピーして、</head>のすぐ上に貼り付ければOKです。

メニュー用HTML

続いて、メニューを設置したい場所に下記のコードを記載します。
「jMenu」はサブメニューを何層でも作成することができます。下のサンプルでは、メニュー1-1からメニュー2-1~メニュー2-3が展開し、メニュー1-3からメニュー2-1・メニュー2-2が展開し、さらにメニュー2-2からメニュー3-1~メニュー3-5までが展開します。
メニュー1-1は2層構造、メニュー1-3は3層構造というわけです。

層構造にする必要がなければ、コードはこのようになります。

コードはメニューの内容に合わせて、適宜変更してください。

「jMenu」プラグイン呼び出し

最後に「jMenu」プラグイン呼び出しコードを<head></head>内に記載します。
場所は最初に記載したCSSとjqueryの呼び出しコードの前後、どちらでもかまいません。<head></head>内に収まっていればOKです。

「jMenu」の設置 CSSとjqueryアップロード

続いてファイルのアップロードです。GitHubにアップされている「jMenu」のCSSとjqueryのコードを基に、新しくファイルを作成してサーバにアップします。

CSSファイルのアップロード

まずはCSSファイルから。下記のサイトにあるCSSのコードをコピーして、テキストエディタで「jmenu.css」というファイルを作成します。そのファイルをサーバ内のルートフォルダ(index.htmlと同じフォルダ)にアップロードしてください。

https://github.com/alpixel/jMenu/blob/master/css/jmenu.css

jMenu/css/jmenu.css at master · alpixel/jMenu · GitHub

jqueryファイルのアップロード

続いてjqueryのファイルを2つ作成します。まずは「jMenu.jquery.min.js」から。
先ほどのCSSファイルと同じ手順で「jMenu.jquery.min.js」を作成して、サーバにアップロードしてください。

https://github.com/alpixel/jMenu/blob/master/js/jMenu.jquery.min.js

jMenu/js/jMenu.jquery.min.js at master · alpixel/jMenu · GitHub

次は「jquery.js」です。こちらも同様にアップロードしてください。

https://github.com/alpixel/jMenu/blob/master/js/jquery.js

jMenu/js/jquery.js at master · alpixel/jMenu · GitHub

GitHubにアップされている「jMenu」用のjqueryファイルは他にもありますが、最低限必要なのはこの2つだけです。

あと、メニューのエフェクト効果やフェードイン、フェードアウトの時間は、先ほどのデモページの「change options」で数値を変更して「Change options」ボタンを押せば変更が反映されます。下に表示された「js code」の内容を、「jMenu」プラグイン呼び出しの時に記載したコードに追記してください。

http://demos.myjqueryplugins.com/jmenu/

jMenu jQuery plugin : Demonstration – Horizontal navigation with unlimited sub-menus with jQuery : MyjQueryPlugins.com

メニューの色やフォントなどを変更する場合は、「jmenu.css」をいじってください。

とりあえず、これでドロップダウンメニューが設置できました。思ったよりは簡単でしたね。
あとは自分のサイトに合わせてカスタマイズしてください。

 - jQuery