Перейти к содержанию
psantoni

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

Рекомендуемые сообщения

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

немного неверно)

в хидере в диве меню пропишите стиль в пункте меню для кнопки цвет которой вы хотите поменять, а в файле css пропишите этот стиль

псвевдокласс :hover - это стиль изменения объекта при наведении, а тут как я понял нужно отдельный цвет для пункта меню, не зависимо активна она или нет.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

дам решение, которое применимо для многих "извращений" с меню навигации в дальнейшем
 
Открываем файл 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

Открываем файл 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/

А?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Попробую, отпишусь...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Попробую, отпишусь...

Порядок действий: 

 

немного изменим скрипт, так как в мегаменю <li class="dropdown"> </li>, значит остается поработать с тэгом <a>....</a>

 

попробуем прописать так

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

в скрипте мы поменяли ID меню

getElementById ('topnav')

и прописали вместо тэга LI тег A

 

получаем:

post-20793-0-74048000-1393101300_thumb.png

 

теперь пропишем стили бэкграунда и импортируем собственный стиль для цвета шрифта

post-20793-0-63619100-1393101371_thumb.png

 

получили стиль вот такого вида: 

a.item_20 {
color: #000!important;
}
.item_20 {
background: red; 
}

как видно на картинке мы добились желаемого результата

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ого наскриптовали :) а можно все сделать силами 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. Хотел чего то в репу стукнуть обоим, но не нашел как.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Спасибо.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, Nezzar51 сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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;

}

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

 

Изменено пользователем jaffagold

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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-х панелях, Цветы, Авторский букет, Контакты, Доставка, и только если человек находится в одной из этих страниц, то тогда оно должно оставаться черным, а стиль при наведении, чтобы становилось черным нужно оставить.

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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-файлы и там перепахивать. Но не все с этим разберутся.

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

