イテルの一日一問

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

イテル on 07 25, 2009

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

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

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

cssとjsの読み込み

	<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>

※IE7以前のブラウザに別途ie.cssを読み込ませる

コンテンツ部分

<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>

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

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

Web Designing (ウェブデザイニング) 2009年 08月号 [雑誌]

• 発売元: 毎日コミュニケーションズ
• 価格: ￥ 1,280
• 発売日: 2009/07/18

posted with Socialtunes at 2009/07/26