おすすめグッズや役立つ情報ブログ

Sedori Plan

jQuery

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ファイルはご自身の環境に合わせてください

まとめ

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

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

スポンサーリンク
  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-jQuery

Copyright© Sedori Plan , 2018 All Rights Reserved.