2014
01/14

スクロールで隠れるナビゲーションメニューhidenavi.jsをjQueryで作りました

スクロールで隠れるナビゲーション

ページをスクロールすると、左側に固定したナビゲーションメニューがアニメーションで隠れ、コンパクトに収納されるJavaScript（以下、js）「hidenavi.js」を作りました。
jsの動作にはjQueryが必要です。

せっかく作ったので、ブログで公開しようと思います:)

1.動作の説明とデモ
2.ダウンロード
3.使い方
4.ご利用にあたって

1.動作の説明とデモ

JavaScriptの動作

hidenavi.jsは、ページをスクロールすることで、ページの左側に固定したナビゲーションメニューが、にゅーっとアニメーションし、隠れます。
隠れたナビゲーションメニューの代わりに、ナビゲーションメニューの位置を示す要素が表示されます。
その要素にマウスを乗せると、隠れたナビゲーションメニューが再びアニメーションで表示されます。また、スクロール位置を一番上まで戻しても、ナビゲーションは再表示されます。

デモページを作りましたので、ご覧ください。

デモページ内のデザイン、画像、写真についての改変・再配布は出来ません。ご了承下さい。

動作の確認

ブラウザでの動作の確認状況は以下の通りです。(2014/01/14　現在)

Internet Explorer 7～9
FireFox（Windows / Mac）
Google Chrome（Windows / Mac）
Safari（Mac）
Opera（Windows）

Internet Explorer6では、position:fixed;がサポートされていないため、動作しません。

また、デモページではjQuery v1.10.2を利用しています。
他のバージョンでの確認はしていませんので、ご了承ください。

2.ダウンロード

hidenavi.jsはこちらからダウンロードして、お使いください。

Download

3.使い方

HTML

hidenavi.jsはjQueryが必要です。

まず、このjsを使いたいHTMLの<head>要素内に、jQueryとhidenavi.jsを読み込みます。

<script type="text/javascript" src="jQueryのURL"></script>
<script type="text/javascript" src="hidenavi.jsのURL"></script>

固定したいナビゲーションメニューに、idを「nav」と指定します。
また、ナビゲーションメニューが隠れた後に表示させたい要素に、idを「nav_hover」と指定します。

指定するid名を変えたい場合は、js内の#nav、#nav_hoverという記述を、全て変更してください。

<div id="nav">
	<ul>
		<li><a href="">メニュー</a></li>
		<li><a href="">メニュー</a></li>
		<li><a href="">メニュー</a></li>
	</ul>
</div>
<div id="nav_hover">
	ナビゲーションメニューが隠れた後に表示させたい要素
</div>

JavaScript

hidenavi.js内の数値を変更して、ナビゲーションメニューが隠れるスクロール量と、ナビゲーションメニューの初期表示位置を調整します。
hidenavi.jsの最初の方をご確認ください。

$(function(){
	var scrollPosition = 100; //ナビゲーションメニューが隠れるスクロール量
	var navTopPosition = 20; //ページ内の上部より何px離れた位置にナビゲーションメニューを表示させるか

上記の、scrollPositionは、どれくらいスクロールをしたら、ナビゲーションメニューが隠れるかの調整をします。
navTopPositionは、ナビゲーションメニューを、ページ上部より何px離れた位置に表示させるかを設定します。

左固定ではなく、右固定にしたい場合

js内のleftという記述を、rightにしたら右側固定になります:)

$(function(){
	var scrollPosition = 100;
	var navTopPosition = 20;

	var navWidth = $( '#nav' ).width();
	var navHoverWidth = $( '#nav_hover' ).width();
	var flg = false;
	$('#nav').css({
		'position': 'fixed',
		'top': navTopPosition,
		'right': '0px'
	});
	$('#nav_hover').css({
		'position': 'fixed',
		'top': navTopPosition,
		'right': -navWidth
	});

	$(window).scroll(function(){
		if ($(window).scrollTop() > scrollPosition) {
			if(flg == false){
				flg = true;
				$('#nav').stop().animate({'right': -navWidth});
				$('#nav_hover').stop().animate({'right': '0px'});
			}
		} else {
			if(flg){
				flg = false;
				$('#nav').stop().animate({'right': '0px'});
				$('#nav_hover').stop().animate({'right': -navHoverWidth});
			}
		}
	});

	$('#nav_hover').hover(
		function (e) {
		   if(flg){
			   flg = false;
			   $('#nav').stop().animate({'right': '0px'});
			   $('#nav_hover').stop().animate({'right': -navHoverWidth})
		   }
		}
   );
});