gooodmark

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

516bookmark

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