jQueryを利用したプルダウン（ドロップダウン）メニュー

昨日に引き続き、webdesigningからjQueryを使ったプルダウンメニューのメモ。
一昔前までは、プルダウンメニューを実装するには、自前で
ある程度書かなければならなかったような気がする。

今は、ライブラリが豊富で今回webdesに取り上げられたjQuery以外にもさまざまな
ライブラリで実装できる。
Flashしかり、jsしかり便利な時代になったもんだ。

ということで、またwebdesのソースをいじって晒す。

cssとjsの読み込み

[html]
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<!–[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]–>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdownPlain.js"></script>
[/html]
※IE7以前のブラウザに別途ie.cssを読み込ませる

コンテンツ部分

[html]
<h1>伊藤商店の全て</h1>
<ul class="dropdown">
<li><a href="#">お知らせ</a>
<ul class="sub_menu">
<li><a href="#">伊藤の一言</a></li>
<li><a href="#">今日の伊藤</a></li>
<li><a href="#">明日の伊藤</a></li>
</ul>
</li>
<li><a href="#">サポート</a>
<ul class="sub_menu">
<li><a href="#">ホームページ作りたいヒト</a></li>
<li><a href="#">フラッシュ作りたいヒト</a></li>
<li><a href="#">お茶を飲みたいヒト</a></li>
</ul>
</li>
<li><a href="#">ワークス</a>
<ul class="sub_menu">
<li><a href="http://ito.ter.jp">伊藤商店のwebサイト</a></li>
<li><a href="http://3lab.ter.jp">さんらぼwebサイト</a></li>
<li><a href="http://diary.ter.jp">日記</a>
<ul>
<li><a href="http://diary.ter.jp">イテル日記</a></li>
<li><a href="http://manual.ter.jp">マニュアル</a></li>
<li><a href="http://oneday.ter.jp">一日一問</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">アクセス</a></li>
</ul>
[/html]

以上。
ちなみに、webdesでは透過PNGを使用したアレンジ方法も
紹介されているので参考になるっす。

今回のサンプルはコチラ。