このページと同じメニューバー

質問

このページの上部にある『コミュニティー』『ビデオ』『グランプリ』『OK CLIP』のメニューみたいなオレンジのグラデーションになっているバーはどうやって作ればいんでしょうか？このメニューのようにテキストで認識されるようにしたいです。

回答No.1

tuxhiro

このページのメニュー部分のhtmlとスタイルシートを書いてみました
参考にされてはいかがですか？
実証はしていないのでコードそのままです
肝の部分は▲を入れておきます

<!-- html部 -->
<div id="ok_tabs">
<ul>
<li id="tab_community" class="tab_service2"><a href="http://okwave.jp" >コミュニティー</a></li>
<li id="tab_video" class="tab_service2"><a href="http://video.okwave.jp" >ビデオ</a></li>
<li id="tab_gp" class="tab_service2"><a href="http://gp.okwave.jp" >グランプリ</a></li>
<li id="tab_clip" class="tab_service2"><a href="http://service.okwave.jp/okwave/okclip/" >OK CLIP</a></li>
<li id="tab_company" class="tab_service2 last"><a href="http://www.okwave.co.jp/?w=1" >法人サービス</a></li>
</ul>
</div>

/* スタイルシート */
#ok_tabs ul {
margin:0;
padding:0;
}
#ok_tabs ul li.tab_service2 {
float:left;
margin:0;
padding:0;
font-size:14px;
list-style-type:none;
background-image:url(http://service.okwave.jp/css/images/template/navi_bg.gif);　▲
background-repeat:repeat-x; 　▲
font-weight:bold;
line-height:26px;
text-align:center;
color:#FFFFFF;
}
#ok_tabs ul li a {
text-decoration:none;
color:#fff;
display:block; 　▲
}
/* for firefox */
:root #ok_tabs ul li a {
height:32px;
padding-top:1px;
}
#ok_tabs ul li.last {
margin:0;
padding:0;
float:right;
}
#ok_tabs ul li a:hover {
text-decoration:none;
color:#fff;
display:block; 　▲
background-image:url(http://service.okwave.jp/cssimages/template/navi_bg_off.gif); 　▲
background-repeat:repeat-x; 　▲
}
#ok_tabs ul li#tab_community { text-align:center;}
#ok_tabs ul li#tab_video { text-align:center:}
#ok_tabs ul li#tab_gp { text-align:center;}
#ok_tabs ul li#tab_clip { text-align:center;}
#ok_tabs ul li#tab_company { text-align:center;}

お礼

大変助かりました。
これを基に色々作ってみます。
ありがとうございました。