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

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

    И так, начнем.
    Для начала, нам потребуется задний фон(нижний слой):
    menu-background-example
    Изображение той самой « гаражной двери»(средний слой):

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

    Создадим сам каркас меню на 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]-->


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

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

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 102

      –3
      отказывается работать в IE 5+
        +23
        А в IE 1-4 проверяли?
        Если и там не работает - то боюсь, скрипт - говно.
          +1
          В качетсве + вообще-то обозначается что и последующие версии тоже.
            0
            Я понимаю, меня просто убила Ваше щепетильность в этом вопросе. Если бы Вы написали IE6 + - я бы слова не сказал.
            А заминусовали Вас зря. На самом деле, очень ценное замечание.
              0
              ну просто потом после моего комента его поченили...а значит остальные уже не видели его первую версию...
          0
          Действительно в IE6 и ниже не работает.
            0
            Пока доля IE достаточно велика. Не стоит забывать про него.
              0
              Исправил.
          0
          Хорошая идея, спасибо
            –1
            Всё-таки нельзя забивать на IE6 + в FF3, как мне показалось, подтормаживает.
            Но красиво, чёрт возьми :)
              0
              Вы правы в FF3 есть легкие тормоза
                0
                Во всех брузерах загрузка процессора околонулевая, в ФФ2 — 30%, в ФФ2 — 100%
                  +1
                  У меня в FF3 никаких тормозов или чрезмерной загрузки процессора.
                    0
                    FF3 - нагрузка 10-15%
                    IE6 - нагрузка 8-9%
                    маленький двуядерный интел - по 1800 на ядро.
                      0
                      У меня тоже в FF3 максимальная загруженность процессора (Celeron M 1600) до 13% при активном движении мышью по пунктам меню.
                        0
                        Вас кто-то кушает :) проверьте на руткиты и трояны - раз.
                        Второе FF имеет тенденцию "тормозить" когда открыто много закладок. (чувствую счас получу минусы :) фанатских (фанам - пост не читать ;), но это единственный недостаток ff и честно говоря реальный. Много плугинсов и много открытых закладок - загрузка процессора сильно возрастает)
                          0
                          Меня никто не кушает, ФФ не мой браузер, я его запускаю только для тестов, никаких вкладок.
                          Дома результаты 1 в 1: Опера не более 3%, ФФ2 около 10%, фф3 около 30%. Тенденция, как для слабого процессора с интегрированным видео, так и для полноценной системы.
                    +5
                    Если подёргать мышку вверх-вниз, чтобы она за малое время много раз пересекла границу окошка, оно ещё некоторое время открывается-закрывается вне зависимости от того, где курсор.
                      0
                      Да, тоже заметил такую проблему. Никто не знает как править такой баг в jQuery ?
                        0
                        мне кажется, это баги браузера. даже точнее того обработчика, который работает с javascript.
                          +3
                          это не баг. вы несколько раз вызываете event, вот и получаете несколько движений.
                          чтобы исправить используйте
                          $(".link").one("hover",function(){...
                          и

                          setTimeout(funktion(){$(".link").one("hover",function(){....},500*2)
                            0
                            Это баг, потому что интерфейс неадекватно (в данном случае, бездумно) выполняет определенные действия. Такое поведение надо исправлять.
                              0
                              уговорили :)
                                0
                                А что, простите, ему прикажете делать? Сказать "Ааа, ну на хер эти лишние ховеры, обойдется юзер и без них. Не буду их обсчитывать. ДжаваСкрипт, забей на это!".

                                Дело-то как идет: юзер делает десяток ховеров, браузер обрабатывает каждое событие, обработчик события вызывает animate для объекта. jQuery свои анимации ставит в очередь, одна кончилась - берет следующую и делает ее. Поскольку время анимаций существенно выше времени, необходимого на mouseout и новый mouseover, мы и видим эту задержку. В итоге и браузер не виноват (честно отрабатывает каждое элементарное событие), и jQuery ведет себя как полагается (очередь специально для нужд сложных анимаций писалась, чтобы не заворачивать всё в десяток closures по принципу матрешки). Чтобы «такое поведение исправлять», на мой взягляд, надо вставить перед каждым animate() еще и stop(), ну то есть

                                $(this).parent().stop().animate({backgroundPosition…
                                  0
                                  Кому - ему? Программисту - искать пути обхода нескольких Hover-событий подряд, фильтровать. Как браузер события обрабатывает мне известно; но такие пустячные трудности не должны останавливать разработчика.
                                    0
                                    Интерфейсу, который "бездумно"...
                            +3
                            поставить один if, типа if this :animated - ничо не делать, миллион раз так делал в своих проектах
                              0
                              ага, семафор это называется.
                            0
                            Красиво :)
                            Safari, Camino, Opera под Mac — работает.
                            Правда, в Опере чуть подтормаживает :)
                              0
                              Как-то криво-косо добавил поддержку ie6.
                                0
                                Блин, забыл еще предзагрузку изображения надо делать :-(
                                  0
                                  В ие нету закргленных окошков )
                                    0
                                    Надо добавить прелоад этих закругленных окошков.

                                    Я не успеваю, ухожу на время.
                                  +1
                                  А где достойное звуковое сопровождение? :)

                                  Код не смотрел, но выглядит как минимум изюмительно.
                                  Гениальное — всегда рядом.
                                    0
                                    +1, чтоб как двери в звездных войнах )
                                    0
                                    Спасибо большое :) вышло очень изящно и красиво.
                                    Радует то, что не используется flash, так как при оптимизации с flash не очень удобно работать.
                                      –3
                                      Обновление: в ie6 меню работает некорректно из-за неправильной обработки прозрачности у png изображений.
                                      Для исправления этого глюка используем следующий css код(извиняюсь если использовал это хак неправильно):

                                      [if lt IE 7]

                                      0_o

                                      Наверное [if lt IE 6]?
                                      • UFO just landed and posted this here
                                          0
                                          Попробуйте несколько раз быстро провести мышкой через все меню. Гаражные двери некоторое время останутся хлопать, не отвечая на мышь. Хреново.

                                          Но выглядит здорово, и HTML просто прелестный.
                                            0
                                            читайте коментарии выше...
                                            +1
                                            Перламутровые пуговицы, имхо.
                                              0
                                              Присоединяюсь к предыдущему оратору. Самое приятное - достаточный минимум в xHTML.
                                                0
                                                работает в NN 9.0.0.6
                                                IE 7.0.57
                                                Opera 9.51
                                                FF 3.0.1
                                                  +1
                                                  Народ, не будьте столь категоричными. Если весь инет сделать в «достаточном минимуме в xHTML» — это рай для веб-девелопера, но посудите как скучно будет простому пользователю. А для кого все эти сайты делаются, если не для юзверей с ихними кликами и кредитными картами? ;)

                                                  По теме: славные штуки, им обязательно найдется применение. Главное, не переборщить и не утыкать всю страницу такими «ролетами» :)
                                                    0
                                                    Вы, видимо, не поняли смысл выражения «достаточный минимум в xHTML». Речь идёт о внутреннем, а не внешнем представлении.
                                                      0
                                                      Если так, то не буду спорить.
                                                    0
                                                    наводим и убираем мышку с одного пункта меню (быстро повторяем это действие раз 20-30) и наслаждаемся :)
                                                    можно быстро водить мышкой вдоль всего меню....
                                                      0
                                                      Жалко только что это перевод.. а не собственное решение.. нет и за перевод спасибо :) хотя мне вообщем-то он не нужен...

                                                      Плохо что у нас такая тенденция - побольше переводного и практически никаких своих решений
                                                        +3
                                                        От этого информация хуже не становится.
                                                        0
                                                        Да, интересный эффект с несколькими слоями. Можно взять на вооружение!
                                                          0
                                                          Напишите пожалуйста статью как сделать с помощью javascript мигающий текст и музыку.
                                                          Да здравствуют девяностые!
                                                            0
                                                            на правах рекламы: (function(){var a = document.getElementById('my-flashing-text'); var i = 1; setInterval(function(){ a.style.color = (i%2) ? 'red' : 'blue'; i++;}, 200);})()
                                                            0
                                                            в explorer 6 остается полоска в 1px сбоку
                                                              –1
                                                              забейте, все равно версию для IE6 ни один здравомыслящий дизайнер не примет (если конечно сравнивать ее с оригинальной)
                                                                0
                                                                Теперь все пучком. Я допустил глупейшую ошибку :-(
                                                              +1
                                                              одна поправка - такое меню легко организовывается с использованием любого современного js фрэймворка. и надо бы еще добавить transition, например easeOut - будет повеселее. советую посмотреть в сторону mootools - есть возможность анимации по css классам, что, в принципе, правильнее, чем писать стили в javascript.
                                                                0
                                                                Большое спасибо автору за идею! Давно уже придумываю элементы динамического оформления через js. Надеюсь вы подкините еще парочку в будущем :) можно даже без кода :)
                                                                  0
                                                                  При загрузке странички в 3фф видны картинки. Надо их как-то скрыть на этапе загрузки (дополнительный слой?).
                                                                  Во-вторых, он запоминает все потери/приобретения фокуса. Получается, что шторка может долго ездить туда-сюда уже после того, как пользователь перестал двигать курсор.
                                                                    –1
                                                                    а мне жутко не нравятся эти гаражные двери. вобще изврат на сайте такое меню делать
                                                                    • UFO just landed and posted this here
                                                                        0
                                                                        Думаю и для развлекательного сайта очень подойдет. А для личного сайта, блога вообще золото
                                                                      0
                                                                      Потрясающее меню - начинаю учить jQuery ))
                                                                      С этого момента ваш блог красуется у меня в браузере в панели закладок. Вы просто архитектор ))) Респект ))
                                                                        +2
                                                                        Я аж прослезился. Вы так умильно облизываете этого Бублика, который продвигает свой бложек за счет чужих статей, опубликованых на Хабре...
                                                                          –1
                                                                          Продвигает, птотому что блог интересный. А на вашем webmakerslounge как было по 5-6 коментариев пол года назад, так и осталось. ХА-ХА-ХА! ХО-ХО-ХО!
                                                                            0
                                                                            Я лишь откоровенно выразил свои эмоции. Вы бы лучше слова выбирали.
                                                                              0
                                                                              А вы бы лучше в следующий раз выбирали кому откоровенно выражать эмоции.
                                                                                –1
                                                                                А вы, CurlyBrace, зачем вообще сдесь пишете? Идите тусуйтесь на вашем сайте, или ... ааа.. понимаю тут людей побольше, там то у вас человек 5 ...
                                                                                  0
                                                                                  Охххх... ненавижу веб за это... как мало оказывается надо, чтобы у человека развязался язык - всего лишь смотреть не в глаза, а в монитор... да вы просто негодник ))
                                                                                  Поверьте на слово, что не вам решать где, как и кому мне выражать мои мысли и чувства.
                                                                                    0
                                                                                    Да вы не кипятитесь. Вы мне начали советовать что мне делать, я ответил вам в том же духе. Ни больше, ни меньше.

                                                                                    З.Ы. Вы спамерам тоже благодарственные письма пишете? ))
                                                                                      0
                                                                                      Я не всекаю, что непонятного ??
                                                                                      1. Я прочитал статью.
                                                                                      2. Увидел результат, который мне очень понравился.
                                                                                      3. Зашёл на блог автора, увидел разнообразие из тематик, некоторые из которых мне так же интересны.
                                                                                      4. Выразил своё мнение.

                                                                                      Я должен справки навести, кто такой автор и проверить нет ли у него в блоге копипаста ?
                                                                                      А то, что в конце, статьи стоит ссылка на его блог... так и у вас в профиле она имеется. Как говорится, сам себя не похвалишь...

                                                                                      Я надеюсь разговор, окончен.

                                                                                      З.Ы. Не надо капать на моск незнакомым людям.
                                                                                        0
                                                                                        Пусть последнее слово будет за вами )) Не всекайте дальше.
                                                                                        –3
                                                                                        CurlyBrace - а кто вы такой вообще? Человек выразил свое мнение, свои эмоции , ну а если вам не нравится - не читатйте и нечего коментировать. Нашелся мне еще самозванец-дразнитель. И хватит завидовать людям за креативность. То что у вас с креативом плохо, видно по переделки вашего сайта. Так что не мешайте другим творить и думать, если сами не способны на такие процессы. ХА-ХА-ХА!
                                                                                  0
                                                                                  а может не стоит применять таких выражений?
                                                                                  кто как что продвигает - его лично дело, имхо.
                                                                                    +1
                                                                                    Может не стоит. А может и стоит. Личное дело, выраженное публично, перестает быть таковым.
                                                                                      0
                                                                                      Ну а вам CurlyBrace, какое дело? Выразил человек свое мнение публично, ну чего тут плохого? Не нравится не читатйте. Завидуете за идеи и за то что продвигается отличный блог - тоже ваши проблемы.
                                                                                  +3
                                                                                  Пусть у тебя лучше http://docs.jquery.com в закладках красуется
                                                                                    0
                                                                                    вопрос только в том, с каких пор переводчик стал архитектором?
                                                                                    +2
                                                                                    Банальщина, да ещё и не своё.
                                                                                    Сделать нечто подобное - дело, максимум, одного часа.
                                                                                      0
                                                                                      Очень смешной эффект, если между двумя "дверями" поводить быстро мышкой, раз десять. Пробовал на "демо" :)
                                                                                        –1
                                                                                        Еще 10 раз ктонибудь скажите.
                                                                                        +1
                                                                                        Красотища!
                                                                                          0
                                                                                          Очень понравилось! Спасибо!
                                                                                            0
                                                                                            Очеь понравилось, можно ведь и сбоку, ток это уже «лифтовые двери».
                                                                                              0
                                                                                              easing бы еще! На закрытие - что-то типа bumpOut полюбому.
                                                                                                0
                                                                                                между дверями не желательно чтоб срабатывало..
                                                                                                память действий нужно чистить всё таки... Тут писали в комментах - если раз десять провести между дверями очень быстро, то ещё пол часа двери сами открываются-закрываются. Да и просто если мышкой провести дволь всего меню туда-сюда быстро много раз то тоже потом ждать надо. А мы же понимаем что главная цель этой красоты - быть меню.
                                                                                                  0
                                                                                                  Вы читаете комментарии людей которые до вас писали? Говорили уже много раз...
                                                                                                  0
                                                                                                  Гаражные двери не бывают «красивыми».
                                                                                                  Надпись уходит от меня, как только я собираюсь на ней щелкнуть.(
                                                                                                    0
                                                                                                    Народ, вот такой вопрос в контексте этого у меня возник. Вот мы да, делаем семантичный html, у нас в нём ссылка с текстом, как и положено.

                                                                                                    Дальше мы CSS-ом настраиваем её вид, а это у нас меню, "гаражная дверь", и никакой там не текст нужен, а картинка. Ну и мы этот текст вот так:
                                                                                                    text-indent: -9999px;

                                                                                                    выкидываем за пределы видимости, а там ставим фоном нужную картинку. И html семантичный , и выглядит красиво.

                                                                                                    А вот как поисковики на это отреагируют? Ведь это по сути можно применить и для поискового спама, вставив на сайт невидимые пользователю (текста-то он не видит) ссылки, видимые при этом роботу. А за попытки поискового спама поисковики, как известно, банят.

                                                                                                    Кто-нибудь знает что-то определённое про такого рода способы оформления, может ли это привести к понижению в выдаче?
                                                                                                    Вот хотя бы про такое "выкидывание текста" через text-indent?
                                                                                                      0
                                                                                                      Ну если картинка с обезьянкой ведет на страничку про обезьянок, то это нормально.
                                                                                                      За это никаких санкций не будет.
                                                                                                        0
                                                                                                        Хорошо бы, чтобы так. Вопрос в том, будет ли поисковик "разбираться", куда там она ведёт. Интересно бы почитать что-нибудь про то, какие случаи поисковики считают спамом, а какие - нет, и каковы критерии разделения... Вот если я, например, на странице сделаю белым цветом по белому фону текст с кучей ключевых слов, это вроде как спам. Даже если слова и правда релевантны нашей страничке.
                                                                                                        А тут мы что-то похожее делаем, выходит... В общем, интересны критерии "спам-не спам")
                                                                                                          0
                                                                                                          Поисковик вообще не разбирается.

                                                                                                          Разбираются люди. Да и то, только после того как на Вас кто-нибудь настучит.
                                                                                                      0
                                                                                                      а можно на этой базе сделать не ускользающие, к примеру, воротца, а плавно исчезающие, или растворяющиеся кубиками? Эффект классный, но (на мой взгляд) излишне динамичный…
                                                                                                    • UFO just landed and posted this here
                                                                                                        –1
                                                                                                        Обидно, что человек толком не разобравшись с реализацией (пнг в ИЕ6, мерцание при наведении) тупо копипастит статью, вместо того, чтобы хотя бы довести до ума.
                                                                                                          0
                                                                                                          Статья то не про PNG vs IE6 (если честно надоела эта тема на Хабре).
                                                                                                          А толчок начинающим к использованию js framework.
                                                                                                          Хотя для начала надо разобраться с самим js - а то начинающие могут такого наворотить, что не один процессор не справиться.
                                                                                                            0
                                                                                                            Вот именно:

                                                                                                            1. Вместо

                                                                                                            $('#shutter1').css({backgroundPosition: '0px 0px'});
                                                                                                            $('#shutter2').css({backgroundPosition: '0px 0px'});
                                                                                                            $('#shutter3').css({backgroundPosition: '0px 0px'});
                                                                                                            $('#shutter4').css({backgroundPosition: '0px 0px'});

                                                                                                            - как мы видим в блоге автора можно написать

                                                                                                            $('.shutter').css({backgroundPosition: '0px 0px'});

                                                                                                            2. Зачем сначала писать

                                                                                                            $(".link").hover(...)

                                                                                                            а потом брать $(this).parent() вместо сразу написать $('.shutter').hover(...)

                                                                                                            3. Думаю о излишности разметки говорить не нужно - можно было обойтись и без class="link" и без class="shutter", а в выборке писать $('#menuback li').hover() к примеру и все.
                                                                                                          –1
                                                                                                          Это отсюда?
                                                                                                          http://css-tricks.com/garage-door-style-menu-using-animated-background-images-with-jquery/
                                                                                                            0
                                                                                                            http://www.baritchi.eu/
                                                                                                              0
                                                                                                              Клевая ссылка спасибо. Прекрасный эффект. Жаль что на mootools :-(
                                                                                                                0
                                                                                                                ФФ2: загрузка процессора нулевая, но анимация ОЧЕНЬ дёрганая.
                                                                                                              0
                                                                                                              у меня в IE6 кажется картинка мелькает Вам не кажется?

                                                                                                              Only users with full accounts can post comments. Log in, please.