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

[Grayscale]

отказывается работать в IE 5+

[vorbiz]

А в IE 1-4 проверяли?
Если и там не работает - то боюсь, скрипт - говно.

[Grayscale]

В качетсве + вообще-то обозначается что и последующие версии тоже.

[vorbiz]

Я понимаю, меня просто убила Ваше щепетильность в этом вопросе. Если бы Вы написали IE6 + - я бы слова не сказал.
А заминусовали Вас зря. На самом деле, очень ценное замечание.

[Grayscale]

ну просто потом после моего комента его поченили...а значит остальные уже не видели его первую версию...

[bO_oblik]

Действительно в IE6 и ниже не работает.

[Grayscale]

Пока доля IE достаточно велика. Не стоит забывать про него.

[bO_oblik]

Исправил.

[Vass]

Хорошая идея, спасибо

[absolvo]

Всё-таки нельзя забивать на IE6 + в FF3, как мне показалось, подтормаживает.
Но красиво, чёрт возьми :)

[Vass]

Вы правы в FF3 есть легкие тормоза

[homm]

Во всех брузерах загрузка процессора околонулевая, в ФФ2 — 30%, в ФФ2 — 100%

[tigerman]

У меня в FF3 никаких тормозов или чрезмерной загрузки процессора.

[nicothin]

FF3 - нагрузка 10-15%
IE6 - нагрузка 8-9%
маленький двуядерный интел - по 1800 на ядро.

[Aivean]

У меня тоже в FF3 максимальная загруженность процессора (Celeron M 1600) до 13% при активном движении мышью по пунктам меню.

[maxic]

Вас кто-то кушает :) проверьте на руткиты и трояны - раз.
Второе FF имеет тенденцию "тормозить" когда открыто много закладок. (чувствую счас получу минусы :) фанатских (фанам - пост не читать ;), но это единственный недостаток ff и честно говоря реальный. Много плугинсов и много открытых закладок - загрузка процессора сильно возрастает)

[homm]

Меня никто не кушает, ФФ не мой браузер, я его запускаю только для тестов, никаких вкладок.
Дома результаты 1 в 1: Опера не более 3%, ФФ2 около 10%, фф3 около 30%. Тенденция, как для слабого процессора с интегрированным видео, так и для полноценной системы.

[Kalan]

Если подёргать мышку вверх-вниз, чтобы она за малое время много раз пересекла границу окошка, оно ещё некоторое время открывается-закрывается вне зависимости от того, где курсор.

[sanchesfree]

Да, тоже заметил такую проблему. Никто не знает как править такой баг в jQuery ?

[wpm1]

мне кажется, это баги браузера. даже точнее того обработчика, который работает с javascript.

[joger]

это не баг. вы несколько раз вызываете event, вот и получаете несколько движений.
чтобы исправить используйте
$(".link").one("hover",function(){...
и

setTimeout(funktion(){$(".link").one("hover",function(){....},500*2)

[trueHemp]

Это баг, потому что интерфейс неадекватно (в данном случае, бездумно) выполняет определенные действия. Такое поведение надо исправлять.

[joger]

уговорили :)

[rimmer333]

А что, простите, ему прикажете делать? Сказать "Ааа, ну на хер эти лишние ховеры, обойдется юзер и без них. Не буду их обсчитывать. ДжаваСкрипт, забей на это!".

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

$(this).parent().stop().animate({backgroundPosition…

[trueHemp]

Кому - ему? Программисту - искать пути обхода нескольких Hover-событий подряд, фильтровать. Как браузер события обрабатывает мне известно; но такие пустячные трудности не должны останавливать разработчика.

[rimmer333]

Интерфейсу, который "бездумно"...

[xaja]

поставить один if, типа if this :animated - ничо не делать, миллион раз так делал в своих проектах

[wpm1]

ага, семафор это называется.

[Tails]

Красиво :)
Safari, Camino, Opera под Mac — работает.
Правда, в Опере чуть подтормаживает :)

[bO_oblik]

Как-то криво-косо добавил поддержку ie6.

[bO_oblik]

Блин, забыл еще предзагрузку изображения надо делать :-(

[Grayscale]

В ие нету закргленных окошков )

[bO_oblik]

Надо добавить прелоад этих закругленных окошков.

Я не успеваю, ухожу на время.

[NemeZZiZZ]

А где достойное звуковое сопровождение? :)

Код не смотрел, но выглядит как минимум изюмительно.
Гениальное — всегда рядом.

[saymanski]

+1, чтоб как двери в звездных войнах )

[Galar]

Спасибо большое :) вышло очень изящно и красиво.
Радует то, что не используется flash, так как при оптимизации с flash не очень удобно работать.

