jQueryでスクロールについてくるサイドメニューを作る(exflexfixedプラグイン)

jquery

当ブログのサイドバーはマウススクロールについてくるようになっています。
当ブログのサイドバーは、exflexfixedプラグインを使って、スクロール固定しています。

[スポンサーリンク]

マウススクロールにあわせてついてくるメニューは、最近のブログでよくみかけます。
当ブログでは、独人のメニューを追従型にしていますが、いいねボタンやはてブ数の表示に追従型を使っているブログの方が多いように思います。

この章でやること

exflexfixedプラグインを使った、追従型メニューの作成方法を紹介します。

exflexfixedプラグインをダウンロードする

exflexfixedプラグインを取得します。
ダウンロードは本家GitHubからどうぞ。
exflexfixed1

exflexfixedプラグインを使ったサンプルソース


<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>exflexfixedのサンプル</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="./js/jquery.exflexfixed-0.3.0.js"></script>

<!-- スクリプト部分 -->
<script type="text/javascript">
/* メニュータブ */
$(function() {
    $( "#tabs" ).tabs();
});

/* メニュータブ固定 */
$(function() {
	$('#tabs').exFlexFixed({
		container : 'body'
	});
});
</script>

</head>

<!-- HTML部分 -->
<body bgcolor="#e2e2e2">
		<div class="contents-wrapper">
			<div class="main-contents-wrapper">
				<div class="main-contents">
					<h3>サイドバーがスクロールについてきます。</h3>
						<div>
						<p>test test test!!</p>
						</div>
				</div>
			</div>
			<div class="ext-contents-wrapper">
				<p>このサイドメニューがスクロールでついてきます。</p>
				<div id="tabs">
					<ul>
						<li><a href="#tabs-1">tab1</a></li>
						<li><a href="#tabs-2">tab2</a></li>
						<li><a href="#tabs-3">tab3</a></li>
					</ul>
					<div id="tabs-1">
						<a href="#" title="test">aaaaaaaaaa</a>
					<div id="tabs-2">
						<a href="#" title="test2">test2</a>
					</div>
					<div id="tabs-3">
						<a href="#" title="test3">test3</a>
					</div>
				</div>
			</div>
		</div>

</body>
</html>

デモ

実際に動かすことが出来ます

解説

15行目の「$( "#tabs" ).tabs();」は、jQuery UIのtabsです。
追従型メニュー自体は、jQuery UIのtabsで表現しています。

19行目の「$('#tabs').exFlexFixed()」で、サイドメニューがスクロールについてくる設定になります。

さいごに

「jexflexfixedプラグイン」は、当ブログでも使っています。
スクロールについてくるメニュー(追従型メニュー)は、個人的には使い勝手が良いように感じます。
ブログとかに追従型メニューがあると、少しだけテンションあがります。

追従型メニューは、見栄えがよくなるというよりは、単純に使い勝手が良いと思います。
個人ブログでよく見かけますが、企業サイトやECサイトでも流行ってくれると嬉しいです。

それでは!