ナビゲーションメニュー（基本Ⅲ）

今回はナビゲーションにボタンのような効果を付けてみます。

今回のポイントはborderプロパティでoff時にoutset、hover時にinsetを使う事でボタンのエンボス（出っ張り）のような表現を演出する事にあります。

<div id="menu03">
<ul>
<li><a href="http://source-marine.net/css-mania">ホーム</a></li>
<li><<a href="http://source-marine.net/cms/">コンテンツマネージメントシステム</a></li>
<li><a href="http://source-marine.net/source-branch/">>ソースブランチ</a></li>
<li><a href="http://source-marine.net/homepage-recommendation/">ホームページのすすめ</a></li>
<li><a href="http://source-marine.net/">ソースマリン</a></li>
<li><a href="http://source-marine.net/production-rate.html">制作料金</a></li>
</ul>
</div>

#menu03 ul {
 width: 210px;
}
#menu03 li a {
 background: #ddd;
 width: 200px;
 height: 25px;
 padding-top: 5px;
 padding-left: 10px;
 border: 2px outset #ccc;
 display:block;
 text-decoration: none;
 color: #333;
}
#menu03 li a:hover {
 background: #fff;
 border: 2px inset #ccc;
}

どうでしょう？ちょっと押してみたくなりませんか？（笑）

～08/09/16～

タグ: cssナビゲーション, cssメニュー, ナビゲーション, メニュー, 作り方, 基本


	【送料無料】【ポイント2倍】SONY■B5ノートPC■VAIO typeT VGN-TT51JB■【直送】
	【送料無料】【ポイント2倍】SONY■B5ノートPC■VAIO typeT VGN-TT51JB■【直送】
	261,399円