スタイルシートでおしゃれな横メニューを設置

 CSSを使ったおしゃれな横メニューを紹介しているサイトを見つけたので紹介します。サンプルも提供されているので設置も簡単かと思います。

 このような横メニューがたくさん紹介されています。一応ソースも載せておきます。まずはbody部分です。表示しているページにはclass="current"を入れておきましょう。

<div class="blue">
 <div id="slatenav">
  <ul>
   <li><a href="/" title="レッツFC2ブログ" class="current">Home</a></li>
   <li><a href="http://weboook.blog22.fc2.com/blog-entry-56.html" title="ごあいさつ">ごあいさつ</a></li>
   <li><a href="http://weboook.blog22.fc2.com/archives.html" title="サイトマップ">サイトマップ</a></li>
   <li><a href="http://weboook.blog22.fc2.com/blog-entry-55.html" title="RSSについて">RSSについて</a></li>
   <li><a href="/" title="レッツFC2ブログ">Home</a></li>
  </ul>
 </div>
</div>
 でCSSは次のようになっています。それほどややこしくないかと思います。個人的に感じる問題点は高さの調節が難しい点でしょうか。
.blue #slatenav{
	position:relative;
	display:block;
	height:42px;
	font-size:11px;
	font-weight:bold;
	background:transparent url(images/blueslate_background.gif) repeat-x top left;
	font-family:Arial,Verdana,Helvitica,sans-serif;
	text-transform:uppercase;
}

.blue #slatenav ul{
	margin:0px;
	padding:0;
	list-style-type:none;
	width:auto;
}

.blue #slatenav ul li{
	display:block;
	float:left;
	margin:0 1px 0 0;
}

.blue #slatenav ul li a{
	display:block;
	float:left;
	color:#D5F1FF;
	text-decoration:none;
	padding:14px 22px 0 22px;
	height:28px;
}

.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{
	color:#fff;
	background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
}
 画像とこのサンプルはこちらから取得してください。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
素晴らしいです。
ずっと探していたのですが、ヨコメニュー使わせてもらいます。
【2008/06/30 21:43】 | なつみ #- | [edit]
はじめまして~。すごくいいですね。参考になりました。
【2009/05/04 04:17】 | ten #9L.cY0cg | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加