参考ファイルのうち、タブメニューのためのコアの部分のみを抜き出し。
尚、プルダウンメニューはhover時にdisplay:noneからblockに変更するようにしてやれば良い。
<html>
<head>
<style>
#tab li {
float:left;
list-style-type: none;
}
#contents {
width:500px; /*コンテンツ表示部分の幅*/
overflow: hidden;
background-color: green;
clear:both;
}
#contents ul {
width:1500px; /*コンテンツ全体の幅。記事*上のcontentsで決めた幅*/
}
#contents ul li {
float:left;
width:500px;
list-style-type:none;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
</ul>
</div>
<div id="contents">
<ul>
<li id="tab1" name="tab1">Tab1 is selected.</li>
<li id="tab2" name="tab2">Tab2 is selected.</li>
<li id="tab3" name="tab3">Tab3 is selected.</li>
</ul>
</div>
</body>
</html>
最終更新：2013年02月24日 16:54
