jQuery スクロールタブ式メニュー

jQuery スクロールタブ式メニュー

最近 Web関係のブログを見ているとサイドに、カテゴリや最近の記事やコメントなどがタブ式メニューになっているのを見かけたりします。

今回紹介するスクロールタブ式メニューはそこに使える jQuery のプラグインです。

demo page

…ここからが続き

スクロールタブ式メニュー 使い方・ダウンロード

jQuery Sliding Tab Menu for Sidebar Tutorialの「Donwload」から一式ダウンロードしてくる事が出来ます。

head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {	

	//Get the height of the first item
	$('#mask').css({'height':$('#panel-1').height()});	
	
	//Calculate the total width - sum of all sub-panels width
	//Width is generated according to the width of #mask * total of sub-panels
	$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
	
	//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
	$('#panel div').width($('#mask').width());
	
	//Get all the links with rel as panel
	$('a[rel=panel]').click(function () {
	
		//Get the height of the sub-panel
		var panelheight = $($(this).attr('href')).height();
		
		//Set class for the selected item
		$('a[rel=panel]').removeClass('selected');
		$(this).addClass('selected');
		
		//Resize the height
		$('#mask').animate({'height':panelheight},{queue:false, duration:500});			
		
		//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
		$('#mask').scrollTo($(this).attr('href'), 800);		
		
		//Discard the link default behavior
		return false;
	});
	
});
</script>

XHTML

jQuery スクロールタブ式メニュー

<ul id="tabNavi">
<li><a href="#panel-1" rel="panel" class="selected">カテゴリ</a></li>
<li><a href="#panel-2" rel="panel">最近の記事</a></li>
<li><a href="#panel-3" rel="panel">コメント</a></li>
</ul>

<div id="navi">

<div id="mask">
<div id="panel">

	<div id="panel-1">

	<!--/ #panel-1--></div>
    
	<div id="panel-2">

	<!--/ #panel-2--></div>
    
	<div id="panel-3">

	<!--/ #panel-3--></div>

</div>
</div>

<!--/ #navi--></div>

CSS

/* ul リセット */
#tabNavi, #panel ul { list-style:none; margin:0; padding:0; }
/* ナビゲーション部分 */
#tabNavi {
	background:url(images/header.gif) no-repeat;
	width:277px;
	height:24px;
	padding:35px 0 0 15px;
	font-weight: bold;
}
#tabNavi a {
	text-decoration:none; 
	color:#867863; 
	padding:0 2px;
}
#tabNavi li	{
	display: inline;
}
#tabNavi a:hover {
	text-decoration:none; 
	color:#4b412f
}
a.selected {
	text-decoration:underline !important; 
	color:#4b412f !important;
}
/* スクロールコンテンツ部分 */
#navi {
	background:url(images/body.gif) no-repeat bottom center;
	width:277px;
	padding-bottom:30px;
	margin-bottom: 50px;
}
#mask {
	width:250px;
	overflow:hidden;
	margin:0 auto;
}
#panel div {
float:left;

}
#panel ul {
list-style:none;
margin:0 5px;
padding:0;
}
#panel a	{
	color:#557482;
}
#panel ul li {
	padding:5px;
	border-bottom:1px dotted #ccc;
}
#panel ul li.last {
	border-bottom:none;
}

demo page

Comments

悩める会社員

悩める会社員

はじめまして。
いつも楽しく参考にさせていただいています。

この記事に掲載のjQueryを使ったスクロールタブ式メニューを作成中に行き詰ってしまったので、ご助言を頂きたく投稿させて頂きます。

記事にご掲載の通りにプラグインし、レイアウトも少しいじったのですが、#tabNavi内のa要素にcssでbackground-imageを表示させたところ、IE8以外のfirefoxやSafari等のブラウザでは表示されず悩んでいます。Firebugにてcss情報を見たところbackground-image自体の記述が消えていました。皆目検討がつかず、素人ながらjs内を読んでみたのですが無駄でした。

もしお時間ございましたらご助力の程お願いします。長々と失礼しました。

2010年07月03日 15:31

MIYA

MIYA

やはり競合が問題だったんですね!問題が解決出来てよかったです^^

2009年07月07日 23:29

tsutomu

tsutomu

今回もありがとうございました。
おかげさまで、両方とも使用できるように
なりました。

また、しっかりと記事を読んでなくてごめんさない。

2009年07月07日 00:24

MIYA

MIYA

Prototype を使ったLightBoxを使用しているならprototype.jsとjQuery.jsの競合の為ですね。

その場合はこちらの記事を参考に下さい。
http://www.css-lecture.com/log/javascript/029.html

2009年07月05日 21:36

tsutomu

tsutomu

2度目の投稿失礼致します。

現在、スクロールタブ式メニューを使用しているのですが
下記の様な使い方は可能でしょうか?



  【ここでLightBoxを使いたいです】

今のところ、LightBoxのjsやcssとリンクさせると
スクロールが機能しない様になってしまいました・・・

アドバイス頂けると幸いです。

2009年07月03日 13:37

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article