[akira]

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

[if lt IE 7]

0_o

Наверное [if lt IE 6]?

[coldFlame]

Попробуйте несколько раз быстро провести мышкой через все меню. Гаражные двери некоторое время останутся хлопать, не отвечая на мышь. Хреново.

Но выглядит здорово, и HTML просто прелестный.

[Grayscale]

читайте коментарии выше...

[cazebo]

Перламутровые пуговицы, имхо.

[gentleman]

Присоединяюсь к предыдущему оратору. Самое приятное - достаточный минимум в xHTML.

[spelesto]

работает в NN 9.0.0.6
IE 7.0.57
Opera 9.51
FF 3.0.1

[AthirnEleidan]

Народ, не будьте столь категоричными. Если весь инет сделать в «достаточном минимуме в xHTML» — это рай для веб-девелопера, но посудите как скучно будет простому пользователю. А для кого все эти сайты делаются, если не для юзверей с ихними кликами и кредитными картами? ;)

По теме: славные штуки, им обязательно найдется применение. Главное, не переборщить и не утыкать всю страницу такими «ролетами» :)

[Volgar]

Вы, видимо, не поняли смысл выражения «достаточный минимум в xHTML». Речь идёт о внутреннем, а не внешнем представлении.

[AthirnEleidan]

Если так, то не буду спорить.

[dmx]

От этого информация хуже не становится.

[LDEV]

Да, интересный эффект с несколькими слоями. Можно взять на вооружение!

[ega]

Напишите пожалуйста статью как сделать с помощью javascript мигающий текст и музыку.
Да здравствуют девяностые!

[barbuza]

на правах рекламы: (function(){var a = document.getElementById('my-flashing-text'); var i = 1; setInterval(function(){ a.style.color = (i%2) ? 'red' : 'blue'; i++;}, 200);})()

[almirus]

в explorer 6 остается полоска в 1px сбоку

[bO_oblik]

Теперь все пучком. Я допустил глупейшую ошибку :-(

[barbuza]

одна поправка - такое меню легко организовывается с использованием любого современного js фрэймворка. и надо бы еще добавить transition, например easeOut - будет повеселее. советую посмотреть в сторону mootools - есть возможность анимации по css классам, что, в принципе, правильнее, чем писать стили в javascript.

[Davidov]

При загрузке странички в 3фф видны картинки. Надо их как-то скрыть на этапе загрузки (дополнительный слой?).
Во-вторых, он запоминает все потери/приобретения фокуса. Получается, что шторка может долго ездить туда-сюда уже после того, как пользователь перестал двигать курсор.

[Sindorian]

а мне жутко не нравятся эти гаражные двери. вобще изврат на сайте такое меню делать

[warkord]

Думаю и для развлекательного сайта очень подойдет. А для личного сайта, блога вообще золото

[CurlyBrace]

Я аж прослезился. Вы так умильно облизываете этого Бублика, который продвигает свой бложек за счет чужих статей, опубликованых на Хабре...

[bobrob]

Продвигает, птотому что блог интересный. А на вашем webmakerslounge как было по 5-6 коментариев пол года назад, так и осталось. ХА-ХА-ХА! ХО-ХО-ХО!

[CurlyBrace]

А вы бы лучше в следующий раз выбирали кому откоровенно выражать эмоции.

[bobrob]

А вы, CurlyBrace, зачем вообще сдесь пишете? Идите тусуйтесь на вашем сайте, или ... ааа.. понимаю тут людей побольше, там то у вас человек 5 ...

[CurlyBrace]

Да вы не кипятитесь. Вы мне начали советовать что мне делать, я ответил вам в том же духе. Ни больше, ни меньше.

З.Ы. Вы спамерам тоже благодарственные письма пишете? ))

[CurlyBrace]

Пусть последнее слово будет за вами )) Не всекайте дальше.

[bobrob]

