У меня сложности с реализацией меню такого типа (примеры прикрепил)
Может кто-нибудь поделится опытом, как это реализовать, или может кто-нибудь скинет линк на пример?
У меня сложности с реализацией меню такого типа (примеры прикрепил)
Может кто-нибудь поделится опытом, как это реализовать, или может кто-нибудь скинет линк на пример?
А что тут сложного... на мой взгляд ничего сверхъестественно тут нет, вопрос просто в усидчивости. Как бы сделал я:
сверстал при помощи таблиц, в фотошопе нарезаются края этих менюшек, т.е. те элементы которые имеют закругления, углубления, в общем не тупо прямые линии.
Так каждый элемент вырезаешь. Геморройно конечно, не спорю, но другого выхода нет, хотя есть... отойти от использования этого дореволюционного дизайнерского хода.
вот бери! Не надо таблиц Не надо вообще ничего!
Это вставь в HTML
Это вставь в CSSКод:<ul class="glossymenu"> ****<li class="current">[Только зарегистрированные пользователи могут видеть ссылки. ] ****[*][Только зарегистрированные пользователи могут видеть ссылки. ] ****[*][Только зарегистрированные пользователи могут видеть ссылки. ]**** ****[*][Только зарегистрированные пользователи могут видеть ссылки. ]**** ****[*][Только зарегистрированные пользователи могут видеть ссылки. ]**** ****[*][Только зарегистрированные пользователи могут видеть ссылки. ]****[/list]
Обрати внимание на название картинок! они могут не совпадать с текстом в коде для CSS.Код:.glossymenu{ ****position: relative; ****padding: 0 0 0 34px; ****margin: 0 auto 0 auto; ****background: url(media/menur_bg.gif) repeat-x; ****height: 46px; ****list-style: none; } .glossymenu li{ ****float:left; } .glossymenu li a{ ****float: left; ****display: block; ****color:#000; ****text-decoration: none; ****font-family: sans-serif; ****font-size: 13px; ****font-weight: bold; ****padding:0 0 0 16px; ****height: 46px; ****line-height: 46px; ****text-align: center; ****cursor: pointer;**** } .glossymenu li a b{ ****float: left; ****display: block; ****padding: 0 24px 0 8px; } .glossymenu li.current a, .glossymenu li a:hover{ ****color: #fff; ****background: url(media/menur_hover_left.gif) no-repeat; ****background-position: left; } .glossymenu li.current a b, .glossymenu li a:hover b{ ****color: #fff; ****background: url(media/menur_hover_right.gif) no-repeat right top; }
Не поймешь отпишись сюда!
Согласен! Никаких таблиц! Прошлый век! Только css и минимум графики! Вебдваноль!