GUIライブラリ実験室

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

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

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

SampleDownLoad

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;
}




サポート対応エリア(オンサイト)

東京都、神奈川県、横浜市、千葉県、埼玉県、静岡県、山梨県

サポート対応エリア(オンライン)

全国対応