ケンズキューブ - javascriptとCSS（スタイルシート）を利用したタブメニューの作り方

yahooのトップページのニュース欄などにも使われているタブメニュー。
このサイトのトップページ右側にもあるjavascriptとCSSを使ったタブメニューの作り方。
実際ものすごく簡単です！

わかりやいようにサンプルソース内にjava、cssのすべてを記述しています。
たった一つのhtmlファイルでOK！

気になる人はjavaとcssを外部に置くとスマートですね。

サンプルはこちら→

以下がサンプルソースです。シンプルですね～＾＾
無駄な記述を極力省きました（汗
たったこれだけです＾＾

head部に記述（クリックで全選択）

</script>
<style type="text/css">
* {
margin:0;
padding:0
}
img {
border:0
}
h1 {
font-size: 0.8em;
color:#69F;
padding-bottom:10px;
}
#tab-wrapper {
width:300px;
margin: 0 auto;
text-align: left;
padding-top:30px;
}
#tab-a1 {
border-left: 1px solid #ccc;
}
#tab li {
float: left;
width: 64px;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
list-style-type: none;
}
#tab li a {
display: block;
width: 60px;
color: #777;
text-align: center;
text-decoration:none;
font-size:10px;
padding:2px;
}
#tab li a:hover, #tab li.present a {
background-color:#768AE9;
color: #fff;
}
#news1, #news2, #news3{
clear:both;
border:1px solid #cccccc;
padding:5px;
height:160px;
font-size:13px;
color:#666;
}
</style>

ここまでをhead部分に記述します。
まぁこの部分は外部に置いたほうがスマートだったりしますが・・・。

以下をbody内に記述すればOK。
一番下のjavaの記述部分はとにかく一番下に置きましょう。
じゃないと反映されません。

body部に記述（クリックで全選択）

javaの記述は2箇所だけです。
CSSで好きなようにカスタマイズできます。
IDのtab-wrapperで全体の幅を指定しているので、数値を変えれば幅を自由に変えられます。

また、これは単純にスタイルシートだけで実現していますが、画像等を使うとさらにかっこよくなりますね。

トップページのタブメニューはタブ部分に背景画像を設定しています。
参考までにこんな感じ。

また、メニューの数を増やすのも簡単です。
①リスト部分に項目を付け足します。

(例
　

②スタイルシートの#news1, #news2, #news3の部分に#news4を付け足す。
例）news1, #news2, #news3,#news4

③一番下のjavaの部分にも付け足します。（カンマを付け忘れないように！news4の部分（最後尾）には付けません）
例）

たったこれだけで増やせます！簡単しょ！？!(^^)!