bO_oblik Jul 22 2008 at 09:03

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

3 min

1.3K

Website development*

-1

102

Comments 102

Grayscale Jul 22 2008 at 09:12

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

vorbiz Jul 22 2008 at 09:16

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

Grayscale Jul 22 2008 at 09:43

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

vorbiz Jul 22 2008 at 15:48

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

Grayscale Jul 22 2008 at 15:53

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

bO_oblik Jul 22 2008 at 09:17

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

Grayscale Jul 22 2008 at 09:43

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

bO_oblik Jul 22 2008 at 10:02

Исправил.

Vass Jul 22 2008 at 09:34

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

absolvo Jul 22 2008 at 09:39

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

Vass Jul 22 2008 at 09:48

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

homm Jul 22 2008 at 11:20

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

tigerman Jul 22 2008 at 11:35

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

nicothin Jul 22 2008 at 12:11

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

Aivean Jul 22 2008 at 12:57

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

maxic Jul 23 2008 at 13:23

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

homm Jul 24 2008 at 00:33

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

Kalan Jul 22 2008 at 09:42

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

sanchesfree Jul 22 2008 at 09:54

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

wpm1 Jul 22 2008 at 10:53

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

joger Jul 22 2008 at 11:05

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

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

trueHemp Jul 22 2008 at 11:09

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

joger Jul 22 2008 at 11:12

уговорили :)

rimmer333 Jul 22 2008 at 16:54

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

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

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

trueHemp Jul 23 2008 at 15:35

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

rimmer333 Jul 28 2008 at 17:01

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

xaja Jul 22 2008 at 11:20

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

wpm1 Jul 29 2008 at 14:49

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

Tails Jul 22 2008 at 09:43

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

bO_oblik Jul 22 2008 at 10:01

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

bO_oblik Jul 22 2008 at 10:09

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

Grayscale Jul 22 2008 at 10:14

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

bO_oblik Jul 22 2008 at 10:27

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

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

NemeZZiZZ Jul 22 2008 at 10:26

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

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

saymanski Jul 29 2008 at 16:45

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

Galar Jul 22 2008 at 10:48

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

akira Jul 22 2008 at 10:48

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

[if lt IE 7]

0_o

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

UFO landed and left these words here

coldFlame Jul 22 2008 at 11:05

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

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

Grayscale Jul 22 2008 at 11:10

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

cazebo Jul 22 2008 at 11:11

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

gentleman Jul 22 2008 at 11:14

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

spelesto Jul 22 2008 at 11:23

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

AthirnEleidan Jul 22 2008 at 11:26

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

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

Volgar Jul 22 2008 at 11:53

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

AthirnEleidan Jul 22 2008 at 11:58

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

UFO landed and left these words here

dmx Jul 22 2008 at 12:52

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

LDEV Jul 22 2008 at 11:49

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

ega Jul 22 2008 at 11:50

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

barbuza Jul 22 2008 at 12:14

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

almirus Jul 22 2008 at 11:50

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

UFO landed and left these words here

bO_oblik Jul 22 2008 at 14:05

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

barbuza Jul 22 2008 at 12:10

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

UFO landed and left these words here

Davidov Jul 22 2008 at 12:35

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

Sindorian Jul 22 2008 at 12:58

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

UFO landed and left these words here

warkord Jul 22 2008 at 13:24

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

UFO landed and left these words here

CurlyBrace Jul 22 2008 at 13:13

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

bobrob Jul 22 2008 at 14:24

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

UFO landed and left these words here

CurlyBrace Jul 22 2008 at 14:35

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

bobrob Jul 22 2008 at 14:48

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

UFO landed and left these words here

CurlyBrace Jul 22 2008 at 14:52

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

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

UFO landed and left these words here

CurlyBrace Jul 22 2008 at 15:23

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

bobrob Jul 22 2008 at 15:17

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

lordofwinds Jul 22 2008 at 16:19

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

CurlyBrace Jul 22 2008 at 16:48

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

bobrob Jul 23 2008 at 12:18

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

caIIIa Jul 22 2008 at 13:47

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

gryzzly Jul 22 2008 at 18:06

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

caIIIa Jul 22 2008 at 13:22

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

akve Jul 22 2008 at 14:40

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

homm Jul 22 2008 at 15:13

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

kievanton Jul 22 2008 at 15:31

Красотища!

newlipetsk Jul 22 2008 at 16:47

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

GKelpi Jul 22 2008 at 16:49

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

rimmer333 Jul 22 2008 at 16:56

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

Innuendo108 Jul 22 2008 at 17:04

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

Grayscale Jul 22 2008 at 17:50

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

andrejovdienko Jul 22 2008 at 17:08

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

AndreyTS Jul 22 2008 at 18:21

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

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

text-indent: -9999px;

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

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

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

bO_oblik Jul 22 2008 at 19:29

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

AndreyTS Jul 22 2008 at 19:40

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

bO_oblik Jul 22 2008 at 19:57

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

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

infuzoria Jul 22 2008 at 18:21

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

AndreyTS Jul 22 2008 at 18:34

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

UFO landed and left these words here

XAMelleOH Jul 22 2008 at 22:37

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

Tvarb Jul 22 2008 at 23:11

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

XAMelleOH Jul 22 2008 at 23:42

Вот именно:

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