Очень современная, красивая реализация возможностей CSS. Лишний раз доказывает нам всю безграничность творчества. Очень красивое меню, реализованное при помощи Jquery, сравнимое только с меню реализованными на флеше. Это меню работает за счет изменения background-position наложенных друг на друга слоями изображений. И так, начнем. Для начала, нам потребуется задний фон(нижний слой): Изображение той самой « гаражной двери»(средний слой): Создадим сам каркас меню на html: Code <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: Code * { 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 код(извиняюсь если использовал это хак неправильно): Code <!–[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]–> Посмотреть результат Понравилось ставим +
|