今日はリストとCSSを使ってナビゲーション用のタブを作ってみます。
少々長くなりますので興味の無い方はスルーしてください(笑)
まず最初にxhtmlファイルを作成します。
<div>タグでナビゲーションのボックスを作りますが記述は以下のようになります。
***************************************************************************
<div id=”navi”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Company</a></li>
<li><a href=”#” class=”active”>Business</a></li>
<li><a href=”#”>Careers</a></li>
<li><a href=”#”>Information</a></li>
</ul>
</div>
<div id=”main”>CSSでタブナビゲーションを作る</div>
***************************************************************************
ナビゲーション部分のボックスはID:navi 本文部分のボックスはID:mainとしました。
現在アクティブになっているページ(Business)のliはclass名:activeにしていますが
これは各ページごとに変わってきます。例えばHomeのページではHomeのliに
class=”active”を設定するわけです。
リンクはダミーリンクで#を入れていますが実際はリンク先のアドレスを入れてください。
ただしこれではリスト形式で以下のように文字が表示されるだけです。