【CSS】CSS Spritesで横並びナビゲーションを作る。
【CSS】 CSS Spritesでナビゲーションを作る - PCゲーマーのWebデザイン備忘録
上記でやったのと同じように、横並びのナビゲーションを作っていきます。
ブラウザプレビュー:
使用したソース
用意した画像:
HTML
<div id="nav"> <ul> <li id="home"><a href="#">ホーム</a></li> <li id="food"><a href="#">カフェフード</a></li> <li id="drink"><a href="#">カフェドリンク</a></li> <li id="info"><a href="#">インフォメーション</a></li> <li id="contact"><a href="#">お問い合わせ</a></li> </ul> </div>
CSS
#nav{ width: 750px; margin: 50px auto; } #nav ul{ overflow: hidden; height: 40px; width: 750px; text-indent: -999em; } #nav li { float: left; } #nav li a{ display: block; height: 40px; width: 150px; background:url(../img/btn_v.png) no-repeat left top; } #nav li#home a:hover{ background: url(../img/btn_v.png) no-repeat left -40px; } #nav li#food a{ background:url(../img/btn_v.png) no-repeat -150px top; } #nav li#food a:hover{ background: url(../img/btn_v.png) no-repeat -150px -40px; } #nav li#drink a{ background:url(../img/btn_v.png) no-repeat -300px top; } #nav li#drink a:hover{ background: url(../img/btn_v.png) no-repeat -300px -40px; } #nav li#info a{ background:url(../img/btn_v.png) no-repeat -450px top; } #nav li#info a:hover{ background: url(../img/btn_v.png) no-repeat -450px -40px; } #nav li#contact a{ background:url(../img/btn_v.png) no-repeat -600px top; } #nav li#contact a:hover{ background: url(../img/btn_v.png) no-repeat -600px -40px; }