Фон каждого пункта меню разный.

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО

Как сделать у каждого пункта меню свой цвет фона

#1 29 августа 2012 в 20:14

Здравствуйте! Просьба, помочь разобраться:

При наведении на определенный пункт меню, данный пункт подсвечивался своим цветом.
При переходе на этот пункт меню его цвет оставался таким же как и при наведении.

Подскажите, вообще можно реализовать такое со стандартным меню.
Спасибо за внимание.

#2 29 августа 2012 в 20:45

Нужно в mod_menu.tpl пронумеровать каждый пункт(желательно 1 уровня) добавив номер в класс, потом в файле стилей прописать цвета под соответствующий номер. Это конечно в 2 словах, на самом деле все будет немного сложнее.
Надеюсь кто-то поможет вам более детально разобрать все шаги.

Dezerit Templates - верстка, шаблоны, дополнения для InstantCMS

#3 30 августа 2012 в 18:30

Решение:
1. Привязку стиля к меню делаем через id меню, неудобно, но пока не нашел другого решения.
В классе class="selected" добавляем следующий параметр "{$item.id}" У меня получилось следующее:

{if $item.NSLevel <= 1}
            <li {if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)) && $item.NSLevel<=1}class="selected_{$item.id} "{/if}>
         {/if}
        {if $item.NSLevel <= 1}
            <a href="{$item.link}" target="{$item.target}" {if $menuid==$item.id}class="selected_{$item.id}"{/if} title="{$item.title|escape:'html'}">
                {if $item.iconurl}<img src="/images/menuicons/{$item.iconurl}" alt="{$item.title|escape:'html'}" />{/if} {$item.title}
            </a>
        {else}

В файле style.css клонируем следующую строчку:

#topmenu .menu li.selected{
    background:url(../images/menubg.jpg) repeat-x left top #375E93;
}

и редактируем под себя, например:

#topmenu .menu li.selected_10{
    background:#000000;
}
#topmenu .menu li.selected_13{
    background:#ffffff;
}

Сохраняем и проверяем:)
3. Не разобрался как сделать у каждого пункта меню свой стиль "a:hover" кто сможет подсказать где копать, буду весьма благодарен:)

Сегодня в 08:03

#4 30 августа 2012 в 18:38

Правильно понимаю что копать нужно здесь(?):

{foreach key=key item=item from=$items}
 
        {if $item.NSLevel == $last_level}</li>{/if}
        {math equation="x - y" x=$last_level y=$item.NSLevel assign="tail"}
        {section name=foo start=0 loop=$tail step=1}
            </li></ul>
        {/section}

Почему здесь нигде не открывается тег "<li>", а только закрывается?
Хотел привязать li к id меню и создать соответствующие стили. Подскажите как это реализовать.

#5 30 августа 2012 в 18:46

Не разобрался как сделать у каждого пункта меню свой стиль "a:hover" кто сможет подсказать где копать, буду весьма благодарен:)

    #topmenu .menu li.selected_10:hover{
    background:#000000;
    }
    #topmenu .menu li.selected_13:hover{
    background:#ffffff;
    }

можно задать !important если стили перебиваются, также для тега а тоже не мешало бы стили пробить

  #topmenu .menu li.selected_10:hover a{
    background:#000000;
    }
    #topmenu .menu li.selected_10:hover a:hover{
    background:#ffffff;

Dezerit Templates - верстка, шаблоны, дополнения для InstantCMS

#6 30 августа 2012 в 19:01

Не разобрался как сделать у каждого пункта меню свой стиль "a:hover" кто сможет подсказать где копать, буду весьма благодарен:)
    #topmenu .menu li.selected_10:hover{
    background:#000000;
    }
    #topmenu .menu li.selected_13:hover{
    background:#ffffff;
    }
можно задать !important если стили перебиваются, также для тега а тоже не мешало бы стили пробить
  #topmenu .menu li.selected_10:hover a{
    background:#000000;
    }
    #topmenu .menu li.selected_10:hover a:hover{
    background:#ffffff;
