【jQuery、CSS】background-imageを利用した効果
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; }