ナビゲーションメニュー（応用編Ⅱ）

今回は、li aの横幅を固定したタイプのナビゲーションを作ってみようと思います。

このタイプは、１つのli aに入りきる文字数を見計らいながら設定しなければいけません。今まで使ってきた文字列は入りきれなかったので、文字列を若干変えてfont-size: 0.8em;で文字サイズを変更、元々の設定でletter-spacing: の幅を変更していたのでletter-spacing: 0;でリセットしてli aに収まるように設定しました。

<div id="menu05">
<ul>
<li><a href="http://source-marine.net/css-mania">Home</a></li>
<li><a href="http://source-marine.net/cms/">CMS</a></li>
<li><a href="http://source-marine.net/source-branch/">ソースブランチ</a></li>
<li><a href="http://source-marine.net/homepage-recommendation/">HPのすすめ</a></li>
<li><a href="http://source-marine.net/">ソースマリン</a></li>
<li><a href="http://source-marine.net/production-rate/index.html">制作料金</a></li>
</ul>
</div>

#menu05 ul {

 width: 600px;
 margin-top: 2em;
 border-left: 1px solid #ccc;
}
#menu05 li {
 display: inline;
}
#menu05 li a {
 background: #ddd;
 width: 75px;
 height: auto;
 padding: 2px 10px;
 float: left;
 border-top: 1px solid #ccc;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 display:block;
 text-decoration: none;
 font-size: 0.8em;
 letter-spacing: 0;
 color: #333;
}
#menu05 li a:hover {
 background: #fff;
 border-right: 1px solid #ccc;
}

<a title="ナビゲーションメニュー（応用編２サンプル）" href="http://source-marine.net/css-mania/sample080921 " target="_blank">サンプル</a>

ナビゲーションメニュー（応用編Ⅰ）

前回までは、縦に項目が伸びていく縦軸のナビゲーションでしたが、今回はちょっとればるアップして横に項目を並べていく横軸のナビゲーションを作成します。

今回のポイントは、#menu04 li のdisplay: をinline;にして#menu04 li aのfloat: left;にすることで項目を横に並べることにあります。
更に横幅には限界があるので１つの項目に対して「どれだけの横幅を取るか？」を考慮しなければいけません。これには、「各項目の横幅を同じサイズに設定するパターン」、「各項目の文字列に合わせて大きさをautoで一つ一つ設定するパターン」、「項目１つ１つに横幅を設定するパターン」などなどがあります。
今回は、「各項目の文字列に合わせて大きさをautoで一つ一つ設定するパターン」を作ってみます。横幅の関係でメニュー項目の文字列を若干変更しています。

#menu04 ul {
 width: 600px;
 border-left: 1px solid #ccc;
}
#menu04 li {
 display: inline;
}
#menu04 li a {
 background: #ddd;
 width: auto;
 height: auto;
 padding: 2px 10px;
 float: left;
 border-top: 1px solid #ccc;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 display:block;
 text-decoration: none;
 color: #333;
}
#menu04 li a:hover {
 background: #fff;
 border-right: 1px solid #ccc;
}

サンプル

以上で完成です。