AntonShevchuk Feb 22 2008 at 18:00

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

4 min

7.5K

Website development*

Comments 28

AntonShevchuk Feb 22 2008 at 18:19

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

Baziak Feb 22 2008 at 18:28

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

Sabiko Feb 22 2008 at 19:16

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

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

AntonShevchuk Feb 22 2008 at 19:52

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

ghopstop Feb 22 2008 at 23:18

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

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

StopDesign Feb 22 2008 at 19:28

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

AntonShevchuk Feb 22 2008 at 19:52

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

UFO just landed and posted this here

Kavu Feb 22 2008 at 20:03

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

va1en0k Feb 22 2008 at 20:15

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

elfiki Feb 23 2008 at 16:22

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

va1en0k Feb 23 2008 at 19:14

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

elfiki Feb 23 2008 at 19:16

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

va1en0k Feb 23 2008 at 19:18

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

elfiki Feb 23 2008 at 19:21

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

va1en0k Feb 23 2008 at 19:23

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

elfiki Feb 23 2008 at 19:26

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

zet Feb 22 2008 at 20:37

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

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

NotXakep Feb 22 2008 at 21:06

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

OldFornit Feb 22 2008 at 21:06

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

redcop Feb 22 2008 at 22:59

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

-1

6epcepk Feb 23 2008 at 12:36

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

ignatov Feb 23 2008 at 17:28

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

AntonShevchuk Feb 24 2008 at 16:52

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

fl1p Feb 24 2008 at 14:14

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

UFO just landed and posted this here

PaulColomiets Feb 25 2008 at 11:48

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

ipevgeny Apr 4 2008 at 17:28

Полезно.

Show the best of all time