Joomla 1.5 Подсветка активного пункта меню и активного раздела многостраниченого документа

Тема в разделе "Создание шаблона", создана пользователем Andr0n, 03.08.2009.

  1. Offline

    Andr0n Недавно здесь

    Регистрация:
    30.06.2008
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Мужской
    Подсветка активного пункта меню и активного раздела многостраниченого документа Решено

    Занимаюсь переносом сайта с 1.0 на 1.5. Шаблон под 1.5 приходится верстать заново. Наткнулся на две вещи, которые никак не удается победить:

    1. Подстветка активного пункта меню

    HTML меню, который генерит Джумла выглядит следующим образом:

    Код (PHP):
    1. <div id="right">
    2. <ul class="menu">
    3.     <li class="item1">
    4.         <a href="/index.php"><span>Главная</span></a>
    5.     </li>
    6.     <li class="item3">
    7.         <a href="/index.php/about"><span>Об авторе</span></a>
    8.     </li>
    9.     <li id="current" class="active item2">
    10.         <a href="/index.php/travel"><span>Путешествия</span></a>
    11.     </li>
    12.     <li class="item4">
    13.         <a href="/index.php/feedback"><span>Обратная связь</span></a>
    14.     </li>
    15. </ul>
    16. </div>


    Как я понимаю, за активный пункт меню отвечает id="current". Задаю стили для class="menu" и для id="current" (перепробовал несколько вариантов, это самый последний):

    Код (PHP):
    1. .menu {
    2.     font-size: 0.95em;
    3.     text-decoration: none;
    4.     font-weight: normal;
    5.     text-align: left;
    6. }
    7.  
    8. ul.menu {
    9.     padding: 0.7em 0 1em 0;
    10.     margin: 0 0 0 10px;
    11. }
    12.  
    13. ul.menu li {
    14.     background: url(../images/arrow-blue.png) no-repeat left;
    15.     list-style-type: none;
    16.     margin: 0;
    17.     padding: 0.3em 0 0.3em 15px;
    18.     border-bottom: 1px dotted #445566;
    19. }
    20.  
    21. ul.menu li a:link, ul.menu li a:visited {
    22.     text-decoration: none;
    23.     color: #F00;
    24.     font-weight: normal;
    25. }
    26.  
    27. ul.menu li a:hover {
    28.     text-decoration: none;
    29.     color: #333;
    30.     font-weight: normal;
    31. }
    32.  
    33. li#current a:link, li#current a:visited {
    34.     text-decoration: none;
    35.     color: #000;
    36.     font-weight: normal;
    37. }
    38.  
    39. li#current a:hover {
    40.     text-decoration: none;
    41.     color: #333;
    42.     font-weight: normal;
    43. }


    Не реагирует - активный пункт не выделяется, при наведении мышкой тоже ничего не подсвечивается. Стили для стандартных a, ul, li в файле CSS также есть, но выше.

    2. Подсветка активного раздела многостраничного документа.

    Есть документ, который разбит на стрницы стандартной джумловой функцией. В начале документа выводится его оглавление. HTML, который генерит Джумла, выглядит следующим образом:

    Код (PHP):
    1. <table cellpadding="0" cellspacing="0" class="contenttoc">
    2. <tr>
    3.     <th>Оглавление</th>
    4. </tr>
    5. <tr>
    6.     <td>
    7.     <a href="/index.php/travel/1-v" class="toclink">Введение</a>
    8.     </td>
    9. </tr>
    10. <tr>
    11.     <td>
    12.     <a href="/index.php/travel/1-v?start=1" class="toclink">Часть первая.</a>
    13.     </td>
    14. </tr>
    15. <tr>
    16.     <td>
    17.     <a href="/index.php/travel/1-v?start=2" class="toclink active">Часть вторая.</a>
    18.     </td>
    19. </tr>
    20. <tr>
    21.     <td>
    22.     <a href="/index.php/travel/1-v?start=3" class="toclink">Часть третья.</a>
    23.     </td>
    24. </tr>
    25. </table>


    В файле CSS задал стили для class="contenttoc" и class="toclink". С этим все ясно. Но никак не пойму, каким образом задать стиль для class="toclink active". Что вообще означает "toclink active"? Ведь это не может быть названием класса?

    Смотрел стандартные шаблоны из дистрибутива, но в них для оглавления вообще ничего нету, а меню в JA_Purity вообще со своими классами написано.

    Как с этим бороться?
     
    Последнее редактирование: 04.08.2009
  2.  
  3. Offline

    Andr0n Недавно здесь

    Регистрация:
    30.06.2008
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Мужской
    Вроде решил проблему. Получился вот такой код:

    Код (PHP):
    1. .menu {
    2.     font-size: 0.95em;
    3.     text-decoration: none;
    4.     font-weight: normal;
    5.     text-align: left;
    6. }
    7.  
    8. ul.menu {
    9.     padding: 0.7em 0 1em 0;
    10.     margin: 0 0 0 10px;
    11. }
    12.  
    13. ul.menu li {
    14.     background: url(../images/arrow-blue.png) no-repeat left;
    15.     list-style-type: none;
    16.     margin: 0;
    17.     padding: 0.3em 0 0.3em 15px;
    18.     border-bottom: 1px dotted #445566;
    19. }
    20.  
    21. ul.menu li a:link, ul.menu li a:visited {
    22.     text-decoration: none;
    23.     color: #F00;
    24.     font-weight: normal;
    25. }
    26.  
    27. ul.menu li a:hover {
    28.     text-decoration: none;
    29.     color: #333;
    30.     font-weight: normal;
    31. }
    32.  
    33. #current a:link, #current a:visited {
    34.     text-decoration: none;
    35.     color: #0F0;
    36.     font-weight: normal;
    37. }
    38.  
    39. #current a:hover {
    40.     text-decoration: none;
    41.     color: #000;
    42.     font-weight: normal;
    43. }


    Но вот со второй проблемой так ничего сделать не получается. Понимаю, что можно решить проблему отредактировав код, но наверняка она как-то без этого решается.
     
  4. Offline

    Andr0n Недавно здесь

    Регистрация:
    30.06.2008
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Мужской
    Как-то я сам с собой разговариваю :D

    В общем вторая задача тоже решена. Пришлось только спецификацию на CSS изучить. Вот что получается:

    Код (PHP):
    1. .contenttoc {
    2.     border: 1px dotted #445566;
    3.     padding: 1em 1em 1em 3em;
    4.     text-align: left;
    5.     width: 100%;
    6. }
    7.  
    8. .contenttoc th {
    9.     font-size: 1em;
    10.     font-weight: bold;
    11. }
    12.  
    13. .contenttoc td {
    14.     font-size: 0.95em;
    15.     font-weight: normal;
    16. }
    17.  
    18. a.toclink:link, a.toclink:visited, a.toclink:hover {
    19.     font-weight: bold;
    20.     color: #0F0;
    21. }
    22.  
    23. a.active:link, a.active:visited, a.active:hover {
    24.     font-weight: bold;
    25.     color: #F00;
    26. }


    Но вообще нет никакого единообразия у программистов. В меню они активный пункт через id помечают, в оглавлении через дополнительный класс. И документации по созданию шаблонов создать не удосужились.

    Тему можно закрывать.
     
  5. Offline

    _soldat_ Недавно здесь

    Регистрация:
    26.03.2009
    Сообщения:
    78
    Симпатии:
    2
    Пол:
    Мужской
    норма, мне тож пригодится темка )
     
  6. Offline

    witcatchers-com Недавно здесь

    Регистрация:
    31.05.2010
    Сообщения:
    62
    Симпатии:
    1
    Пол:
    Мужской
    меня тоже интересует 1-й вопрос темы. Но такого кода как у вас в моем шаблоне сроду не было. Шаблон сделан в Artisteer 2.
    Моя тема с проблемой - http://joomla-support.ru/thread1764-2.html
     
  7. Offline

    paintballmfp Недавно здесь

    Регистрация:
    28.03.2011
    Сообщения:
    1
    Симпатии:
    0
    Пол:
    Мужской
    Коллеги, нуждаюсь в вашей помощи!
    Сайт www.paintballmfp.ru
    1. Как сделать в верхнем горизонт. меню чтобы родительский пункт (Площадки) не нажимался, а только раскрывал подменю и при активном пункте подменю родительская кнопка (Площадки) подсвечивалась
    2. Как сделать, чтобы в главном меню при нажатии пункта (Выбрать площадку) пункт раскрывался на подменю
    Спасибо
     

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

Загрузка...