jQuery, background-imageを利用した効果 - HTML5, jQuery役立つ情報ブログ

DEMO_PAGE Beautiful Background Image Navigation

jQueryとCSS だけで簡単にホームページトップがオシャレになります。
サンプルは飲食店をイメージして作成しました。
バックグラウンドイメージで画像を配置しているのがポイント！
jsファイルはDEMO_PAGEのページのソースから取得して下さい。
イメージを変えるだけで、簡単に実装できると思います。

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Beautiful Background Image Navigation</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<!--[if lte IE 6]>
 <link rel="stylesheet" href="css/style.css">
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.bgpos.js"></script>
<script src="js/bbi.js"></script>
</head>
<body>
<div id="content">
<div id="menuWrapper" class="menuWrapper bg1">
<ul class="menu" id="menu">
<li class="bg1" style="background-position:0 0;">
<a id="bg1" href="#">Home</a>
<ul class="sub1" style="background-position:0 0;">
		<li><a href="#">News</a></li>
		<li><a href="#">Today's Special</a></li>
		<li><a href="#">Event</a></li>
</ul>
</li>
<li class="bg1" style="background-position:-266px 0px;">
<a id="bg2" href="#">Food</a>
<ul class="sub2" style="background-position:-266px 0;">
		<li><a href="#">Salad</a></li>
		<li><a href="#">Dish</a></li>
		<li><a href="#">Soup</a></li>
</ul>
</li>
<li class="last bg1" style="background-position:-532px 0px;">
<a id="bg3" href="#">Drink</a>
<ul class="sub3" style="background-position:-266px 0;">
		<li><a href="#">Beer</a></li>
		<li><a href="#">Cocktail</a></li>
		<li><a href="#">Wine</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

【style.css】

@charset "utf-8";
/* CSS Document */

*{
  margin:0;
  padding:0;
}
body{
  font-family:Arial;
  padding-top:30px;
  background:#000 url(title.png) no-repeat center top;
}
.menuWrapper{
  font-family: 
    Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: normal;
  line-height: 1.45em;
  position: relative;
  margin: 20px auto;
  height: 542px;
  width: 797px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: transparent;
}
ul.menu{
    list-style: none;
    width: 797px;
}
ul.menu > li{
  float:left;
  width:265px;
  height:542px;
  border-right:1px solid #777;
  background-repeat:no-repeat;
  background-color:transparent;
}
ul.menu > li.last{
  border:none;
}
.bg1{
  background-image: url(../images/01.jpg);
}
.bg2{
  background-image: url(../images/02.jpg);
}
.bg3{
  background-image: url(../images/03.jpg);
}
ul.menu > li > a{
  float:left;
  width:265px;
  height:50px;
  margin-top:450px;
  text-align:center;
  line-height:50px;
  color:#ddd;
  background-color:#333;
  letter-spacing:1px;
  cursor:pointer;
  text-decoration:none;
  text-shadow:0px 0px 1px #fff;
}
ul.menu > li ul{
  list-style:none;
  float:left;
  margin-top:-180px;
  width:100%;
  height:110px;
  padding-top:20px;
  background-repeat:no-repeat;
  background-color:transparent;
}
ul.menu > li ul li{
  display:none;
}
ul.menu > li ul.sub1{
  background-image:url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
  background-image:url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
  background-image:url(../images/bg3sub.png);
}
ul.menu > li ul li a{
  color:#fff;
  text-decoration:none;
  line-height:30px;
  margin-left:20px;
  text-shadow:1px 1px 1px #444;
  font-size:16px;
}
ul.menu > li ul.sub1 li{
  display:block;
}
ul.menu > li ul li a:hover{
  border-bottom:1px dotted #fff;
}