縦タブを作る

これまで横のタブデザインは何回か作ったけど、縦のタブデザインを初めて作ったのでメモっておく。

DOCTYPEは、XHTML1.0 Transitional で作ってます。
タブ部分横幅固定でコンテンツ部分はリキッド。

まず、タブとコンテンツをマークアップします。

<div class="tabWrap">
  <ul class="tabList">
    <li class="tab">hogehoge</li>
    <li class="currentTab">foo</li>
    <li class="tab">bar</li>
  </ul>
</div>

<div class="inputArea">
  <span>Tab Contents</span>
  <p>contentscontentscontentscontents</p>
</div>

次に、タブとコンテンツが横並びになるようにスタイルを指定します。
今回はカレントタブとコンテンツを重ねて見せたかったので、タブに「position: absolute」を指定し、コンテンツにネガティブマージンを指定することで、カラム落ちを防ぎつつリキッドに表示するようにしました。

div.container {
  clear: both;
  position: relative;
}
div.stepWrap {
  position: relative;
}
ul.stepArea {
  position: absolute;
  list-style: none;
  left: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  font-size: 110%;
}
div.inputArea {
  border: 3px solid #73b2bd;
  margin-left: 251px;
  background-color: #fff;
}

続いて、カレントタブが分かるようにスタイルを指定します。
カレントタブ以外のタブの文字色、背景色を暗めに指定すると、差異が分かりやすくなります。
さらにカレントタブの枠線を太くして、コンテンツの枠線もカレントタブと同じ太さ、色に指定します。

li.step {
  width: 250px;
  background-color: #DDDDDD;
  border-collapse: collapse;
  border: 1px solid #C0C0C0;
  border-right: none;
}
li.currentStep {
  width: 251px;
  background-color: #FFFFFF;
  border: 3px solid #73B2BD;
  border-right: none;
  vertical-align: middle;
  z-index: 10;
}

カレントタブとコンテンツをボーダー分重ねることで、くっついてるように見せて、カレントタブとコンテンツとの結びつきを分かりやすくしたいなーと思いました。
そこで、タブ全体であるulタグに「position: absolute」を指定し、カレントタブ(li.currentTab)のwidthをボーダー分だけ多めに取ってあります。

とりあえず、IE6とFF3では大丈夫。