Dynamics.jsで重力感のあるドロップダウンメニュー

テキストを表示する

HTMLは普通にリストを２重にしてます。

HTML

<div id="global-nav">
	<ul id="global-nav-btn">
		<li><a href="#">Home</a></li>
		<li>
			<a href="#">Navi01</a>
			<ul>
				<li><a href="#">Navi01 A</a></li>
				<li><a href="#">Navi01 B</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Navi02</a>
			<ul>
				<li><a href="#">Navi02 A</a></li>
				<li><a href="#">Navi02 B</a></li>
				<li><a href="#">Navi02 C</a></li>
				<li><a href="#">Navi02 D</a></li>
			</ul>
		</li>
	</ul>
</div>

CSS

#global-nav ul {
	list-style: none;
}
#global-nav-btn {
	margin: 0 auto;
	padding: 0;
	color: #fff;
	width: 980px;
}
#global-nav-btn a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 10px;
}
#global-nav-btn a:hover {
	background: #434343;
}
#global-nav-btn>li {
	float: left;
	position: relative;
	margin: 0;
	width: 200px;
	display: block;
	cursor: pointer;
}
#global-nav-btn>li>a {
	padding: 15px 10px;
}
#global-nav-btn>li>ul {
	position: absolute;
	padding: 0;
	top: -300px;
	z-index: -1;
}
#global-nav-btn>li>ul>li a {
	display: block;
	color: #fff;
	background-color: #333;
	width: 200px;
}

JavaScriptの方はjQueryを使用しています。

JavaScript

(function($) {
	$(function() {
		var $gnav = $('#global-nav-btn>li');
		var navHeight = [];
		$gnav.each(function(){
			navHeight.push($('ul', this).height());
		});

		// 高さを取得
		for (var i=0; i<navHeight.length; i++) {
			if(navHeight[i]) {
				$gnav.eq(i).find('ul').css({
					'top': -navHeight[i] + 'px'
				});
			}
		}

		$gnav.hover(
			function(){
				var index = $(this).index();
				if(navHeight[index]) {
					dynamics.animate($('ul', this)[0], {
						top: 45
					}, {
						type: dynamics.gravity,
						duration: 800,
						elasticity: 200
					});
				}
			}, function() {
				var index = $(this).index();
				if(navHeight[index]) {
					dynamics.animate($('ul', this)[0], {
						top: -navHeight[index]
					}, {
						type: dynamics.linear,
						duration: 300
					});
				}
			}
		);
	});
})(jQuery);

オプションで「dynamics.gravity」で重力っぽい動きになるので、色々変えてみると面白いとおもいます。

Dynamics.js