Joomla 1.5 Как создать отдельные стили для отдельных пунктов меню? (в конкретном примере)

Уважаемые знатоки!
Помня, как мне здесь уже оперативно оказали квалифицированную помощь, обращаюсь с вопросом снова.

Задача вот какая.
Делаю горизонтальное меню, и необходимо, чтобы оно было следующего вида:

<ul>
<li class="class1">пункт1</li>
<li class="class2">пункт2</li>
<li class="class1">пункт3</li>
<li class="class2">пункт4</li>
<li class="class1">пункт5</li>
</ul>

То есть только 2 класса для пунктов меню, применяемые поочерёдно.

Всё бы хорошо, и даже стандартное "оборачивание" списка в <div> Джумлой - тоже не проблема, но вот эти назойливые привязки каждому пункту списка классов типа "item23", "item50" мешают до зуда.

Пока придумал только одно зверски кривое решение и ещё одно - зверски неудобное.
Кривое -это создать дополнительно 5 позиций и вывести в каждой по модулю с одним только пунктом меню. Ужасно громоздкое "решение".
А неудобное - это каждый раз смотреть, какой класс присвоен конкретному <li> и править под него CSS. Геморрно.

Может быть кто подскажет, что в этом случае ещё можно придумать?

Хорошо бы (ну это уже из области перфекционизма), чтобы для этого нужно было работать только с шаблоном, не внося изменения в остальные файлы Joomla.

 

курить про nth-child
немного манов
http://css-tricks.ru/Articles/Details/HowNthChildWorks
http://www.htmlbook.ru/css/nth-child.html
http://www.quirksmode.org/css/nthchild.html
http://reference.sitepoint.com/css/pseudoclass-nthchild
http://api.jquery.com/nth-child-selector/

общая логика:
задаем css стиль для конкретного меню (есть же уникальный класс для этого горизонтального меню) с уточнением, что для листа четного - стиль 1, для нечетного - 2

 

Спасибо большое за ответ... Но... Эмммм.... А разве IE понимает селекторы дочерних элементов?

 

а для IE в этом случае есть отдельные костыли
да и пох на мелкомягких
тебе сделать надо или угодить IE?

для IE вот посмотри http://code.google.com/p/ie7-js/issues/detail?id=202 (сам это не пробовал, сказать за тему не смогу)

 

Ндяяяя.... В нормальных браузерах всё работает... А вот IE, зараза....
Разбивается весь дизайн (((
Хуже того: я даже не понимаю, собственно, в чём происходит эксплореровский затуп: как именно он читает правило ul li:nts-child(odd) ... То есть он не замечает только селектор, или игнорирует всё правило?

Я не очень понял смысла приведённого фикса под "Ё-моё". Там речь идёт, похоже, о прикрутке JS?
Просто согласно этой статье, проблема должна быть только в таблицах, где нормальные браузеры при определении стилей для чётных-нечётных строк tbody ведут отсчёт с первой строки tbody, а тупой IE считает от строки thead. Таким образом, в IE просто чёт-нечет меняются местами...
Более того, фикс в примере на этой статье прикручен только для IE8 (если верить условным комментариям в коде HTML примера).
У меня же шестой эксплорер вообще наотрез отказывается видеть правила для nts-child (((

 

угу, но js отдавать только IE, причем - лучше указать конкретные версии для подгрузок конкретных js (там в архиве для ,7, 8, 9 скрипты и сырцы, чтоб лишнее вырезать)
если хочется чтоб и в IE nth-child запахали

пысы: http://code.google.com/p/ie7-js/

а для IE6 придется отдельную колясочку делать
типа такого http://www.thebrightlines.com/2010/01/31/hack-how-to-enable-first-child-in-ie6/ (аналогия есть, можно еще погуглить)
ну и это просмотреть http://skulljackpot.com/2009/04/19/super-css-selector-support-with-jquery/

 

А в Опере вообще цирк))) Она понимает только значение ширины, присвоенное nth-child, но все остальные установки игнорирует))) Ни тебе padding, ни margin, ни даже background )))))) Ну что за, блин, задница)))))

 

Хотя нет... Методом проб и ошибок при помощи научного тыка и такой-то матери выяснил, что Опера (9,24) тоже не понимает этот псевдо-селектор. Вообще.
Но, несмотря на то, что для неё, получается, ширины элементов li не определены, она их флоутит друг к другу, а не располагает как IE один под другим с определением ширины во всю область.

Avant Browser реагирует по аналогии с IE.

Одним словом, все старинные браузеры восстают против этого решения...

Таким образом, надо фиксить и под всех них как-то Или искать другое решение....

 

Приведённые Вами костыли пока не прикрутил, разбираюсь, но вот что уже понятно:

скрипт http://code.google.com/p/ie7-js/ не подойдёт для большого сайта - слишком сильно загрузит систему, из-за чего серьёзно упадёт скорость подгрузки страниц.

И оффтоп на правах разгрузки: забавно было просмотреть страницу хаков под IE6 ( http://www.thebrightlines.com/2010/01/31/hack-how-to-enable-first-child-in-ie6/ ) в самом, собсна, IE6 ))))) Там не просто дизайн распадается - там вообще чёрт-те что творится со страницей, да ещё и реклама какая-то нелепая (русскоязычная!!!) вылезает))) Сапожник без сапог)))
Но скрипт там полезный...

 

НЕТ! Не работают эти костыли...

А всё, похоже, потому, что эти скрипты "подменяют" псевдоселектор :nth-child на соответствующий класс, который и присваивают элементу.
Но Джумла, зараза, всё равно дописывает класс li в списке этими идиотскими "list55" "list56" и т.д. И, что самое ужасное, он пишет его ПЕРЕД классом, присвоенным скриптом "костылей" ЧЕРЕЗ ПРОБЕЛ И не имеет значение, какой я при этом использую оператор: .addClass или .togggleClass
В итоге классы элементов имеют следующий вид:

<li class="item55 odd"><li>

Вообще бред! Странно, но, собственно, правила li.item55 { } в этом случае РАБОТАЮТ! То есть браузер не замечает того, что через пробел написано ещё что-то! Ну вот если бы Джумла хотя бы в конец дописывала свою лабуду, всё бы работало!

Так что этот вариант отпадает. Равно как и целый день работы Хотя приблуда, заставляющая IE6 работать почти как IE7, конечно, любопытная, спасибо за неё! Но не для Джумлы ((( Не для этого конкретного случая (((

Я использовал скрипт jquery-1.4.2.min.js в таком виде:

<script type="text/javascript">
$(document).ready(function(){
$('ul li:nth-child(odd)').addClass('odd');
$('ul li:nth-child(even)').toggleClass('even');
});
</script>


Есть ещё какие-нибудь предложения?

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

 

в joostina mitrich сделал меню, позволяющее задавать уникальный стиль к КАЖДОЙ ссылке
поищи на http://mitrichlab.ru по имени меню ML Joostina Menu
может идеи оттуда возьмешь

upd:
http://mitrichlab.ru/component/option,com_phocadownload/Itemid,56/download,2/id,1/view,category/

 

Ага, спасибо, уже отыскал! Буду копать...