Web初心者がjQuery 「jMenu」を使ってドロップダウンのナビゲーションを実装する方法(サンプル付き)

グローバルナビで、サブメニューがあるときにスムーズにサブメニューが表示するサイトをいくつか見かけました。

今回は、web初心者向けにwebサイト上で配布しているスクリプトを使ってドロップダウンメニューを表示させるjQueryを実装します。

jMenu

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

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

ファイルをダウンロード STEP2

ファイルをダウンロード

Download Zip」がありますのでクリックしてください。

「DOWNLOAD」をクリックするとファイル一式をダウンロードできます。

データを解凍します STEP3

「DOWNLOAD」をサイトからダウンロードして、zipファイルを解凍します。

解凍すると
データを解凍します
データが入っています。

HTMLに実際に動く記述を書きます STEP4

「ulWidth :’150’」 この150という値は、ナビにカーソルを当てたときにドロップダウンメニューとして表示される横幅です。単位はpxなので200pxの横幅がほしかったら200と入力してください。

HTMLを設置します STEP5

ダウンロードしたHTMLとは少し変えています。

CSSを記述します STEP6

jMenuのjQueryファイルを付けます STEP7

jMenuのjQueryファイルを付けます

赤枠で囲った
「jMenu.jquery.min.js」
「jquery-ui.js」
をSTEP1でjQueryのコードの下に追加します。

※cssとjsファイルはご自身の環境に合わせてください

まとめ

[サンプル] ドロップダウンのナビゲーション

よくわからなかった人もいるかもしれませんが、ドロップダウンのナビゲーションはよく使われますのでぜひ試してみてください。

Web初心者がjQuery 「jMenu」を使ってドロップダウンのナビゲーションを実装する方法(サンプル付き)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*