グローバルナビゲーション(その1:基本スタイル)
最近すっかりオーソドックスになった、順序なしリスト(ul/li)を用いたグローバルナビゲーションを紹介します。

2年ほど前に書いた「ナビゲーションバー・シンプルタイプ」というエントリーは、アンカーテキストを並べた形式でしたが、グローバルナビゲーションの作り方についてコメントを頂きましたので、新たに作成してみました。
巷では、画像を用いたものやプルダウンメニューつきのグローバルナビゲーションをよく見かけるのですが、ここではテキストのみによるシンプルなグローバルナビゲーションを紹介します。
1項のサンプルコードは Movable Type のMTタグを埋め込んでいますが、MTタグを書き換えれば汎用的に使うことが出来ます。
動作は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 で確認しています。
1.テンプレートの設定
ヘッダの下にグローバルナビゲーションのマークアップ(青色)を追加します。
<div id="header">
<h1 id="blog-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<MTIfNonEmpty tag="BlogDescription"><p class="blog-description"><$MTBlogDescription encode_html="1"$></p></MTIfNonEmpty>
</div>
<div id="navi">
<ul>
<li><a href="<$MTBlogURL$>" title="Home">Top</a></li>
<li><a href="<$MTBlogURL$>about.html" title="about">About</a></li>
<li><a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a></li>
<li><a href="<$MTBlogURL$>link.html" title="Link">Link</a></li>
<li><a href="<$MTBlogURL$>search.html" title="Search">Search</a></li>
<li><a href="<$MTBlogURL$>contact.html" title="Mail">Mail</a></li>
</ul>
</div>
2.CSS 追加
下記のグローバルナビゲーション用スタイルをスタイルシートに追加します。
#navi {
border-bottom: 1px solid #669;
background: #fff;
height: 25px;
}
html > body #navi,
html > body #navi ul li a { /* for Safari */
height: 28px;
}
#navi ul {
margin: 0;
padding: 0;
list-style: none;
}
#navi ul li {
float:left;
border-right:1px solid #333;
width: 100px;
}
#navi ul li a {
display: block;
color: #333;
font-size: 75%;
text-align: center;
letter-spacing: 0.1em;
line-height: 2.3;
text-decoration: none;
}
#navi ul li a:link,
#navi ul li a:visited {
background: #fff;
}
#navi ul li a:hover {
color: #000;
background: #ccc;
}
全体に border を与えているので XHTML のマークアップが div の分だけ冗長になってしまっています。すいません。
また、IE6のテキスト部分以外にマウスオーバーを有効にする対策では height を用いていますが、#navi ul li a に position: relative; を与える方法もあります。
2007.12.28
タイトルを「ナビゲーションバー・リストタイプ」から「グローバルナビゲーション」に変更し、併せて本文も修正しました。
- サブカテゴリーリストを定義型リストでマークアップする
- CSS でブログ本文の画像だけをセンタリングする
- CSS の画像置換で画像にリンクを設定する
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
- RSS フィードにスタイルシート(CSS)を適用する
- 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
- サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
- 公開テンプレートにフッタを追加する(2カラム版)
- CSS の after 擬似要素で回り込みを解除する
- テンプレートカスタマイズ支援ツール Column Resizer
- サイドバーのタイトル背景をカラム幅にあわせて表示する
- 公開テンプレートのサイドバーのカラム幅を変更する
- JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ
- CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
- CSSでブログに影をつける(ドロップシャドウ)
- IE7 の CSS ハック
- CSSでブロックレベル要素をセンタリングする
- 3カラムレイアウトをナビゲーションバー部分に適用する
≫ ROYAL WING from 写真館"E-Revolution"
この船には思い出があるんです。 今のカミさんと結婚する前、彼女の誕生日にこの船... [続きを読む]
≫ ナビゲーションバー、メールフォームを設置しました。 from White Wing version2.0
ずっと設置したいと思っていたナビゲーションバーと、メールフォームを当blogに... [続きを読む]
こんばんは、はじめまして。
このメニューを利用したいのですけどもメニューの高さを変更したいのですけどもどの部分を操作すればよいでしょうか?素人質問で申し訳ありませんが、宜しくお願いいたします。
お手数おかけしました。
自己解決いたしました。
また、宜しくお願い致します。
>かんきちさん
こんばんは。
[1]と同じ方でしょうか?
であれば自己解決されたようでなによりです。
ではでは!

