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

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

 
Посетитель
small user social cms
Медаль
Сообщений: 334
Здравствуйте! Просьба, помочь разобраться:

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

Подскажите, вообще можно реализовать такое со стандартным меню.
Спасибо за внимание.
Посетитель
small user social cms
Кубок зрительских симпатийМедаль
Сообщений: 179
Нужно в mod_menu.tpl пронумеровать каждый пункт(желательно 1 уровня) добавив номер в класс, потом в файле стилей прописать цвета под соответствующий номер. Это конечно в 2 словах, на самом деле все будет немного сложнее.
Надеюсь кто-то поможет вам более детально разобрать все шаги.
Dezerit Web Group - Платные и бесплатные шаблоны для instantCMS
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 334
Решение:
1. Привязку стиля к меню делаем через id меню, неудобно, но пока не нашел другого решения.
В классе class="selected" добавляем следующий параметр "{$item.id}" У меня получилось следующее:
Код PHP:
  1. {if $item.NSLevel <= 1}
  2. <li {if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)) && $item.NSLevel<=1}class="selected_{$item.id} "{/if}>
  3. {/if}
  4. {if $item.NSLevel <= 1}
  5. <a href="{$item.link}" target="{$item.target}" {if $menuid==$item.id}class="selected_{$item.id}"{/if} title="{$item.title|escape:'html'}">
  6. {if $item.iconurl}<img src="/images/menuicons/{$item.iconurl}" alt="{$item.title|escape:'html'}" />{/if} {$item.title}
  7. </a>
  8. {else}
В файле style.css клонируем следующую строчку:
Код PHP:
  1. #topmenu .menu li.selected{
  2. background:url(../images/menubg.jpg) repeat-x left top #375E93;
  3. }
и редактируем под себя, например:
Код PHP:
  1. #topmenu .menu li.selected_10{
  2. background:#000000;
  3. }
  4. #topmenu .menu li.selected_13{
  5. background:#ffffff;
  6. }
Сохраняем и проверяем:)
3. Не разобрался как сделать у каждого пункта меню свой стиль "a:hover" кто сможет подсказать где копать, буду весьма благодарен:)
Посетитель
small user social cms
Медаль
Сообщений: 334
Правильно понимаю что копать нужно здесь(?):
Код PHP:
  1. {foreach key=key item=item from=$items}
  2.  
  3. {if $item.NSLevel == $last_level}</li>{/if}
  4. {math equation="x - y" x=$last_level y=$item.NSLevel assign="tail"}
  5. {section name=foo start=0 loop=$tail step=1}
  6. </li></ul>
  7. {/section}
  8.  
Почему здесь нигде не открывается тег "<li>", а только закрывается?
Хотел привязать li к id меню и создать соответствующие стили. Подскажите как это реализовать.
Посетитель
small user social cms
Кубок зрительских симпатийМедаль
Сообщений: 179
Не разобрался как сделать у каждого пункта меню свой стиль "a:hover" кто сможет подсказать где копать, буду весьма благодарен:)
Код PHP:
  1. #topmenu .menu li.selected_10:hover{
  2. background:#000000;
  3. }
  4. #topmenu .menu li.selected_13:hover{
  5. background:#ffffff;
  6. }
можно задать !important если стили перебиваются, также для тега а тоже не мешало бы стили пробить
Код PHP:
  1. #topmenu .menu li.selected_10:hover a{
  2. background:#000000;
  3. }
  4. #topmenu .menu li.selected_10:hover a:hover{
  5. background:#ffffff;
Dezerit Web Group - Платные и бесплатные шаблоны для instantCMS
Посетитель
small user social cms
Медаль
Сообщений: 334
Dezerit:

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

Я видимо не правильно выразился, то что вы выше написали работает только для пунктов меню с классом "selected", а как сделать тоже самое для пунктов меню без класса "selected"?
Не могу найти где формируется пункт меню, т.е. где открывается тег <li>,нашел где закрывается:
Код PHP:
  1. {foreach key=key item=item from=$items}
  2.  
  3. {if $item.NSLevel == $last_level}[b]</li>[/b]{/if}
  4. {math equation="x - y" x=$last_level y=$item.NSLevel assign="tail"}
  5. {section name=foo start=0 loop=$tail step=1}
  6. [b]</li>[/b]</ul>
  7. {/section}
Помогите разобраться в коде.
Редактировалось: 1 раз (Последний: 30 августа 2012 в 19:25)
Посетитель
small user social cms
Медаль
Сообщений: 334
неужели никто не знает?:)
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 692
По моему скромному мнению вы все усложняете. Сделайте просто слой-подложку нужным градиентом, а верхний слой-маску по hover или active хоть убирайте вовсе, хоть сдвигайте. Все зависит от конкретного дизайна. С помощью transition можно плавность перехода обеспечить.... Ну где-то так....
Skype: pasha--g
Посетитель
small user social cms
Кубок зрительских симпатийМедаль
Сообщений: 179
braincord, в mod_menu.tpl найдите строку

Код PHP:
  1. <li {if ($menuid==$item.id || ($currentmenu.NSLeft > $item.NSLeft && $currentmenu.NSRight < $item.NSRight)) && $item.NSLevel<=1}class="selected"{/if}>
Измените ее на


Код PHP:
  1. <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-ом для удобного просмотра. Далее в файле стиле вам нужно указать правила для этих класов

Код PHP:
  1.  
  2. /*Для всех остальных*/
  3. .menu li{background: blue;}
  4. .menu li:hover{background: black;}
  5.  
  6. /*Для главной*/
  7. .menu > li:first-child{background-color: red;}
  8. .menu > li:first-child:hover{background-color: black;}
  9.  
  10. /*Определенные цвета*/
  11. .menu > li.color7{background-color: orange;}
  12. .menu > li.color7:hover{background-color: black;}
  13.  
  14. .menu > li.color8{background-color: pink;}
  15. .menu > li.color8:hover{background-color: black;}
  16.  
для отметки текущего нужно написать стили для класса selected, например
Код PHP:
  1.  
  2. .menu > li.color7.selected{background-color: black;}
  3.  
Dezerit Web Group - Платные и бесплатные шаблоны для instantCMS
Посетитель
small user social cms
Медаль
Сообщений: 334
Dezerit:
Измените ее на


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

Все работает, спасибо большое,только пункты меню, кроме "Главная" стали некликабельными.
Ковычки надо было поставить перед знаком - ">" т.е. так:
Код PHP:
  1. <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
Код PHP:
  1. #topmenu .menu li a:hover,
  2. {
  3. background:url(../images/menubg-hover.jpg) repeat-x center top #375E93;
  4. color:#000 !important;
  5. text-shadow:0 1px 0px #FFF !important;
  6. }
!important - перекрывал новые стили.
Удалил эту запись и добавил в
Код PHP:
  1.  
.menu > li.color8:hover{background-color: black !important;}
Теперь все работает! Спасибо+ dance
Редактировалось: 2 раз (Последний: 5 сентября 2012 в 19:35)
Посетитель
small user social cms
Медаль
Сообщений: 334
а кстати задачка решена:) тему закрываю.
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: