ウェブ、ショウジン

jQueryプラグインのdroppyを使ってプルダウン・メニューを実装

2011-10-13
Category
jQuery

cssでの実装という手もあるけれど、今回はJavaScriptで。ざざっと調べたらdroppyというjQueryプラグインがけっこう有名で好評でもあったので、これでやってみる。(IE6でも問題なく動作)

デモページ

droppyをダウンロード
Downloadからdroppy-0.1.2.zipをダウンロード。

ダウンロードしたzipファイルを展開して出来たフォルダ内のsrc/javascripts/jquery.droppy.jsがプラグイン本体なので、これを使用。

jQuery本体と合わせて使用するhtmlに読み込み、機能させるための記述もする。

jQuery本体とdroppyを読み込む

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.droppy.js"></script>
<script type="text/javascript">
	$(function() {
		$("#gnavi").droppy();
	});
</script>

XHTML

htmlのほうはこんな感じに。リストタグを使って階層を作っていけば、それに合わせてドロップダウン・メニューも増えていく。

		<ul id="gnavi" class="cf">
			<li><a href="#"><img src="img/droppy/btn_home.png" width="104" height="34" alt="Home" /></a></li>
			<li>
				<a href="#"><img src="img/droppy/btn_category.png" width="104" height="34" alt="Category" /></a>
				<ul>
					<li><a href="#">日記</a> </li>
					<li><a href="#">お気に入り</a>
						<ul>
							<li>
								<a href="#">本</a>
								<ul>
									<li><a href="#">ミステリ</a></li>
									<li><a href="#">文学</a></li>
									<li><a href="#">ノンフィクション</a></li>
									<li><a href="#">時代小説</a></li>
								</ul>
							</li>
							<li><a href="#">アート</a></li>
							<li>
								<a href="#">映画</a>
								<ul>
									<li><a href="#">アクション</a></li>
									<li><a href="#">時代劇</a></li>
									<li><a href="#">ホラー・サスペンス</a></li>
									<li><a href="#">SF</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">お役立ちリンク集</a></li>
				</ul>
			</li>
			<li><a href="#"><img src="img/droppy/btn_archive.png" width="104" height="34" alt="Archive" /></a>
				<ul>
					<li><a href="#">1999年6月</a></li>
					<li><a href="#">1999年5月</a></li>
					<li><a href="#">1999年4月</a></li>
					<li><a href="#">1999年3月</a></li>
				</ul>
			</li>
			<li><a href="#"><img src="img/droppy/btn_contact.png" width="105" height="34" alt="Contact" /></a></a></li>
		</ul>

CSS

#gnavi{
	position:relative;
}

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

#gnavi ul{
	display:none;
	position:absolute;
	top:34px;
	left:0;
}

* html #gnavi ul{
	line-height:0;
}

#gnavi ul li{
	float:none;
}

#gnavi ul{
	width:120px;
	/* サイズを指定しておかないとIE7で出現の仕方がちょっと変 */
}

#gnavi ul ul{
	top:0;
	left:121px;
}

#gnavi ul a {
	display:block;
	background:#000;
	padding:0.5em;
	color:#fff;
	border-bottom:1px solid #fff;
	opacity:0.6;
	filter:alpha(opacity=60);
	zoom:1;
	line-height:1;
}

#gnavi ul a.hover{
	background:#444;
}

/* clearfix */
.cf{/zoom:1;}
.cf:after{content:'';display:block;clear:both;height:0;}

また、エフェクトにおけるスピードの調節も可能。

<script type='text/javascript'>
  $(function() {
    $('#nav').droppy({speed: 100});
  });
</script>

これだとけっこうビュンビュンって早くなる。

デモページ

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