CurlyBrace - а кто вы такой вообще? Человек выразил свое мнение, свои эмоции , ну а если вам не нравится - не читатйте и нечего коментировать. Нашелся мне еще самозванец-дразнитель. И хватит завидовать людям за креативность. То что у вас с креативом плохо, видно по переделки вашего сайта. Так что не мешайте другим творить и думать, если сами не способны на такие процессы. ХА-ХА-ХА!

[lordofwinds]

а может не стоит применять таких выражений?
кто как что продвигает - его лично дело, имхо.

[CurlyBrace]

Может не стоит. А может и стоит. Личное дело, выраженное публично, перестает быть таковым.

[bobrob]

Ну а вам CurlyBrace, какое дело? Выразил человек свое мнение публично, ну чего тут плохого? Не нравится не читатйте. Завидуете за идеи и за то что продвигается отличный блог - тоже ваши проблемы.

[caIIIa]

Пусть у тебя лучше http://docs.jquery.com в закладках красуется

[gryzzly]

вопрос только в том, с каких пор переводчик стал архитектором?

[caIIIa]

Банальщина, да ещё и не своё.
Сделать нечто подобное - дело, максимум, одного часа.

[akve]

Очень смешной эффект, если между двумя "дверями" поводить быстро мышкой, раз десять. Пробовал на "демо" :)

[homm]

Еще 10 раз ктонибудь скажите.

[kievanton]

Красотища!

[newlipetsk]

Очень понравилось! Спасибо!

[GKelpi]

Очеь понравилось, можно ведь и сбоку, ток это уже «лифтовые двери».

[rimmer333]

easing бы еще! На закрытие - что-то типа bumpOut полюбому.

[Innuendo108]

между дверями не желательно чтоб срабатывало..
память действий нужно чистить всё таки... Тут писали в комментах - если раз десять провести между дверями очень быстро, то ещё пол часа двери сами открываются-закрываются. Да и просто если мышкой провести дволь всего меню туда-сюда быстро много раз то тоже потом ждать надо. А мы же понимаем что главная цель этой красоты - быть меню.

[Grayscale]

Вы читаете комментарии людей которые до вас писали? Говорили уже много раз...

[andrejovdienko]

Гаражные двери не бывают «красивыми».
Надпись уходит от меня, как только я собираюсь на ней щелкнуть.(

[AndreyTS]

Народ, вот такой вопрос в контексте этого у меня возник. Вот мы да, делаем семантичный html, у нас в нём ссылка с текстом, как и положено.

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

text-indent: -9999px;

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

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

Кто-нибудь знает что-то определённое про такого рода способы оформления, может ли это привести к понижению в выдаче?
Вот хотя бы про такое "выкидывание текста" через text-indent?

[bO_oblik]

Ну если картинка с обезьянкой ведет на страничку про обезьянок, то это нормально.
За это никаких санкций не будет.

[AndreyTS]

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

[bO_oblik]

Поисковик вообще не разбирается.

Разбираются люди. Да и то, только после того как на Вас кто-нибудь настучит.

[infuzoria]

а можно на этой базе сделать не ускользающие, к примеру, воротца, а плавно исчезающие, или растворяющиеся кубиками? Эффект классный, но (на мой взгляд) излишне динамичный…

[AndreyTS]

Можно. Как минимум, первое. Описание API для эффекта "плавного исчезания" (fade-out) тут: http://docs.jquery.com/Effects/fadeOut#s…

[XAMelleOH]

Обидно, что человек толком не разобравшись с реализацией (пнг в ИЕ6, мерцание при наведении) тупо копипастит статью, вместо того, чтобы хотя бы довести до ума.

[Tvarb]

Статья то не про PNG vs IE6 (если честно надоела эта тема на Хабре).
А толчок начинающим к использованию js framework.
Хотя для начала надо разобраться с самим js - а то начинающие могут такого наворотить, что не один процессор не справиться.

[XAMelleOH]

Вот именно:

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() к примеру и все.

[bsdemon]

Это отсюда?
http://css-tricks.com/garage-door-style-menu-using-animated-background-images-with-jquery/

[ave44100]

http://www.baritchi.eu/

[bO_oblik]

Клевая ссылка спасибо. Прекрасный эффект. Жаль что на mootools :-(

[homm]

ФФ2: загрузка процессора нулевая, но анимация ОЧЕНЬ дёрганая.

[jandosul]

у меня в IE6 кажется картинка мелькает Вам не кажется?