PhotoshopでVista風UIのメニューバーを作る＃４(＠XHTML+CSS実装編)～日刊にしこり－埼玉版

PhotoshopでVista風UIのメニューバーを作る＃４(＠XHTML+CSS実装編)

投稿者:てつを投稿日時:2007/11/27 17:48:19

Photoshopで作成した画像をCSSでどう実装するか、というのを掲載するのを忘れていました；

画像の作成の仕方はこちらから順番にみていってください。
PhotoshopでVista風UIのメニューバーを作る＃１

作成した画像をそれぞれ保存し、一番横長の背景にあたるものを「navigation_bg」とします。
マウスが乗ったときに表示する画像の左から4,5pxのところを切り取って「navigation_left」とし、残りの右の部分を「navigation_right」と保存します。

次にCSSに下記を記述します。画像のパスを間違えないように！
あとナビゲーションバーの幅を修正してください。
#navigation { float:left; width:800px; height:33px; font:normal 12px 'Trebuchet MS','Arial'; margin:0; padding:0; background:url('/wp-content/themes/Nishikori/images/navigation_bg.png') no-repeat left top; } #navigation ul { float:left; line-height:25px; list-style:none; margin: 0; padding: 3px 0 0 3px; } #navigation li {display:inline; padding:0;} #navigation a { color:#fff; float:left; padding:0 0 0 3px; margin:0 3px 0 0; text-decoration:none; } #navigation a span {display:block; float:none; padding:3px 7px 0 4px;} #navigation a span img {border:none; margin:8px 4px 0 0;} #navigation a:hover { color:#fff; background:url('/wp-content/themes/Nishikori/images/navigation_left.png') no-repeat left top; } #navigation a:hover span { color:#fff; background:url('/wp-content/themes/Nishikori/images/navigation_right.png') no-repeat right top; }
次にHTMLを記述します。下記をコピペしてください。
<div id="hogehogehoge" style="width:300px;"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Gallery</span></a></li> <li><a href="#"><span>Link</span></a></li> </ul> </div><div style="clear:both;"></div>
画像は当サイト用に少々変わっていますが、こんな感じで表示されればOKです。
あとはリンクや、テキストを直して完了！