Изменено пользователем jaffagold

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От chick
      800.00 руб
      Скачать/Купить дополнение


      Произвольное меню
      Модуль для создания произвольного меню и статей.
      С помощью этого модуля Вы можете заменить стандартное меню или добавить свое в любом месте шаблона.
      Возможные типы пунктов меню:
      Категория
      Выводит выбранную категорию Ссылка
      Делает переход по указанной ссылки Статья
      Выводит статью, написанную в описании этого пункта меню
      Статьям в свою очередь возможно задать макет, HTML-тег Title и SEO URL
      При этом будет соблюдена иерархия и хлебные крошки  
      Демо работы модуля: http://infoplus.2304.ru/
      Демо админки модуля: http://infoplus.2304.ru/admin/index.php?route=extension/module/infoplus
      Логин: demo, Пароль: demo
       
      Вставить следующий
       
       
       
      Как заменить главное меню
       
      Сформировать файл модификатора
      Установить его через установку расширений  
      Добавил chick Добавлено 31.05.2017 Категория Прочее Системные требования Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop  
    • От chick
      Модуль для создания произвольного меню и статей.
      С помощью этого модуля Вы можете заменить стандартное меню или добавить свое в любом месте шаблона.
      Возможные типы пунктов меню:
      Категория
      Выводит выбранную категорию Ссылка
      Делает переход по указанной ссылки Статья
      Выводит статью, написанную в описании этого пункта меню
      Статьям в свою очередь возможно задать макет, HTML-тег Title и SEO URL
      При этом будет соблюдена иерархия и хлебные крошки  
      Демо работы модуля: http://infoplus.2304.ru/
      Демо админки модуля: http://infoplus.2304.ru/admin/index.php?route=extension/module/infoplus
      Логин: demo, Пароль: demo
       
      Вставить следующий
       
       
       
      Как заменить главное меню
       
      Сформировать файл модификатора
      Установить его через установку расширений  
    • От nikitaxzx
      http://cg09891-opencart-18.tw1.ru/index.php?route=product/category&amp;path=59
      ребят вот сайт очень маленькая кнопка корзинки купить подскажите как правильно поменять изображение 

      картинку прикрепил, как примерно надо 

    • От ShadowVengeance
      Не реагирует на нажатия кнопка "купить". Видимо, где-то перемудрил с шаблонами, гугл выдает ошибку тут
      Пациент - http://soleo.com.ua/
      Буду рад помощи!
    • От Jeneko
      300.00 руб
      Скачать/Купить дополнение


      Простая кнопка заказа обратного звонка
      Простая кнопка заказа обратного звонка. Выводится на любых выбранных страницах (выбирается через макеты). Располагается в одном из углов экрана. При нажатии запрашивает номер телефона, после чего отсылает уведомление о заказе звонка на выбранный почтовый адрес.
       
      ВИДЕО (УСТАНОВКА И НАСТРОЙКА):
      YouTube - Модуль Opencart: "Простая кнопка заказа обратного звонка"

       
      ОСОБЕННОСТИ:
      Быстрая работа через AJAX, без перезагрузки страницы. Более 10 различных анимаций для привлечения внимания. Настройка дизайна. Выбор цвета кнопки и отображаемой иконки, для большего соответствия дизайну сайта. Возможность добавления своих иконок. Защита от заполнения автоматическими спам-ботами. Маска ввода телефонного номера - номер телефона, заказывающего обратный звонок, будет приходить аккуратно отформатированным. Возможность указать место вывода на экране - в каком углу и с каким отступом. Адаптивная верстка. Корректно отображатеся на мобильных устройствах с небольшим экраном (вплоть до iPhone 4). Возможность перетаскивания мышкой в произвольное место экрана. Совместимость с федеральным законом 152 (ФЗ-152) - вывод правил обработки персональных данных со ссылкой на страницу политики конфиденциальности сайта. Полностью на русском.  
      ТЕХНИЧЕСКИЕ ДЕТАЛИ:
      Анимация осуществляется средствами css https://daneden.github.io/animate.css/ Защита от спам-ботов осуществляется через скрытые инпут-поля, обработку формы через AJAX без использования submit-инпута и ложный action формы. Перетаскивание использует библиотеку jquery-ui (custom версия - включены только ф-ции, необходимые для перетаскивания). Протестировано на Chrome 64, Firefox 58, Opera 51, Яндекс-Браузер 18, Microsoft Edge, Internet Explorer 11, iOS 10.3.2 Safari, Android 8 Chrome  
      ВНИМАНИЕ:
      Продажа модуля осуществляется ТОЛЬКО через сайт opencartforum.com. Если вы приобрели или бесплатно скачали этот модуль в любом другом месте - вы пользуетесь пиратской версией модуля. Работоспособность и безопасность пиратских версий не гарантируется. Поддержка осуществляется только для оригинальной версии модуля.
       
      УСТАНОВКА:
      Модуль устанавливается стандартными средствами Opencart.
      В админке сайта, пункт меню: "Модули/Расширения" > "Установка расширений" нажать кнопку "Загрузить", после чего выбрать один из файлов "PhoneCallOrder(byJen).XXXX.ocmod.zip" (где ХХХХ - ваша версия Opencart-а). Перейти в список установленных модулей, где активировать и настроить модуль "Кнопка заказа звонка (by JEN)". В настройках модуля во вкладке "Основные" не забыть выбрать статус модуля "Включено". Настроить отображение модуля на нужных страницах, используя пункт меню админки "Дизайн" > "Макеты".  
      АЛЬТЕРНАТИВНАЯ УСТАНОВКА:
      Распаковать содержимое одного из файлов "PhoneCallOrder(byJen).XXXX.ocmod.zip" (где ХХХХ - ваша версия Opencart-а) и скопировать содержимое папки "upload" в корень сайта. Перейти в список установленных модулей, где активировать и настроить модуль "Кнопка заказа звонка (by JEN)". В настройках модуля во вкладке "Основные" не забыть выбрать статус модуля "Включено". Настроить отображение модуля на нужных страницах, используя пункт меню админки "Дизайн" > "Макеты". Добавил Jeneko Добавлено 18.02.2018 Категория Обратная связь, звонки Системные требования Сайт разработчика Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 3.0
      2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось  
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.