昨日に引き続き、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

web designing（以降、webdes）の09年8月号より、自分でコピペできるようにメモ。
webdesではjQueryの特集が組んであり、これは私も将来使うのではないかと思う項目がたくさんあった。

ちなみに追従するメニューのことを、プロはフローティングメニューというらしい。
さっそくwebdesのコードをさらしてみる。
別途jQueryはダウンロードする必要があるのであしからず。

ヘッダーにcssとjQueryを読み込む

<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.dimensions.js"></script>
<script type="text/javascript" src="js/livefloatingmenu.js"></script>

コンテンツとメニュー

<div id="contents">
	<h1>フローティングメニュー</h1>
	<p>ほげコンテンツ</p>
</div>
<div id="menu">
	<h2>メニュー</h2>
	<ul>
		<li><a href="#">メニュー1</a></li>
		<li><a href="#">メニュー2</a></li>
		<li><a href="#">メニュー3</a></li>
		<li><a href="#">メニュー4</a></li>
		<li><a href="#">メニュー5</a></li>
	</ul>
</div>

JS：livefloatingmenu.js

var name = "#menu";
var menuYloc = null;
$(function(){
	menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")));
	$(window).scroll(function () {
		offset = menuYloc+$(document).scrollTop()+"px";
		$(name).animate({top:offset},{
			duration:350,
			queue: false
		});
	});
});

durationの数値を変えることで、追従するタイミングを変更できる。
また、queueをtrueに変更すると良くわからん動きをする。

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

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

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

posted with Socialtunes at 2009/07/26