javascriptとCSSで超シンプルなプルダウンメニュー

久しぶりにFLASH以外のメモ。

たまに案件でグローバルメニューでプルダウンメニューを使用することがありますが
エフェクトなど何もない場合は自分で作成した方があとで拡張等しやすいので作成。

といっても本当にメインのボタンにロールオーバーしたらそれに対応するサブメニューがシンプルに出るのみ。
個人的にはこれぐらいシンプルなのが好きだが時間ができたときになにかエフェクトを付けれたらつけよう・・・

【サンプル】

ポイントとしては

プルダウンメニューがFLASHにかぶる場合は忘れずにflashをwmode:"transparent"にしておくこと（今回はswfobjectを使用）
CSSでちゃんとプルダウンメニューのBOXが一番上にくるようにz-indexで制御しておくこと
ul liをposition:relative;にul li ulをposition:absolute;にして最初はul li ul（サブメニュー）は非表示にしておく
親のリストがロールオーバーするとサブメニュ表示・ロールアウトするとサブメニュ非表示のJSを作成する

【transparentの仕方】

【CSS】

#gnavi{
	width:800px;
	height:30px;
	margin:0;
	position:relative;
	z-index:100; /* gnaviを最善面に */
}

#indexFlash{
	position:relative;
	z-index:1;
}

#gnavi ul li{
	position:relative;
	float:left;
}

#gnavi ul li ul{
	position:absolute;
	display:none; /* 最初は非表示に */
}

あとは下記のようにリストにロールオーバーしたら表示・非表示したい要素を第二引数で渡せばOK!

【html抜粋】

【js】

Pandama_pulldown_20091119.lzh