Переменные цвета для динамического меню

Я работаю над сайтом Opencart, а для категорий с левой стороны мне нужно, чтобы они чередовались в разных цветах, например. красный, фиолетовый, зеленый, синий и т. д., а затем повторяется, когда в меню добавлено больше категорий.Переменные цвета для динамического меню

Может ли кто-нибудь дать мне совет простейшего способа сделать это?

Вы можете просматривать сайт ниже: http://getsmarta.co/_ecommerce/easy-leaf/

источник

2012-05-08 Suzi Larsen

Если вы не обеспокоены более старой совместимостью с браузером, я бы отправил n-й детский маршрут CSS. См. Http://css-tricks.com/how-nth-child-works/ для ссылки. Если вас беспокоят люди, использующие старые браузеры (я не думаю, что IE8 поддерживает n-й ребенок), я бы определенно пошел по серверной стороне. – Snuffleupagus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var color = ['Red', 'Green', 'Yellow']; 

      $('ul#test').find('li').each(function (i) { 
       $(this).addClass(color[((i + 3) % 3)]); 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     .Red 
     { 
      background-color: Red; 
     } 

     .Green 
     { 
      background-color: Green; 
     } 

     .Yellow 
     { 
      background-color: Yellow; 
     } 
    </style> 
</head> 
<body> 
    <ul id="test"> 
     <li>a</li><li>b</li><li>c</li> 
     <li>a</li><li>b</li><li>c</li> 
     <li>a</li><li>b</li><li>c</li> 
     <li>a</li><li>b</li><li>c</li> 
    </ul> 
</body> 
</html>

источник

2012-05-08 14:47:25 Thulasiram

для живой демонстрации см. Эту ссылку: http://jsfiddle.net/nanoquantumtech/UStdZ/ – Thulasiram

Я не знаком с OpenCart, но не это может быть достигнуто с помощью CSS? Вы можете, скорее всего, использовать n-ю дочернюю вещь для выполнения этой работы. Или вы можете покрасить его с помощью jquery, используя цикл for и имя класса colour1, colour2 и т. Д. Зациклируйте количество цветов и addClass() на каждый элемент. Вероятно, лучшие решения - это то, что появилось сейчас.

Edit: хорошо, может быть, п-й ребенок не будет хорошо для более ранних браузеров, так что решение JQuery было бы хорошо, если вы не хотите, чтобы добавить класс цвета в самой странице, используя ту же концепцию, как JQuery

источник

2012-05-08 14:42:11 Huangism

Я бы сделал эту серверную сторону.

В части кода/часть комментариев, что вам нужно заполнить:

$i = 0; 
// loop through rows 
$i++; 
$alt=false; 
if ($i % 2 == 0) { 
$alt = true; 
} 
// output row 
// make sure to use a if ($alt) { echo 'class="alt""'; } or something similar so you can style away 
// end loop

источник

2012-05-08 14:48:22 Nick

-2

Я не даю вам код. Напишите это сами. Вот идея.

Напишите 4 класса для 4 разных цветов.
Теперь напишите функцию, чтобы добавить правильный класс к каждому элементу li. т.е. может проверить позицию элемента li и добавить к нему правильный класс.

Для этого вы можете использовать javascript или php. Теперь цвет ссылки автоматически изменится с добавлением новых категорий.

источник

2012-05-08 14:51:40 Libin

Переменные цвета для динамического меню

ответ

Смежные вопросы