テキストにあわせて伸縮する水平メニュー

このブログの上のほうにある横並びのメニューなんですが、IE6(InternetExplorer6)でみるとデザインがおかしいことにようやく気づきました。基本的にFirefox3とIE7で見られたらいいやという軽い感じで作っていたのでIE6でのチェックはしませんでした。

これじゃあ駄目ですよね。ってことでいろいろ試してみることにしました。

個人的な好みなんですが、メニューは画像にせずにテキストそのまま、きれいに縦横中央よせっていうのが好きです。そういうことで今回目指すところは次のとおり。

• テキストの横幅にあわせて伸縮
• ボタン全体をクリックできる
• 縦横中央にテキストを配置
• IE6でもIE7でもFirefox3でも同じように見える
• Operaは気にしない！

↓サンプル作ってみました。↓

サンプル

画像は使わずCSSのみでスタイル。実際にサイトに組み込むときは背景画像やまるっきり画像にしたりして使うことになるとは思います。

HTMLはいたってシンプルに。実際に組み込むことを考えてul要素をdivで囲っています。

<div id="Nav">
<ul class="clearfix">
<li><a href="#">HOME</a></li>
<li><a href="#">HTML&amp;CSS</a></li>
<li><a href="#">Javascript&Ajax</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>

水平メニューという一般的にはli要素をfloat:left;して、a要素をdisplay:block;って感じになると思います。あとはちょっとスタイルを追加して次のように↓。

#Nav { font-size: 1em; }
#Nav ul {
margin: 0px;
padding: 0px;
}
#Nav li {
list-style: none;
float: left;
}
#Nav a {
display: block;
margin: 0px 1px 0px 0px;
padding: 0px 10px;
border: 1px solid #0099FF;
color: #0099FF;
text-decoration: none;
text-align: center;
}
#Nav a:hover {
background: #FFACAC;
color: #990000;
}

これだけでもけっこうまともな「テキストにあわせて伸縮する水平メニュー」になるんですけど、IE6だとテキスト上しかクリックできないのでボツ。ボタン風メニューにしたいときはテキスト以外の領域もクリックできないと気持ち悪いです。

widthを指定するとあっという間に解決するんですけどね。でも、クリック領域を広げてくれる別の解決方法がありました。

それが#Nav aにfloat:left;を指定すること！。これだけでFirefox3とIE6が同じ動作をするようになりました。ちょっとボタン間隔がIEだけ開いてるのが気になるけど・・・。

あとは縦方向の中央にテキストをもってきたいのでline-heightを指定します。line-heightはたとえば値を30pxとするとボタンの高さも30pxになり、テキストも中央になってくれる優れもののプロパティです。

#Nav a {
float: left;
line-height: 30px;
}

というわけで上のコードを#Nav aに追加するのが1番よさげでした。

でも、このあとline-heightにあわせてheightも30pxにしたら、IEではなぜか縦並びになっちゃいました(￣へ￣|||) 。

ただの推測ですがIE6ではfloatした要素にwidthを指定せずにheightを指定すると親要素のwidthを引き継ぐか、autoになるってことでしょうか？
（サンプルの「#Nav aにheight:30px;を追加」をIE6でみてください）

サンプル

サンプル

関連する投稿

• 関連する投稿はありません。