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

今回は先日作ったナビゲーションをちょっとアレンジしてみます。

基本的には先日作成したものと同じ仕様ですが、今回は見た目をシンプルにして、ロールオーバーした時のアクションに一工夫加えてみます。

<div id="menu02">
<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>

背景色を白で統一、boderを各項目の下線だけにします。そして、ロールオーバーのアクションでtext-align: right;を使ってテキストを右寄せにして、border-right: 10px solid #600;で付箋のような演出を加えるとちょっとクール！かも？最後に、padding-right: 5px;で文字位置を調整して完成です。

#menu02 ul {
 width: 210px;
}
#menu02 li a {
 background: #fff;
 width: 210px;
 height: 25px;
 padding-top: 5px;
 border-bottom: 1px solid #666;
 display:block;
 text-decoration: none;
 color: #333;
}
#menu02 li a:hover {
 background: #fff;
 width: 195px;
 padding-right: 5px;
 text-align: right;
 border-right: 10px solid #600;
}

～08/09/14～

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


	アイ・オー・データ機器 USB 2.0/1.1対応外付型ハードディスク 500GB HDCS-U500R2
	面倒なドライバのインストールは不要、USBポートにつなぐだけで簡単に使えるファンを持たないコンパクトで静かな外付ハードディスク。
	8,670円