個別記事

前後の記事

ナビゲーション追加

この記事が属するカテゴリー
CSS Movable Type

ヘッダの下部にナビゲーションを付けてみました。JavaScriptのロールオーバーではなく、CSSで疑似クラスのhoverを使ってスワップ効果を出してみた。【追記 2004/12/14】 デザイン変更のため、現在は変わっております。

メンテナンスのし易さと、validなhtmlを目指して（笑）リストタグで作り、cssで成形します。ナビゲーションに"navi"というIDを振るという前提で、スタイルシートに下記を追加します。

#navi {
        height:1.4em;
        background-color: #676767;
        background-image: url(img/navi_bg01.gif);←ナビ全体にしく背景（幅は1px）
        background-repeat: repeat-x;←---------X軸にリピート
        border: solid #000000;
        border-width: 1px 0;
}
#navi ul {
        margin: 0;
        padding-left: 15px;
        list-style-type: none;
}
#navi li {
        float: left;←-------------------------縦の状態のリストを横に並べる
        font-family: Verdana,Sans-serif;
        font-size: x-small;
        font-weight: bold;
}
#navi li a{
        text-decoration: none;
        text-align: center;
        display: block;←----------------------ブロック化させてボタンの様にする
        width: 7em;
        padding: 0px 10px;
        color: #FFFFFF;
        border: solid #666666;←---------------これと下の２行は区切り線
        border-width: 0 1px 0 0;
        background-color: #676767;
        background-image: url(img/navi_bg01.gif);←----------------------幅1pxの画像
        background-repeat: repeat-x;
}
#navi li a:hover {←-----------------------------hoverでロールオーバー効果を出す
        text-decoration: none;
        color: #CCFFFF;
        background-color: #676767;
        background-image: url(img/navi_bg.gif);←--マウスONの時の背景（1pxの画像）を指定
        background-repeat: repeat-x;
}

追加したら、保存します。

次に、テンプレートのMain index（index.html）を開き、ヘッダー部分<div id="banner">の終了タグ</div>と<div id="center">の間に下記を追加します。

<div id="navi">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archives/2004/10/post_2.html">About</a></li>
<li><a href="/archives.html">Archive</a></li>
<li><a href="http://blog.with2.net/link.php/16454">BlogLanking</a></li>
</ul>
</div>

リストで作成すると、追加したい場合にも<li>hoge</li>の様に、簡単に追加できます。

2004-10-05T17:59:28+09:00 | コメント (1) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/17

"ナビゲーション追加"へのトラックバックはまだありません。

コメント

JeyramoXRu さんからのコメント

Hello sirs ;-)
Anybody can give me url to the XRumer's homepage?
Or maybe some information...

Thank you very much!!!

P.S. Вот уроды...

2008年10月18日 19:11

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)