【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;
}