垂直にスクロールさせるメニューをJavaScriptで「Horizontal Scroll Menu with jQuery」

垂直にスクロールさせるメニューを、印象的にJavaScriptで作ります。
via:Horizontal Scroll Menu with jQuery

sponsors

使用方法

Horizontal Scroll Menu with jQueryからファイル一式をダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(document).ready(function() {	
	//マウスオーバー/アウト時の色t
	var colorOver = '#31b8da';
	var colorOut = '#1f1f1f';

	//マウスオーバー時の余白
	var padLeft = '20px';
	var padRight = '20px';
	
	//デフォルト余白
	var defpadLeft = $('#menu li a').css('paddingLeft');
	var defpadRight = $('#menu li a').css('paddingRight');
		
	//メニュークリック時の動作
	$('#menu li').click(function () {
		window.location = $(this).find('a').attr('href');		
	}).mouseover(function (){		
		$(this).find('a')
		.animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )		.animate( { backgroundColor: colorOver }, { queue:false, duration:200 });
	}).mouseout(function () {
		$(this).find('a')
		.animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
		.animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
	});	
	
	$('#sidebar').mousemove(function(e) {
		var s_top = parseInt($('#sidebar').offset().top);
		var s_bottom = parseInt($('#sidebar').height() + s_top);	
		var mheight = parseInt($('#menu li').height() * $('#menu li').length);
		var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
		$('#menu').animate({top: top_value}, { queue:false, duration:500});
	});
});
</script>
上記を記述後、メニューを以下のように書けば小気味よくスクロールするメニューの完成です。

<div id="sidebar">
	<ul id="menu">
		<li><a href="/index.html">MENU 1 <</a></li>
		<li><a href="/index.html">MENU 2 <</a></li>
		<li><a href="/index.html">MENU 3 <</a></li>
		<li><a href="/index.html">MENU 4 <</a></li>
		<li><a href="/index.html">MENU 5 <</a></li>
	</ul>
</div>
また見た目はCSSで以下のようにします。

<style>
#sidebar {height:400px;overflow:hidden;position:relative;}
#menu {width:100%;list-style:none;padding:0;margin:0;top:0;position:relative;height:100%;width:300px;}
#menu li {padding:10px 0;text-align:right;display:block;cursor:hand;cursor:pointer;}
#menu li a {background:url() repeat #1f1f1f;color:#ddd;font-family:helvetica, arial, verdana;font-size:9px;font-weight:900;display:inline;padding:20px 8px 5px 20px;
text-decoration:none;}
#menu li span {font-family:georgia, arial;font-size:9px;color:#464646;}
</style>

サンプル

Javascriptサンプルページ一覧
skuare.net

sponsors