Скачать CSS Меню навигации «Гаражные двери»

<ul id=”menuback”>
<li class=”shutter” id=”shutter1″><a class=”link” href=”#1″>Ссылка 1</a></li>
<li class=”shutter” id=”shutter2″><a class=”link” href=”#2″>Ссылка 2</a></li>
<li class=”shutter” id=”shutter3″><a class=”link” href=”#3″>Ссылка 3</a></li>
<li class=”shutter” id=”shutter4″><a class=”link” href=”#4″>Ссылка 4</a></li>
</ul>

* { 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;
}

И, наконец, дадим ему жизнь при помощи jQuery.

Сам по себе jQuery не может полноценно работать с позицией фона в css, так что мы используем маленький однокилобайтный плагин к нему.
<script type=”text/javascript” src=”js/jquery-1.2.6.min.js”></script>
<script type=”text/javascript” src=”js/jquery.backgroundPosition.js”></script>

<script type=”text/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 );
});
});
</script>

<!–[if lt IE 7]>
<style type=”text/css”>
a.link {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/window.png’, sizingMethod=’scale’);
background: url(images/blank.gif) no-repeat bottom center;
}
</style>
<![endif]–>