Меню «Гаражные двери»
Очень красивое меню, реализованное при помощи 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]-->Результат нашей работы вы можете посмотреть или скачать(вместе с исходниками изображений) ниже.
Спасибо за внимание!
Супер! Очень четко. немного неадекватно себя ведет если резко водить курсором (флеш бы так себя не вел), но класс.
А как насчет прозрачности png в ie6?
Сейчас попробую исправить.
Уташыл в закрома
Красота! Спасибо! :)
Прочел первые 10 страниц Вашего блога на одном дыхании
Просто потрясающе. За такие блоги и люблю интернет :)
Спасибо Вам и Хабру! Буду читать дальше
PS: не понравилась одан вещь- при комментировании нужно обязатеьно указывать свой ящик. Не понимаю этого.
Одна проблема – если поводить мышкой секунд несколько по всем 4м – влево-вправо, а потом убрать мышь, то «ворота» продолжа.т еще секунд 10-15 хлопать створками – видимо, следует еще после каждого цикла «открыл-закрыл» проверять, находится ли мышь в пределах элемента, и если нет – отменять анимацию (что-нть типа $(this).parent().stopAnimate)
;)
какая красотища. Насчет быстрого курсора тоже заметил, но кто кроме гиков будет мышкой елозить с такой скоростью
Именно. Я тоже придерживаюсь этой позиции.
Если пользователь играется с этой багой, пусть себе радуется (-:
Классная вещ. Спасибо!
Вот ЭТО РЕАЛЬНАЯ ТЕМА ! спасибки !
по моему нужно переписать скрипт, когда ссылка теряет фокус то двери не доезжая до конца должны закрываться, а открываться только когда над ним есть курсор, флеш тут не причем. проблема в алгоритме
Это легко переписывается. И это не флэш.
я о том же, кому надо тот перепишет :-)
Красиво, но не знаю где такое применить.
Очень забавная фича! Спасибо!
как я рад, что наткнулся на этот сайт! менюжка «Гаражные двери» – это офигенная тема. обязательно реализую на своем авто сайте. блин офигенный сайт!
а как расширить на больше чем 4 окна?
Красиво!!!! Спс!
спасибо мне очень помог
да просто супер
Есть ещё сайт по раздвижным пластиковым дверям porta-door.narod.ru отличный сайт.
Зе бест!
классно.
тоже забамблю чтонить.
п.с. а у меня фамилия тоже чернев.. :)
Если много раз мышкой поводить около этого эелемента, то будет долго колбасить)
Чернеев опять перевёл очередную статью(
*если это он написал)))
тьфу ты чернёв, сори