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

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

使用方法
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() {
//マウスオーバー/アウト時の色
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で「Horizontal Scroll Menu with jQuery」サンプル

sponsors

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

記事作成:
記事URL:

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