ラブ! Web開発

1.必要なファイルをダウンロードする。

下記サイトからファイルをダウンロードしてください。
http://plugins.jquery.com/project/droppy

使用するファイルは

・assets/jquery.js と
・javascript/jquery.droppy.js と
・stylesheets/droppy.css

を使用します。assets/jproject-page.css　と言うファイルも入っていますが、
これはデモページのスタイルシートになるので必要ありません。

2. HTMLにjsとcssを組み込む

をHTMLに組み込みます。できれば ”js/droppy.js” などとして、外部ファイルとしてhead部分で読み込んで下さい。

次にhead部分に下記ソースを組み込みます。

パスは使用サイトに合うように変えてください。

メニュー部分のhtmlは次のようになっています。
id名など変えるのであれば、droppy.cssファイルのid名も変更して下さい。

Top level 1
Top level 2

Sub 2 - 1

        Sub 2 - 2


            Sub 2 - 2 - 1

Sub 2 - 2 - 1 - 1
Sub 2 - 2 - 1 - 2
Sub 2 - 2 - 1 - 3
Sub 2 - 2 - 1 - 4


Sub 2 - 2 - 2

            Sub 2 - 2 - 3

Sub 2 - 2 - 3 - 1
Sub 2 - 2 - 3 - 2
Sub 2 - 2 - 3 - 3
Sub 2 - 2 - 3 - 4




Sub 2 - 3

これでドロップダウンメニューが実装されました。cssも非常にシンプルでカスタマイズもしやすいと思います。
是非活用して見て下さい（※ ie 6での検証は行っていないので使用する場合は自己責任でお願いします。）

次回はコレを使って自作のデモページを紹介したいと思います。