クールな横並びメニューをテキストとCSSだけで簡単に作る方法　byシステム開発センター

GUIライブラリ実験室

GUIライブラリ実験室＞2008-04-17

クールな横並びメニューをテキストとCSSだけで簡単に作る方法

画像イメージとJavaScriptを使った画像置き換えのメニューはよく見かけます。今回は、JavaScriptを使わずテキストとCSSだけでクールな横並びメニューを作成する方法をご紹介します。テキストなのでコンテンツ変更の際など、柔軟に対応することができ非常に便利です。

Sample｜DownLoad

HTML

<ul id="globalNavi">
　 <li><a style="background:#D6D6D6" href="#">Home</a></li>
　 <li><a href="#">Product</a></li>
　 <li><a href="#">Contact</a></li>
　 <li><a href="#">BBS</a></li>
</ul>

※デフォルトにしたいメニューにstyle="background:#D6D6D6"

CSS

ul#globalNavi {
　　list-style:none;
　　padding-left:0;
　　margin-left:0;
　　width:100%;
}

ul#globalNavi:after {
　　height: 0;
　　visibility: hidden;
　　content: ".";
　　display: block;
　　clear: both;
}

ul#globalNavi li {
　　margin: 0;
　　padding: 0;
　　float: left;
　　width: 150px;
　　line-height: 1;
　　list-style-type: none;
}

ul#globalNavi li a {
　　display: block;
　　position: relative;
　　font-size: 12px;
　　color: #333333;
　　text-align: center;
　　text-decoration: none;
　　background-color: #EEEEEE;
　　padding: 10px;
}

ul#globalNavi li a:hover {
　　color: #000000;
　　background-color: #DDDDDD;
}