CSS меню для начинающих

[@AntonShevchuk]

Почему "в стиле web 2.0"?
...сам не знаю, предложите иное название для данного топика, оно меня тоже смущает...

[@Baziak]

"CSS меню в стиле Web 3.0!"

[@Sabiko]

"Стандартное меню для начинающих"?

Я думала, хоть спрайты будут)

[@AntonShevchuk]

О, спасибо...

[@ghopstop]

Ну и не «для начинающих». В оригинале само меню было всё же «advanced».

Да кстати не в последнюю очередь оригинальная статья хорошо воспринималась за счет тамошних картинок.

[@StopDesign]

Ужас какой-то... И от web 2.0 только название.

[@AntonShevchuk]

Убрал из названия, остался только "ужас" :)

[@Kavu]

Спасибо, утащил в копилку полезностей) Ждем еще чего-то такого плана)

[@va1en0k]

а что, это нельзя сделать, не увеличивая картинки в 2 раза, а лишь нарисовав один эллипс на прозрачном фоне?

[@elfiki]

тогда при наведении картинка будет подгружаться и появится не сразу...

[@va1en0k]

сделать так, чтобы картинка загружалась сразу по открытии страницы - не так уж и сложно

[@elfiki]

Но надо "запариться", да и чем больше картинок - тем больше обращений к серверу и ожиданий ответа от него...

[@va1en0k]

неужели одна лишняя картинка того же размера хуже, чем увеличение вдвое всех картинок?

[@elfiki]

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

[@va1en0k]

вы не поняли ;)
у нас одна картинка с бордюрчиком на все картинки без
если у всех одинаковая ширина, то все выходит чудесно

[@elfiki]

А если бордюрчики разные как в сабжевом случае, то картинка совсем не одна получается...

[@zet]

В спаны лучше бы и прописали этот текст с подсказкой.
Хотя я бы даже использовал <small> — семантически ничего не меняется, но без css визуально отличие будет.
Ну и раз для начинающих, то объяснили бы, что title — тоже полезный атрибут.

<li><a href="#" class="home" title="Home">Home <small>(go to home)</small></a></li>

[@NotXakep]

Спасибо за топик! Вы разложили всё по полочкам.
Я долгими вечерами сидел над аналогичным скриптом с apple.com где iPod Shuffle меняет свой цвет от нажатия на картинки-кнопки, там и менюшка аналогичная была... А так как я ни в CSS, ни в JavaScript не особо силён - то очень запутался :(
Но Вы помогли!

[@OldFornit]

а я допустим отключу графику. И что, буду смотреть в девственно белый экран?

[@redcop]

диалап форевер :)

[@6epcepk]

Ну так и надо говорить: урок переведен с такого-то сайта:
http://www.webdesignerwall.com/tutorials/advanced-css-menu/
http://88.198.60.17/images/50-css-techniques/css32.png
:gigi:

[@ignatov]

Полностью согласен. Статья из Smashing Magazine.
Знаете ли, есть такой раздел блогов под названием "Переводы". Вам туда. И картинки верните оригинальные.

[@AntonShevchuk]

Собственно в конце статьи так и написано...

[@fl1p]

Бррр... Зачем absolute, relative, top, left? background-position уже не в моде? :)

[@PaulColomiets]

Как по мне, то, что каждое слово выделяется по-разному - раздражает. А "раздражающий" (даже в хорошем смысле слова) стиль меню уже немного в прошлом. Меню должно быть не заметным до того момента пока не нужно, и выполнять лишь одну, очевидную, задачу когда нужно. Хотя может я и сильно консервативен.