jQuery たった7行でできる、シンプルな階層型メニュー

calendar

reload

jQuery たった7行でできる、シンプルな階層型メニュー

Webサイトで階層型メニューはよく使われる手法のひとつといえます。でもやり方は人それぞれ。CSSだけで実装する手法もありますが、JavaScriptライブラリとして最も浸透しているであろう jQuery を使って階層型メニューを作ってみました。しかも、たった7行!見た目はCSSで調整してもらえれば、汎用性もばっちりだと思うので参考にしてみてください。

1、jQuery を読込む

まずはjQueryを読込んでください。
ダウンロードするなり、なんなり好きなやり方でどうぞ。
jQuery

2、HTMLを書く

とりあえずこんな感じで。

3、CSSを書く

見た目の調整はここでします。
とりあえず今回はこんな感じで。

4、Javascriptを書く

たった7行!

ポイント

ポイントは3行目・5行目の、

の部分。
$(‘>ul’,this)でマウスオーバーした要素の子要素を指定する事ができるようです。
この書き方を知っておくだけで色んな事が、簡単にかけるようになると思います。

5、デモ

こんな感じになります。

以上です。前でも書きましたが、CSSで見た目を調整すれば汎用性がかなりきくと思いますので、参考にしてみてください。
ではでは。