Daily happenings, XHTML, CSS, MT, WP, Web, a memo, etc…

Yetiis

シンプルなタブメニュー「Yetiis」。
「Yetiis」のサイトから「yetii.js」をダウンロードし、スクリプトを読み込みます。

Yetiis

Yetiis

<script type="text/javascript">
var tabber1 = new Yetii({
id: 'tab-container-1'});
</script>

HTML
上記スクリプトを「yetii.js」で保存し読み込み

<script type="text/javascript" src="js/yetii-min.js"></script>
<script type="text/javascript" src="js/yetii.js"></script>
<div id="tab-container-1">
<ul id="tab-container-1-nav">
<li><a href="#sampletab1">メニュー1</a></li>
<li><a href="#sampletab2">メニュー2</a></li>
<li><a href="#sampletab3">メニュー3</a></li>
</ul>
<div class="tab" id="sampletab1">
メニュー1の内容を記述
</div>
<div class="tab" id="sampletab2">
メニュー2の内容を記述
</div>
<div class="tab" id="sampletab3">
メニュー3の内容を記述
</div>
</div>

CSS

div#tab-container-1 ul {
 height: 30px;
 border-left: 1px solid #999;
 border-bottom: 1px solid #999;
}

div#tab-container-1 ul li {
 width: 100px;
 height: 29px;
 border: 1px solid #999;
 border-left: 0;
 border-bottom: 0;
 background-color: #ddd;
 float: left;
}

div#tab-container-1 ul li.activeli {
 height: 30px;
 background-color: #fff;
}

div#tab-container-1 ul li a {
 display: block;
 width: 100px;
 height: 25px;
 padding-top: 5px;
 color: #000;
 text-align: center;
}

div.tab {
 border: 1px solid #999;
 border-top: none;
 padding: 10px;
 background-color: #fff;
}