Dezerit

Я видимо не правильно выразился, то что вы выше написали работает только для пунктов меню с классом "selected", а как сделать тоже самое для пунктов меню без класса "selected"?
Не могу найти где формируется пункт меню, т.е. где открывается тег <li>, нашел где закрывается:

{foreach key=key item=item from=$items}
 
        {if $item.NSLevel == $last_level}[b]</li>[/b]{/if}
        {math equation="x - y" x=$last_level y=$item.NSLevel assign="tail"}
        {section name=foo start=0 loop=$tail step=1}
            [b]</li>[/b]</ul>
        {/section}

Помогите разобраться в коде.

#7 3 сентября 2012 в 17:34

неужели никто не знает?:)

#8 3 сентября 2012 в 19:28

По моему скромному мнению вы все усложняете. Сделайте просто слой-подложку нужным градиентом, а верхний слой-маску по hover или active хоть убирайте вовсе, хоть сдвигайте. Все зависит от конкретного дизайна. С помощью transition можно плавность перехода обеспечить… Ну где-то так…

Skype: pasha--g

#9 4 сентября 2012 в 01:31

braincord, в mod_menu.tpl найдите строку

 <li {if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)) && $item.NSLevel<=1}class="selected"{/if}>

Измените ее на

 <li class="color{$item.id} {if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)) && $item.NSLevel<=1}selected{/if}>"

пункты пронумерует по их id, точный id можно посмотреть в конце урла в админке при наведении на конкретный пункт меню. Ваши менюшки будут иметь классы color7, color8 и.т.п. в зависимости от их id. Советую обзавестись firebug-ом для удобного просмотра. Далее в файле стиле вам нужно указать правила для этих класов

 
/*Для всех остальных*/
.menu li{background: blue;}
.menu li:hover{background: black;}
 
/*Для главной*/
.menu > li:first-child{background-color: red;}
.menu > li:first-child:hover{background-color: black;}
 
/*Определенные цвета*/
.menu > li.color7{background-color: orange;}
.menu > li.color7:hover{background-color: black;}
 
.menu > li.color8{background-color: pink;}
.menu > li.color8:hover{background-color: black;}

для отметки текущего нужно написать стили для класса selected, например

 
.menu > li.color7.selected{background-color: black;}

Dezerit Templates - верстка, шаблоны, дополнения для InstantCMS

#10 5 сентября 2012 в 18:59

Измените ее на

Код PHP:
<li class="color{$item.id} {if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)) && $item.NSLevel<=1}selected{/if}>"

Dezerit

Все работает, спасибо большое, только пункты меню, кроме "Главная" стали некликабельными.
Ковычки надо было поставить перед знаком — ">" т.е. так:

<li class="color{$item.id} {if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)) && $item.NSLevel<=1}selected{/if}">

но тогда hover снова не работает sad

Нашел в чем причина: в style.css

#topmenu .menu li a:hover,
{
    background:url(../images/menubg-hover.jpg) repeat-x center top #375E93;
    color:#000 !important;
    text-shadow:0 1px 0px #FFF !important;
}

!important — перекрывал новые стили.
Удалил эту запись и добавил в
.menu > li.color8:hover{background-color: black !important;}
Теперь все работает! Спасибо+ dance

#11 5 сентября 2012 в 19:36

а кстати задачка решена:) тему закрываю.

Модуль инвайт+ реферальная ссы

Иконки в меню, загрузка png ик

Фон каждого пункта меню разный.

Похожие темы

Как сделать фон на высоту экрана с прокруткой только на содержимое сайта

Как объекту/позиции типа контента дать свои пункты/категории? Меню для каждого объекта

[ЕСТЬ РЕШЕНИЕ] Зависает редактирование пункта меню в админке

[ЗАКРЫТО] Фон на сайте в мобильной версии

Главное меню - разный вывод на сайте

[ЕСТЬ РЕШЕНИЕ] У каждого пользователя свой водяной знак

InstantCMS Team

О проекте

Поддержка

Дополнения