スタイルシートマニア
ナビゲーションメニュー(基本Ⅱ) | ホームページカスタマイズ Tips
今回は先日作ったナビゲーションをちょっとアレンジしてみます。
基本的には先日作成したものと同じ仕様ですが、今回は見た目をシンプルにして、ロールオーバーした時のアクションに一工夫加えてみます。
<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; }
Author:hideo
Comments:0
« 前の記事 | 次の記事 » |