Помогите с хитрым меню

[MiHALbI4]

В общем я с таким сталкиваюсь впервые, так что прошу вашей помощи. Есть горизонтальное меню, пункты которого (тег li) не фиксированы по ширине и зависят от текста в них. Хитрость в том, что по бокам у этого пункта есть картинки и при наведении они должны меняться. Долго ломал голову и сделал через JavaScript. Но вот косяк из-за использования id:

Дальше меня не хватило

Вот ту выкладываю архив с данным меню: http://rghost.ru/3728840

Если кто знает как помочь, то можете править прямо в указанном мной шаблоне. Заранее спасибо!

[Temiks]

Прочтите вот это, может поможет

http://htmlbook.ru/faq/kak-sdelat-chtoby-k...avedenii-na-nee

[MiHALbI4]

Там про одну картинку и у них фиксированная ширина. А у меня несколько и резиновая =) Не катит =(

[psywalker]

Там про одну картинку и у них фиксированная ширина. А у меня несколько и резиновая =) Не катит =(

Дружище, завтра попробуем тебе помочь

[ankoch]

MiHALbI4 я недавно так делал:

- обернул текст ссылки спаном <span class="ssilka">Текст ссылки<span>

- добавил спаны до и после этой конструкции, в результате ссылка стала выглядеть так

<a href="/ssilka-kuda-nado"> <span class="leviy"></span><span class="seredina">Текст ссылки</span><span class="praviy"></span> </a>

- после этого задал фоны для каждого класса соответственно (левому левый и т.д. =) ). Это всё делается внутри li.

- всё - растягивается как нужно с фоном

Если не требуется задавать каких-то градиентов, как сейчас в примере, то достаточно заложить только один спан (до или после ссылки) и задать фон для <a> и для добавленного спана.

Можно сделать как на этом сайте (см. верхнее меню htmlbook.ru). Для дива, в который обёрнута ссылка назначена длинная картинка (заранее длиннее самого длинного пункта меню) и расположена слева, а для спана назначена правая картинка. Посмотрите сами Firebug 'ом.

P.S. А скрипты тут конечно не нужны.

Edited December 24, 2010 by ankoch

[MiHALbI4]

MiHALbI4 я недавно так делал:

- обернул текст ссылки спаном <span class="ssilka">Текст ссылки<span>

- добавил спаны до и после этой конструкции, в результате ссылка стала выглядеть так

<a href="/ssilka-kuda-nado"> <span class="leviy"></span><span class="seredina">Текст ссылки</span><span class="praviy"></span> </a>

- после этого задал фоны для каждого класса соответственно (левому левый и т.д. =) ). Это всё делается внутри li.

- всё - растягивается как нужно с фоном

Если не требуется задавать каких-то градиентов, как сейчас в примере, то достаточно заложить только один спан (до или после ссылки) и задать фон для <a> и для добавленного спана.

Можно сделать как на этом сайте (см. верхнее меню htmlbook.ru). Для дива, в который обёрнута ссылка назначена длинная картинка (заранее длиннее самого длинного пункта меню) и расположена слева, а для спана назначена правая картинка. Посмотрите сами Firebug 'ом.

P.S. А скрипты тут конечно не нужны.

Я так понимаю, что тут показано как установить эти картинки. Но я не могу раскуриться как сделать, чтобы при наведении, например, на текст, менялись и боковые картинки тоже? Может легче примерчик какой-нибудь сделать?

[psywalker]

Я так понимаю, что тут показано как установить эти картинки. Но я не могу раскуриться как сделать, чтобы при наведении, например, на текст, менялись и боковые картинки тоже? Может легче примерчик какой-нибудь сделать?

Давай мне свою аську, возможно смогу помочь. Кидай её сюда.

[ankoch]

Я так понимаю, что тут показано как установить эти картинки. Но я не могу раскуриться как сделать, чтобы при наведении, например, на текст, менялись и боковые картинки тоже? Может легче примерчик какой-нибудь сделать?

Для того, чтобы менялись боковые картинки пишешь в css вместо этого (например)

a span.seredina: условия для пункта без наведения

вот это

a:hover span.seredina: условия для пункта с наведением

и так соответственно для крайних спанов (с классами leviy, praviy). Как это реализовать пошагово смотрите по ссылке во 2-м посте.

Edited December 24, 2010 by ankoch

[MiHALbI4]

Для того, чтобы менялись боковые картинки пишешь в css вместо этого (например)

a span.seredina: условия для пункта без наведения

вот это

a:hover span.seredina: условия для пункта с наведением

и так соответственно для крайних спанов (с классами leviy, praviy). Как это реализовать пошагово смотрите по ссылке во 2-м посте.

Все спасибо!!! Разобрался!