Меню при наведении с тенью. КАК?

**DELPHIna** · 30.03.2007, 12:46

Еть горизонтальное меню основным фоном. При наведении мышью и при активном пункте фон становиться белым + слева-сверху и справа по краям градиентная тень серая допустим.

Какое бы решение Вы предложили бы?
что то с идеями никак....либо слишком громоздко думается. К чему возможно привязать картинки тени? или как это вообще делается на Css?

<div id="menu">
<ul id="navlist">[*][Только зарегистрированные пользователи могут видеть ссылки. ][*][Только зарегистрированные пользователи могут видеть ссылки. ][*][Только зарегистрированные пользователи могут видеть ссылки. ][*][Только зарегистрированные пользователи могут видеть ссылки. ][/list]

[/quote]

P.S. и именно только когда ссылка a:hover и a:active тогда тень есть.

**Aykroyd** · 30.03.2007, 14:07

Никаких проблем. )
Просто вместо фонового цвета вставляем в CSS фоновые изображения для ссылок...

**DELPHIna** · 30.03.2007, 14:33

Aykroyd, так получиться только, если нам известно размер пунктов меню....

а если неизвестен???

в меню может быть и пункт: "Контакты" и может быть длинная фраза "Обслуживание техники ККМ" например...

нужно чтобы не привязывался фон к размеру пункта меню!

**Aykroyd** · 30.03.2007, 14:43

Либо уравниваем по ширине все пункты, либо для каждого пункта – индивидуальный кусок фона. Оба варианта приемлемы.

**DELPHIna** · 30.03.2007, 14:45

**либо для каждого пункта – индивидуальный кусок фона*** ну как же я узнаю заранее какого размера будет пункт меню???

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

И всё таки...есть ли возможность сделать именно тени слева - сверху-справа к ссылке которую нажимают и нажали уже???

**Zigzag** · 31.03.2007, 16:37

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

**DELPHIna** · 31.03.2007, 23:22

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

**Zigzag** · 01.04.2007, 00:07

[Только зарегистрированные пользователи могут видеть ссылки. ]
вот здесь в меню я использовал этот прием, хотя пример не самый удачный, т.к. меню очень простое, но для примера, думаю, сойдет

**Aykroyd** · 01.04.2007, 00:22

Пример весьма удачный. ) И меню симпатичное. ))
Но видишь, Паш, какая тут заковыка – тень нужна слева-сверху-справа. А при неизвестной ширине блока это мне кажется невозможным... Может быть ошибаюсь... )

**Zigzag** · 01.04.2007, 01:42

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

**DELPHIna** · 02.04.2007, 09:48

Zigzag ...да...пример Вы дали, да не тот.... Это не моё дело руки дизайнеру отрубать

Мне дали, я должна нарезать..... Вот если всё таки есть такое заддание....как же кго сделать то? Неужели нет идей никаких??? А?

**Aykroyd** · 02.04.2007, 12:56

К нам посылайте – мы отрубим... )
Мало ли что Вам там дали. Более того, то, что Вам дали, вряд ли реализуемо и при табличной модели. Вы над этим не задумывались?

**DELPHIna** · 02.04.2007, 13:47

Aykroyd при табличной вёрстке это элементарно....я так уже 100 раз делала....может ячто не так объясняю...см. рисунок ниже:

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

**Aykroyd** · 02.04.2007, 13:58

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

**DELPHIna** · 02.04.2007, 14:18

Aykroyd.... что то Вы меня совсем в тупик ввели...

вот смотрите ниже...я прикрепляю картинки и файлик.... я вот про такое говорю....вот такое мне нужно только на div сделать:

Код:

<body bgcolor="f3e8a6">
<table width="50%" border="0" cellspacing="0" cellpadding="0">
 *<tr> 
 * *<td height="2" colspan="3" *style="background: url(menu_top.gif) *top repeat-x;"></td>
 *</tr>
 *<tr> 
 * *<td width="5" *style="background: url(menu_left.gif) *top left repeat-y;"></td>
 * *<td width="100%" align="center" bgcolor="FFFFFF">текст </td>
 * *<td width="5" *style="background: url(menu_right.gif) *top right repeat-y;"></td>
 *</tr>
 *<tr> 
 * *<td colspan="3" ></td>
 *</tr>
</table>
</body>

вот пункт меню с тенью на таблицах

**Aykroyd** · 02.04.2007, 14:35

Originally posted by DELPHIna@Apr 2 2007, 14:18
Aykroyd.... что то Вы меня совсем в тупик ввели...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Это моя специальность. )))

Цитирую самый первый пост:
<div class='quotetop'>Цитата</div>

При наведении мышью и при активном пункте фон становиться белым + слева-сверху и справа по краям градиентная тень серая допустим.[/b]

Это как понимать? Ладно...

Не знаю. Если только поверху[*] – верхнюю тень, а по бокам – два вложенных дива с абсолютным позиционированием... Но это великое извращение, на которое лично я бы никогда не пошел, послав дизайнера куда-подальше...

**Scorched.dn.ua** · 02.04.2007, 18:43

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

**Aykroyd** · 02.04.2007, 18:49

Originally posted by Scorched.dn.ua@Apr 2 2007, 18:43
не вижу смысла при решении этой задачи избегать использования таблиц, заменяя их на дивы. красивее верстка от этого уж точно не станет.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Если по Вашему мнению блочная модель приносит плоды только в качестве красивой верстки, то несомненно...

**Scorched.dn.ua** · 02.04.2007, 18:50

заменив таблицы на дивы в данном случае мы не получим выгоды ни в каком плане

**Aykroyd** · 02.04.2007, 19:02

Честно говоря, не ожидал... )

Как насчет версий для печати, PDA, брайля? Искусственного интеллекта, способного отличить ячейку с навигацией от ячейки с основным содержимым, пока еще не изобрели...

Тема: Меню при наведении с тенью. КАК?

Опции темы

Поиск по теме

Отображение

Похожие темы

Замена картинки при наведении

Штрихованный фон+блок с тенью

масштаб при наведении

RuzeeBirders: проблема с тенью

Придание объёма светом и тенью в Illustrator

Ваши права