jQuery UI の Tabs で、縦並びのタブ型メニューを作る方法。
実装例（サンプル）
メニュー １
メニュー 1 の内容。
このように、
タブを縦に並べることもできる。
メニュー ２
メニュー ２の内容。
メニュー ３
メニュー ３の内容。
メニュー ４
メニュー ４の内容。
メニュー ５
メニュー ５の内容。
実装例（サンプル）の動作について
「メニュー １～５」のタブメニューをクリックすると、クリックしたタブメニューの内容を開く。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>
JavaScript
<script>
jQuery( function() {
jQuery( "#sampleTabs" )
.tabs()
.addClass( "ui-tabs-vertical ui-helper-clearfix" );
jQuery( "#sampleTabs li" )
.removeClass( "ui-corner-top" )
.addClass( "ui-corner-left" );
} );
</script>
jQuery( function() {
jQuery( "#sampleTabs" )
.tabs()
.addClass( "ui-tabs-vertical ui-helper-clearfix" );
jQuery( "#sampleTabs li" )
.removeClass( "ui-corner-top" )
.addClass( "ui-corner-left" );
} );
</script>
CSS
<style>
<!--
#sampleTabs {
width: 50em;
font-size: 12px;
}
.ui-tabs-vertical {
width: 55em;
}
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left; width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left; width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px 0.2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display:block;
width: 10em;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 35em;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: 0.2em;
}
-->
</style>
<!--
#sampleTabs {
width: 50em;
font-size: 12px;
}
.ui-tabs-vertical {
width: 55em;
}
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left; width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left; width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px 0.2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display:block;
width: 10em;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 35em;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: 0.2em;
}
-->
</style>
HTML
<div id="sampleTabs">
<ul>
<li><a href="#sampleTabs-1">メニュー １</a></li>
<li><a href="#sampleTabs-2">メニュー ２</a></li>
<li><a href="#sampleTabs-3">メニュー ３</a></li>
<li><a href="#sampleTabs-4">メニュー ４</a></li>
<li><a href="#sampleTabs-5">メニュー ５</a></li>
</ul>
<div id="sampleTabs-1">
<h2>メニュー １</h2>
<p>メニュー 1 の内容。</p>
<p>このように、<br />タブを縦に並べることもできる。</p>
</div>
<div id="sampleTabs-2">
<h2>メニュー ２</h2>
<p>メニュー ２の内容。</p>
</div>
<div id="sampleTabs-3">
<h2>メニュー ３</h2>
<p>メニュー ３の内容。</p>
</div>
<div id="sampleTabs-4">
<h2>メニュー ４</h2>
<p>メニュー ４の内容。</p>
</div>
<div id="sampleTabs-5">
<h2>メニュー ５</h2>
<p>メニュー ５の内容。</p>
</div>
</div>
<ul>
<li><a href="#sampleTabs-1">メニュー １</a></li>
<li><a href="#sampleTabs-2">メニュー ２</a></li>
<li><a href="#sampleTabs-3">メニュー ３</a></li>
<li><a href="#sampleTabs-4">メニュー ４</a></li>
<li><a href="#sampleTabs-5">メニュー ５</a></li>
</ul>
<div id="sampleTabs-1">
<h2>メニュー １</h2>
<p>メニュー 1 の内容。</p>
<p>このように、<br />タブを縦に並べることもできる。</p>
</div>
<div id="sampleTabs-2">
<h2>メニュー ２</h2>
<p>メニュー ２の内容。</p>
</div>
<div id="sampleTabs-3">
<h2>メニュー ３</h2>
<p>メニュー ３の内容。</p>
</div>
<div id="sampleTabs-4">
<h2>メニュー ４</h2>
<p>メニュー ４の内容。</p>
</div>
<div id="sampleTabs-5">
<h2>メニュー ５</h2>
<p>メニュー ５の内容。</p>
</div>
</div>