gooodmark

goodなWebサイトを厳選ブックマーク!デザインやディレクションの参考にどうぞ。

724bookmark

jQueryを使ったタブメニュー

よく使うタブメニュー(IE6もギリいける)。いろんなエフェクトは参考サイトで。
タブへのアンカーリンクも可能なので便利。

html(header)


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.ui.js"></script>
<script src="js/ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$('.tabs').tabs();
});
</script>

html


<div class="tabs">
<ul class="tabnav">
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
</ul>

<div id="tab1" class="tabBox">
<p>tab1</p>
</div>
<div id="tab2" class="tabBox">
<p>tab2</p>
</div>
<div id="tab3" class="tabBox">
<p>tab3</p>
</div>
</div>

css


ul.tabnav li {
float: left;
width: 32%;
margin: 0px 1% 0px 0px;
}

ul.tabnav li a {
display: block;
background: #f2f2f2;
line-height: 60px;
text-align: center;
}

ul.tabnav li.ui-tabs-selected a { background: #FFF; }

.tabBox {
position: relative;
top: 0px;
clear: both;
z-index: 10;
width: 80%;
margin: 0px;
padding: 10%;
background: #FFF;
}

.ui-tabs-hide { display: none; }

demo