位置を固定したメニューを作るjQueryプラグイン「stickUp」

位置を固定したメニューを作るjQueryプラグイン「stickUp」サンプル
WEBサイトのトレンドである縦長ページにおいてメニューを上部に固定することが多くなっています。
これにより、現状どこを見ているのか、またどこまでページが続くのかなど明示できユーザーにとって優しくなります。
stickUp - a free jQuery Pluginにより簡単に導入できます。

使用方法 下記のようなメニューがあったとします。
<div class="navbar">
<ul class="navbar-nav">
<li class="menuItem active"><a href="#home">Home</a></li>
<li class="menuItem"><a href="#features">導入方法</a></li>
<li class="menuItem"><a href="#news">サンプル</a></li>
</ul>
</div>

これに導入するため、まずはstickUp - a free jQuery Pluginからファイル一式をダウンロード。
そして、下記のように記述します。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="stickUp.js"></script>
<script>
jQuery(function($) {
$(document).ready(function() {
$('.navbar').stickUp({ parts: {
//メニューのhrefと同じにする
0:'home',
1:'features',
2: 'news' },
itemClass: 'menuItem', //メニューのclass名
itemHover: 'active' //アクティブ時のclass名
});
});
});
</script>

最後に上記に対応するCSSを書いてレイアウトを整えれば完成です。

位置を固定したメニューを作るjQueryプラグイン「stickUp」サンプル

sponsors

「位置を固定したメニューを作るjQueryプラグイン「stickUp」」をシェアする

記事作成:
記事URL:

TOP > > > 位置を固定したメニューを作るjQueryプラグイン「stickUp」