Как сделать фон вложеного меню отличным от родительского

Тема в разделе "Вопросы по работе с меню", создана пользователем al_hagen, 01.10.2012.

  1. Offline

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

    Регистрация:
    29.09.2012
    Сообщения:
    11
    Симпатии:
    1
    Пол:
    Мужской
    За основу был взят простейший шаблон likom25.
    Хотелось бы реализовать на основе данного шаблона следующее:
    Фон подменю имеет отличный от родительского цвет,
    При повторном нажатии на подменю оно сворачивается.
    В шаблоне имеется CSS Описание для трёх меню....
    особенно интересуют меню с суффиксом tabs и с суффиксом menu


    Буду благодарен за помощь, самому пока разобраться не удалось...:hz:
    Спасибо.
    Архив шаблона прилагается.
     

    Вложения:

    • likom25.zip
      Размер файла:
      403.8 КБ
      Просмотров:
      14
    al_hagen, 01.10.2012
    #1

  2. Наши спонсоры

     
  3. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 963
    Симпатии:
    168
    Пол:
    Мужской
    Открыть меню, чтобы появились вложенные пункты. Воспользуйтесь дополнение для Firefox - Firebug: кликаете по любому из вложенных пунктов пр.кн.мыши -> Инспуктировать элемент с помощью Firebug. Смотрите какой класс имеют вложенные пункты и применяете стили background только для этого класса.

    Пример:

    Код (html):
    1. <ul class="menu">
    2.     <li class="level_1">
    3.         <ul>
    4.             <li class="level_2"></li>
    5.             <li class="level_2"></li>
    6.         </ul>
    7.     </li>
    8.     <li class="level_1"></li>
    9.     <li class="level_1"></li>
    10. </ul>

    Пункты меню, имеющие класс level_2 - вложенные. Для того, чтобы изменить фон только вложенных пунктов меню - укажите:
    Код (CODE):
    1. li.level_2 {
    2.     background: ... ;
    3. }


    Для разворачивания/сворачивания пунктов можно воспользоваться библиотекой jQuery. Для этого нужно прописать для родительских пунктов меню событие click и действие появления вложенных пунктов.
    По-умолчанию в CSS для вложенных пунктов прописывается display: none;
    После клика по меню-родителю меняем атрибут вложенных пунктов на display: block;

    Учите JavaScript, если хотите делать меню сами! Или ищите на extensions.joomla.org подходящее вам расширение меню...
     
    Последнее редактирование: 01.10.2012
    AKopytenko, 01.10.2012
    #2
    al_hagen нравится это.
  4. Offline

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

    Регистрация:
    29.09.2012
    Сообщения:
    11
    Симпатии:
    1
    Пол:
    Мужской
    Спасибо за ответ.В том то все и дело., у меня немного все не так....
    Вложенного меню как такового то и нет..., стили для него не прописаны
    При попытке изменить цвет, меняется цвет всего меню....


    /*оформление главного меню с суффиксом menu*/
    .moduletablemenu {
    width:100%;
    font: bold 11px Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-align:left;
    margin-bottom:15px;
    background-color:#fff;
    }
    /*оформление заголовка меню */
    .moduletablemenu h3{
    font: bold 12px Arial, Helvetica, sans-serif;
    padding:5px 0 5px 0;
    border:5px solid #b2d1d7;
    color:#fff;
    background-color:#3b98b0;
    }
    /*оформление блока списка в меню */
    .moduletablemenu ul li {
    list-style:none;
    margin:5px;
    }
    .moduletablemenu li {
    padding-left:10px;
    padding-right:0px;
    background-color:#b2d1d7;
    }
    /*оформление блока ссылки в меню*/
    .moduletablemenu ul li a {
    display:block;
    padding:10px;
    text-decoration:none;
    color:#2d7486;
    border-bottom:1px dotted #2d7486;
    padding-left:5px;
    }
    /*посещенные и непосещенные ссылки*/
    .moduletablemenu a:visited,.moduletablemenu a:link{
    text-decoration:none;
    }
    /*ссылка при наведении*/
    .moduletablemenu li a:hover{
    display:block;
    text-decoration:underline;
    color:#3b98b0;
    background-color:#def3f7;
    }
     
    Последнее редактирование: 01.10.2012
    al_hagen, 01.10.2012
    #3
  5. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 963
    Симпатии:
    168
    Пол:
    Мужской
    Чтобы вложенные пункты имели свой класс:

    Расширения -> Менеджер модулей -> {ваше меню} -> Основные параметры -> Макет : current
     
    AKopytenko, 01.10.2012
    #4
  6. Offline

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

    Регистрация:
    29.09.2012
    Сообщения:
    11
    Симпатии:
    1
    Пол:
    Мужской
    У меня такого нет....[​IMG]
     
    al_hagen, 01.10.2012
    #5
  7. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 963
    Симпатии:
    168
    Пол:
    Мужской
    ой, это с virtuemart попутал...
    если у вас используется меню, работающее на основе стандартного mod_menu - у вас по-умолчанию открытый пункт меню имеет class="... current active"
    соответственно, чтобы применить стили ко вложенным пунктам - указываете стили:
    Код (CODE):
    1. li.active ul li {
    2. background: #... ;
    3. }
     
    AKopytenko, 01.10.2012
    #6
  8. Offline

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

    Регистрация:
    29.09.2012
    Сообщения:
    11
    Симпатии:
    1
    Пол:
    Мужской
    Спасибо большое!Очень помогли!
    Еще один вопросик, как сделать что бы при повторном нажатии меню сворачивалось??????????
     
    al_hagen, 06.10.2012
    #7
  9. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Команда форума

    Регистрация:
    01.09.2011
    Сообщения:
    1 963
    Симпатии:
    168
    Пол:
    Мужской
    Это jQuery, бро... :)
     
    AKopytenko, 06.10.2012
    #8
< Несколько меню на сайте | Не простое меню >

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

Загрузка...