TopCSS > 2007年6月
2007年6月28日

グローバルナビゲーション(その1:基本スタイル)

June 28,2007 2:11 AM
Tag:[, ]
Permalink

最近すっかりオーソドックスになった、順序なしリスト(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
タイトルを「ナビゲーションバー・リストタイプ」から「グローバルナビゲーション」に変更し、併せて本文も修正しました。

Comments [7] | Trackbacks [4]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3