[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();
});
javascript
Copy