Меню «Гаражные двери»

Очень красивое меню, реализованное при помощи Jquery, сравнимое только с меню реализованными на флеше.
Это меню работает за счет изменения background-position наложенных друг на друга слоями изображений.

И так, начнем.
Для начала, нам потребуется задний фон(нижний слой):

Изображение той самой « гаражной двери»(средний слой):


И изображение «дверного проёма(верхний слой):
  

Создадим сам каркас меню на html:

<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>

При отключенном css или javascript меню будет выглядеть как обычный список ссылок, то есть еще будет выполнять свою главную функцию.

Оформим меню при помощи 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;
}

И, наконец, дадим ему жизнь при помощи 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>

Обновление: в ie6 меню работает некорректно из-за неправильной обработки прозрачности у png изображений.
Для исправления этого глюка используем следующий css код(извиняюсь если использовал это хак неправильно):

<!--[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]-->

Результат нашей работы вы можете посмотреть или скачать(вместе с исходниками изображений) ниже.
Спасибо за внимание!

Мой блог — Чернев.ру
Посмотреть результат(демо)
Скачать исходники
Источник(Английский)