なかなかいい感じに動くプラグインです。下記のサイトからダウンロードできます。
http://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorial
ダウンロードしたフォルダの、「ｊｓ」から、jquery.scrollTo.jsをhtmlで読み込みます。cssは、とりあえず、ダウンロードしたサンプルhtmlの<style>タグの中のものをコピペで良いでしょう。
その際、cssのバックグラウンドで指定されている画像のパスを直さないといけません。ダウンロードしたてのサンプルhtmlの、71行目と、79行目に書かれている部分です。
htmlは、下記の感じです。
<body>
<div id=”scroller-header”>
<a href=”#panel-1″ rel=”panel”>Populars</a>
<a href=”#panel-2″ rel=”panel”>Comments</a>
<a href=”#panel-3″ rel=”panel”>Recents</a>
<a href=”#panel-4″ rel=”panel”>Categories</a>
</div>
<div id=”scroller-body”>
<div id=”mask”>
<div id=”panel”>
<div id=”panel-1″>
<ul>
<li>Simple JQuery Image Slide Show with Semi-Transparent Caption</li>
</ul>
</div>
<div id=”panel-2″>
<ul>
<li>30 Javascript Menu Plugins and Scripts</li>
</ul>
</div>
<div id=”panel-3″>
<ul>
<li>CSS and Web Gallery List : Promote and Increase your Website Traffic</li>
</ul>
</div>
<div id=”panel-4″>
<ul>
<li>ajax</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
青字の部分が、タブの部分になって、赤字の部分のid=panel-1～panel-4が、本文になります。<div>タグで括られている部分ですな。ちなみに、別に<ul>タグを使わずに、<p>でも動きました。
後は、jsで下記を書けば動くはず。
$(function() {
$(‘#mask’).css({‘height’:$(‘#panel-1′).height()});
$(‘#panel’).width(parseInt($(‘#mask’).width() * $(‘#panel div’).length));
$(‘#panel div’).width($(‘#mask’).width());
$(‘a[rel=panel]‘).click(function () {
var panelheight = $($(this).attr(‘href’)).height();
$(‘a[rel=panel]‘).removeClass(‘selected’);
$(this).addClass(‘selected’);
$(‘#mask’).animate({‘height’:panelheight},{queue:false, duration:500});
$(‘#mask’).scrollTo($(this).attr(‘href’), 800);
return false;
});
});
こんな感じになります。
上のタブ部分をクリックすると、横にスライドして次を表示します。
Comments