02
24
スタイルシートでおしゃれな横メニューを設置
2008-02-24
このような横メニューがたくさん紹介されています。一応ソースも載せておきます。まずは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;
}
画像とこのサンプルはこちらから取得してください。
