Поменять цвет кнопки главного меню

[psantoni]

Как можно поменять цвет кнопки, одной кнопки? чтоб получилось как здесь:

[psantoni]

Как здесь:

[supergone]

Как здесь:

Изучайте css

[supergone]

Есть в css псвевдокласс :hover, который определяет поведение элемента при наведении на него курсора. Применяем его к элементу меню, и указываем, какой фон будет у элемента при наведении мыши...

[Navigator911]

Вы не могли бы уточнить какой именно файл?

[psantoni]

ап

[AlexFisher]

Так вам уже ответили.

Создайте врукопашную эту кнопку в пункте меню и к ней примените соответствующий стиль.

Всего два файла редактировать. header.tpl и stylesheet.css

Для подробной информации необходимо пациента осмотреть.

[AlexFisher]

Однозначно схоронил. *cool*

Шикарная плюшка.

[Reqman]

дам решение, которое применимо для многих "извращений" с меню навигации в дальнейшем

Огромнейшее спасибо за гениальное решение! Только почему-то у меня не работает, если писать li .item5 . А вот есть просто .item5 - то все отлично. 

[yurabr]

дам решение, которое применимо для многих "извращений" с меню навигации в дальнейшем

 

Открываем файл www\catalog\view\theme\default\template\common\header.tpl

в коде

<?php if ($categories) { ?>
<div id="menu">
  <ul>
    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
      <?php if ($category['children']) { ?>
      <div>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      </div>
      <?php } ?>
    </li>
    <?php } ?>
  </ul>
</div>
<?php } ?>

Перед последним закрыванием <?php } ?> добавляем следующий код.

 

<script type="text/javascript">
for (var tegsLI = document.getElementById ('menu').getElementsByTagName ('LI'),
j = 0, lj = tegsLI.length; j < lj; j++) tegsLI [j].className = 'item_' + (j + 1);
</script>

Это генерация автоматических добавлении классов к каждому пункту меню.

 

Далее смотрим через фаербаг, какой класс был присвоен скриптом для той кнопки, цвет которой мы хотим поменять

например это будет 

<li class="item5"> <a href="...">CLEARANSE</a></li>

далее в stylesheet.css прописываем стиль для этой кнопки:

.item5 {
background: #ff0808
}

ну и далее как душе угодно применяем hover, active, color.... фантазия может быть ограничена только вашими знаниями css

Очень интересно. А можно это как то прикрутить к этому https://opencartforum.com/topic/7314-delaem-mega-meniu-how-to/

А?

[riny]

ого наскриптовали :) а можно все сделать силами css. если надо выделить последний элемент как на скрине тс, то

#menu ul li:last-child > a{
background: red;
}

а если надо где-то в середине, то 

#menu ul li:nth-child(5) > a{
background: red;
}

в данном случае цифра означает порядковый номер элемента в списке.

[yurabr]

ого наскриптовали :) а можно все сделать силами css. если надо выделить последний элемент как на скрине тс, то

#menu ul li:last-child > a{
background: red;
}

а если надо где-то в середине, то 

#menu ul li:nth-child(5) > a{
background: red;
}

в данном случае цифра означает порядковый номер элемента в списке.

спасибо большое.

Правда нужно немножко подправить, так правильно:

.menu ul#topnav li:last-child > a{
background: red;
}

Спасибо 

Pascha

но, мне и стилями нормально. 

 

P.S. Хотел чего то в репу стукнуть обоим, но не нашел как.

[Nezzar51]

Ребята, добрый вечер.

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

Сайт webflowers.shop, для примера посмотреть, что там вообще. Перерыл файл css меню и стайлшита, ничего не нашел. Помогите пожалуйста.

Спасибо.

[fanatic]

1 час назад, Nezzar51 сказал:

чтобы при выборе определенной категории в меню, оно оставалось черным.

если я правильно понял, с помощью только css не получится

[jaffagold]

ul.megamenu > li > a:hover, ul.megamenu > li.active > a, ul.megamenu > li.home > a, ul.megamenu > li:hover > a {

color: #000000;

}

но это всего- лишь стиль при наведении.

Не совсем ясно зачем вам- у вас одна всего лишь категория товаров Цветы

Во всех подкатегориях  категории Цветы выделять Цветы в Главном меню?

 

Используйте в селекторе первым класс тега body, начинающийся с нужной корневой категории

типа:

body[class^="product-category-62_"]

самое последнее подчеркивание указывает на то, что мы находимся в подкатегории категории Цветы

Например такой

body[class^="product-category-62_"] ul.megamenu > li:nth-of-type(2) > a {

color: #000;

}

Если речь о втором пункте Главного меню

 

Змінено 31 жовтня 2017 користувачем jaffagold

[Nezzar51]

13 часов назад, jaffagold сказал:

ul.megamenu > li > a:hover, ul.megamenu > li.active > a, ul.megamenu > li.home > a, ul.megamenu > li:hover > a {

color: #000000;

}

но это всего- лишь стиль при наведении.

Не совсем ясно зачем вам- у вас одна всего лишь категория товаров Цветы

Во всех подкатегориях  категории Цветы выделять Цветы в Главном меню?

 

Используйте в селекторе первым класс тега body, начинающийся с нужной корневой категории

типа:

body[class^="product-category-62_"]

самое последнее подчеркивание указывает на то, что мы находимся в подкатегории категории Цветы

Например такой

body[class^="product-category-62_"] ul.megamenu > li:nth-of-type(2) > a {

color: #000;

}

Если речь о втором пункте Главного меню

 

Спасибо большое, речь идет о верхних 4-х панелях, Цветы, Авторский букет, Контакты, Доставка, и только если человек находится в одной из этих страниц, то тогда оно должно оставаться черным, а стиль при наведении, чтобы становилось черным нужно оставить.

Надеюсь я понятно изьяснил суть, если что я тут часто, так как в тупике полном)

[jaffagold]

Так я же уже дал вам подробный ответ на ваш запрос.

 

body[class^="product-category-62_"] ul.megamenu > li:nth-of-type(2) > a {

    color: #000;

}

 

Просто попробуйте прописать эти стили в stylesheet.css

Аналогично определяйтесь с другими корневыми категориями.

Но смотрите на порядковый номер в Главном меню и на класс тега body на странице

 

Для Контактов все проще

там просто используете класс у тега body на странице

 

 

.information-contact ul.megamenu > li:nth-of-type(5) > a {

   color: #000;

}

 

Аналогично у Авторского букета

.product-product-81 ul.megamenu > li:nth-of-type(3) > a {

   color: #000;

}

 

Сложнее всего с Доставкой

Если прописать так, то пункт выделится и на Реквизитах и на других информационных статьях

.information-information ul.megamenu > li:nth-of-type(4) > a {

   color: #000;

}

тут пока не вижу простого решения.

Хотя, если так массово перекраивать все пункты меню, то тогда это получается слишком громоздкая костыльная конструкция.

И замена порядка следования пунктов в меню поломает красоту.

По-хорошему надо лезть в контроллеры и tpl-файлы и там перепахивать. Но не все с этим разберутся.

Если меню так и останется практически статичное, то можно и стилями ограничиться

Змінено 1 листопада 2017 користувачем jaffagold

[Jasulan]

В 26.02.2013 в 00:19, supergone сказал:

Есть в css псвевдокласс :hover, который определяет поведение элемента при наведении на него курсора. Применяем его к элементу меню, и указываем, какой фон будет у элемента при наведении мыши...

Здравствуйте не подскажете поподробнее? У меня такая же ситуация. Нужно поменять цвет кнопки выполняющей подкатегории при наведении.