[javascript] ソース配布。ナビゲーションメニューとしてなど。

ウェバーを作っている途中で副産物として出来たのでナビゲーションメニューのソースを配布します。

ナビゲーション?

えーと。

唐突な質問ですが、ホームページ。
サイドメニューってどうします?
右置きにします?
左置きにします?

本ブログはご覧のとおり、左側に置いてます。
左に置いているのはいいのですが、縦方向に長くなってて面倒ですし、目に入りませんよね。

で、これです。

いつも本ブログを読まれている方ならお気づきかもしれませんが、ちょっと細工を施しました。

画面の右に見えていると思いますが、ちょっとマウスを乗せてみてください。

こんなふうになりました。

この新しく出てきたものは、同じページの中にある左サイドメニューの一覧です。
ここをクリックすると、ページ移動ではなく、画面のスクロールになります。
行き先は、クリックしたタイトルのメニューがある場所です。

で、ソースコードですが、その前に。

必要なものは、jQueryと下記に示すソースをコピペるだけです。
CSSもjQueryで指定してます。
画像は使いません。

ソースは自由に使ってくださって構いません。
基本的にソース嫁です。
最初の、var setting = {} だけ変えれば同じような感じで使えます。
凝るなら下のほうのスタイルあたりをいじってみてください。

【サブのターゲットをjQueryのセレクタで指定】
このコメントの箇所ですが、ここで、jQueryのセレクタを書きます。
ってことは?
サイドメニューに限る必要もないわけです。
ページ内のもっと別の場所にも移動させたいなら、そのようにセレクタを書けばOKです。

// 別途、jQueryを読み込む必要があります。

jQuery.fn.extend({
	aultaHeight : function(){
		if (this.get(0) == window){
			return (jQuery.browser.webkit ? this.get(0).innerHeight : this.height());
		} else {
			return this.height();
		}
	}
});

jQuery(document).ready(function(){
	if (document.getElementById('auto-scroller')) return;
	//	設定
	var setting = {
		main : {
			//	▲▼をクリックした時の移動位置(scrollTop)
			scroll : {
				top : 0,
				bottom : jQuery('#footer').offset().top - 800
			},
			//	▲▼の間に含めるリンク
			links : {
				top : '/',
				php : '/category/php/',
				wp : '/category/wordpressblog/'
			}
		},
		//	マウスオーバー時に表示
		sub : {
			//	サブを使わない場合はfalse
			use : true,
			//	サブのターゲットをjQueryのセレクタで指定
			selector : '#primary h3.widget-title',
			//	ターゲットクリック時、本来の移動位置からずらす距離
			move : 50
		}
	};
	//	ここから下は変更不要。
	jQuery('body')
	.append(
		jQuery('<div>')
		.attr('id', 'auto-scroller')
		.addClass('cbox')
		.append(
			jQuery('<a>').text('▲')
			.click(function(){
				jQuery('html,body').animate({ scrollTop: setting.main.scroll.top }, 'slow', null);
			})
		)
		.append(function(){
			var r = jQuery('<div>');
			for (var key in setting.main.links){
				r.append(
					jQuery('<a>').text(key).attr('link', setting.main.links[key])
					.click(function(){
						document.location.href = jQuery(this).attr('link');
					})
				);
			}
			return r.children();
		})
		.append(
			jQuery('<a>').text('▼')
			.click(function(){
				jQuery('html,body').animate({ scrollTop: setting.main.scroll.bottom }, 'slow', null);
			})
		)
		.append(
			jQuery('<div>').attr('id', 'auto-scroller-sub')
		)
	);
	(function(){
		if (setting.sub.use){
			var div = jQuery('<div>')
				, counter = 1;
			jQuery(setting.sub.selector)
			.each(function(){
				var j = jQuery(this)
					, classNm = 'auto-scroller-sub-' + (counter++);
				j.addClass(classNm);
				div.append(
					jQuery('<a>').attr('href', '#').text(j.text())
					.addClass(j.parent().hasClass('current') ? 'current': '')
					.click(function(){
						jQuery('html,body').animate({ scrollTop: jQuery('.' + classNm).offset().top - setting.sub.move }, 'slow', null);
					})
				);
			});
			jQuery('#auto-scroller-sub').append(div);
		} else {
			jQuery('#auto-scroller-sub').remove();
		}
	})();
	//	スタイル
	jQuery('#auto-scroller')
	.css({
		position : 'absolute',
		right : '3px'
	})
	.find('a')
	.css({
		display : 'block',
		backgroundColor : '#80AAFF',
		color : 'white',
		padding : '8px 10px',
		cursor : 'pointer',
		border : 'solid 2px white',
		textAlign : 'center'
	})
	.hover(
		function(){jQuery(this).css({backgroundColor : '#9ACD32'});},
		function(){jQuery(this).css({backgroundColor : '#80AAFF'});}
	)
	;
	//	サブのスタイル
	if (setting.sub.use){
		jQuery('#auto-scroller-sub')
		.css({
			position : 'absolute',
			display : 'none',
			padding : '0 8px 0 0'
		})
		.find('div')
		.css({
			position : 'relative',
			overflow : 'auto',
			overflowX : 'hidden',
			overflowY : 'auto',
			padding : 0,
			margin : 0
		})
		.height(250)
		.find('a')
		.css({
			whiteSpace : 'nowrap',
			margin : 0
		})
		;
		jQuery('#auto-scroller-sub .current').css('color', 'black');
	}
	//	イベント
	jQuery(window)
	.scroll(function(){
		jQuery('#auto-scroller').hide();
		setTimeout(function(){
			var w = jQuery(window);
			jQuery('#auto-scroller')
			.css('top', w.scrollTop() + (w.aultaHeight() - 130) / 2)
			.show(200);
		}, 700)
	});
	if (setting.sub.use){
		jQuery('#auto-scroller')
		.hover(
			function(){
				var jq = jQuery('#auto-scroller-sub')
					, w = jQuery('#auto-scroller');
				jq
				.css({
					top : ((w.aultaHeight() - jq.height()) / 2),
					right : jQuery('#auto-scroller').width()
				})
				.show();
			},
			function(){
				jQuery('#auto-scroller-sub').hide();
			}
		);
	}
	//	初期実行
	jQuery(window).scroll();
});

広告