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

Тема в разделе "Вопросы по работе с меню", создана пользователем Bp-Alex, 28.08.2010.

  1. Offline

    Bp-Alex Недавно здесь

    Регистрация:
    23.01.2010
    Сообщения:
    20
    Симпатии:
    0
    Пол:
    Мужской
    Уважаемые знатоки!
    Помня, как мне здесь уже оперативно оказали квалифицированную помощь, обращаюсь с вопросом снова.

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

    <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.
     
  2.  
  3. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    курить про 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
     
  4. Offline

    Bp-Alex Недавно здесь

    Регистрация:
    23.01.2010
    Сообщения:
    20
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо большое за ответ... Но... Эмммм.... А разве IE понимает селекторы дочерних элементов?
     
  5. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    а для IE в этом случае есть отдельные костыли :)
    да и пох на мелкомягких
    тебе сделать надо или угодить IE?

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

    Bp-Alex Недавно здесь

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

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

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    угу, но 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/
     
    Последнее редактирование: 29.08.2010
    Bp-Alex нравится это.
  8. Offline

    Bp-Alex Недавно здесь

    Регистрация:
    23.01.2010
    Сообщения:
    20
    Симпатии:
    0
    Пол:
    Мужской
    А в Опере вообще цирк))) Она понимает только значение ширины, присвоенное nth-child, но все остальные установки игнорирует))) Ни тебе padding, ни margin, ни даже background )))))) Ну что за, блин, задница)))))
     
  9. Offline

    Bp-Alex Недавно здесь

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

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

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

    Таким образом, надо фиксить и под всех них как-то %) Или искать другое решение....
     
    Последнее редактирование: 29.08.2010
  10. Offline

    Bp-Alex Недавно здесь

    Регистрация:
    23.01.2010
    Сообщения:
    20
    Симпатии:
    0
    Пол:
    Мужской
    Приведённые Вами костыли пока не прикрутил, разбираюсь, но вот что уже понятно:

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

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

    Bp-Alex Недавно здесь

    Регистрация:
    23.01.2010
    Сообщения:
    20
    Симпатии:
    0
    Пол:
    Мужской
    НЕТ! Не работают эти костыли... :'(

    А всё, похоже, потому, что эти скрипты "подменяют" псевдоселектор :nth-child на соответствующий класс, который и присваивают элементу.
    Но Джумла, зараза, всё равно дописывает класс li в списке этими идиотскими "list55" "list56" и т.д. %) И, что самое ужасное, он пишет его ПЕРЕД классом, присвоенным скриптом "костылей" ЧЕРЕЗ ПРОБЕЛ =O И не имеет значение, какой я при этом использую оператор: .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?
     
    Последнее редактирование: 29.08.2010
  12. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
  13. Offline

    Bp-Alex Недавно здесь

    Регистрация:
    23.01.2010
    Сообщения:
    20
    Симпатии:
    0
    Пол:
    Мужской

Поделиться этой страницей

Загрузка...