Меню на CSS+jQuery (гаражные двери)

Не скажу что самый интересный и полезный пример, но при умелом обращении и тематичном дизайне будет как раз “в тему”. Каждый из пунктов меню как бы закрыт гаражной дверью, а при наведении курсора открывается.

Нам потребуются всего три изображения:
1. Непосредственно графическое меню (оно будет идти фоном)

2. “Двери”

3. И, наконец, окно, которое послужит для нас фреймом

Меню:

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

Обычная семантическая верстка (не забываем про сео-оптимизацию ни на минуту), но с id и классами для каждой ссылки.

Файл стилей:

* { 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-1.jpg) no-repeat;
}
ul#menuback li#shutter2 {
 background: url(../images/shutter-2.jpg) no-repeat;
}
ul#menuback li#shutter3 {
 background: url(../images/shutter-3.jpg) no-repeat;
}
ul#menuback li#shutter4 {
 background: url(../images/shutter-4.jpg) no-repeat;
}

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

Сперва мы сбрасываем значение по умолчанию, ибо у каждого браузера они свои, а в данном примере даже минимальные расхождения могут испортить всю картину.
Фоновый рисунок присваиваем UL, устанавливаем высоту и ширину элементов списка, а затем приписываем для каждого из пунктов свой фон.

Последний этап - подключаем jQuery и JavaScript

<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'});
$('#shutter2').css({backgroundPosition: '0px 0px'});
$('#shutter3').css({backgroundPosition: '0px 0px'});
$('#shutter4').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>