ガレージドアみたいなデザインのナビゲーション

下記画像のように画像の作成が必要です。

jquery-1.2.6.min.jsとquery.backgroundPosition.jsをhead要素に設置する必要があります。

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>

XHTML

<ul id="menuback">
	<li class="shutter" id="shutter1"><a class="link" href="#1">Link 1</a></li>
	<li class="shutter" id="shutter2"><a class="link" href="#2">Link 2</a></li>
	<li class="shutter" id="shutter3"><a class="link" href="#3">Link 3</a></li>
	<li class="shutter" id="shutter4"><a class="link" href="#4">Link 4</a></li>
</ul>

CSS

* 	{ margin:0px; padding:0px; }
body	{ background:#c1c1c1; }
a 	{ outline-style: none; }

ul#menuback {
	margin: 50px auto;
	list-style: none;
	background: url(../images/menu-bg.jpg);
	width: 800px;
	overflow: auto;
}

ul#menuback li.shutter {
	width: 200px;
	height: 100px;
	display: block;
	float: left;
}

ul#menuback li#shutter1 {
	background: url(../images/shutter-africanplains.jpg) no-repeat;
}
ul#menuback li#shutter2 {
	background: url(../images/shutter-reptiles.jpg) no-repeat;
}
ul#menuback li#shutter3 {
	background: url(../images/shutter-aviary.jpg) no-repeat;
}
ul#menuback li#shutter4 {
	background: url(../images/shutter-arcticzone.jpg) no-repeat;
}

a.link {
   width: 200px;
   height: 100px;
   display: block;
   background: url(../images/window.png) no-repeat bottom center;
   text-indent: -9999px;
}

Javascript

$(document).ready(function() {

		//Set css in Firefox (Required to use the backgroundPosition js)
		$('#shutter1').css({backgroundPosition: '0px 0px'});

		//Animate the shutter
		$(".link").hover(function(){
		      $(this).parent().animate({backgroundPosition: '(0px -100px)'}, 500 );
		    }, function() {
		      $(this).parent().animate({backgroundPosition: '(0px 0px)'}, 500 );
		});
	 });