Jump to content
psantoni

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

 

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

А?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 

немного изменим скрипт, так как в мегаменю <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; 
}

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

  • +1 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

Спасибо.

Share this post


Link to post
Share on other sites
1 час назад, Nezzar51 сказал:

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

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

Share this post


Link to post
Share on other sites

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;

}

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

 

Edited by jaffagold

Share this post


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

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

Share this post


Link to post
Share on other sites

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

 

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

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

Edited by jaffagold

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By Pavel1980
      Доброго дня всем, подскажите пожалуйста уже всю голову поломал. Как переадресовать кнопку в в родительской категории ГЛАВНАЯ, что бы при нажатии на нее не высвечивались под категории а был возврат на главную страницу сайта как при нажатии на логотип в шапке сайта. Сайт на opencart 3.0.2. Заранее спасибо и прошу если можно с адресами где эту самую кнопку поправить и переадресовать действие при ее нажатии.
    • By seregin
      Скачать/Купить дополнение


      Кнопка "Применить" в админке
      Модуль добавляет в админке кнопку "Применить", которая позволяет сохранить изменения не закрывая при этом форму редактирования.
      Кнопка вставляется в следующие формы:
      catalog, design, localisation, marketing, sale, user, setting
      Модуль проверялся на ocStore 2.1.0.1
      Установка:
      Установите модуль через "Установщик дополнений OCMOD"
      Добавил seregin Добавлено 04.12.2015 Категория Модули  
    • By GreenRobot
      Скачать/Купить дополнение


      Кнопка "Показать адрес клиента на Яндекс.Картах" в карточке заказа
      .

      Дополнение для OpenCart 2: Add Yandex Maps Button to Sales->Order->Info

      Данное дополнение добавляет кнопку "Показать адрес клиента на Яндекс.Картах" в карточке заказа sale/order/info Вы можете зайти в карточку оставленного клиентом заказа (Продажи - Заказы - Заказ XXX) и нажать на появившуюся в верхнем правом углу кнопку "Показать адрес клиента на Яндекс.Картах", в новой вкладке откроются Яндекс.Карты с указанным в заказе адресом (при наличии информации сразу отобразится фото здания, просмотр панорамы улицы и др.)
      Дополнение поддерживает версию OpenCart 2.1.0.1 Если вы тестировали работу дополнения на других версиях OpenCart 2, пожалуйста, сообщите об этом разработчику: opencart@profitlanding.ru
      Дополнение использует встроенную в OpenCart 2 систему правки файлов OCMod и НЕ использует VQMod, никаких файлов копировать не требуется (файлы не заменяются), достаточно следовать инструкции:
      Инструкция по установке
      Убедитесь, что версия вашего OpenCart 2.0.0.0 и выше (версия отображается в админ-панели внизу страницы)
      Скачайте ZIP-архив дополнения
      В админ-панели зайдите в "Дополнения" (Extensions) - "Установка дополнений" (Extension installer)
      Нажмите "Загрузить" (Upload) и выберите архив add_yandex_maps_button.ocmod.zip
      Зайдите в "Модификации" и нажмите справа вверху кнопку "Обновить" (Refresh). Это обновит кэш дополнений
      Решения возможных проблем (FAQ)
      Если во время загрузки дополнения появилась ошибка подключения к FTP "Could not connect as ...", установите расширение "QuickFix: Extensions Installer issue when FTP support disabled", скачать можно по ссылке http://www.opencart.com/index.php?route=extension/extension/info&extension_id=18892
      Если возникла другая проблема, пожалуйста напишите разработчику на e-mail: opencart@profitlanding.ru
      Использование и изменение
      Создано и поддерживается разработчиками агентства ProfitLanding.ru, Russia, Tomsk, 2015
      Дополнение распространяется по лицензии GNU General Public License v2.0
      Вы можете поучаствовать в разработке этого и других дополнений на GitHub: https://github.com/profitlanding
      Пожалуйста, добавляйте найденные баги и предложения на https://github.com/profitlanding/opencart-extention-add-yandex-maps-button/issues/new
      PS: Если наша работа, оказалась для вас полезной, пожалуйста проголосуйте за нее поставив соответствующий рейтинг.
      Добавил GreenRobot Добавлено 01.11.2015 Категория Прочее  
    • By ambalocha69
      300.00 руб
      Скачать/Купить дополнение


      Иконки подкатегорий в главном меню (Opencart 2.0)
      Данный модификатор позволяет назначить каждой категории пиктограмму (иконку).
      Пиктограммы будут отображаться:
      для категорий 2-го уровня в главном меню, для всех категорий на странице списка категорий в админке. Для настройки отображения добавьте в stylesheet.css класс zo_ico. Пример для шаблона default
      .zo_ico {
      position: relative;
      left: -5px;
      }
      Страница категорий в админке:

      Редактирование:

      Языки: русский
      Коммерческий релиз 08.10.15
      Лицензирование модуля
      - приобретая модуль вы получаете право его использования на одном публичном домене
      - использование на локальных серверах не ограничивается
      - Дополнение является объектом авторского права и принадлежит его создателю
      - Вы не можете передавать, продавать, распространять, обмениваться и сдавать в аренду какую-либо часть дополнения
      - Вы не можете размещать дополнение на других сайтах, чтобы оно было доступно для скачивания
      Поддержка
      - Поддержка осуществляется автором по электронной почте (указана в админке модуля в заголовке)
      - При обращении в поддержку обязательно указывайте адрес сайта на котором установлен модуль, версию движка, описание проблемы
      (желательно со скриншотом). По возможности сразу добавляйте доступ в админку (достаточно режима демонстрации) - это сильно
      упрощает работу и экономит время.
      Расширение функционала
      - функционал модуля постоянно расширяется
      - Пишите, если считаете нужным добавить в модуль какую нибудь полезную функцию - ваши пожелания будут учтены в следующих версиях
      Авторские права:

      Добавил ambalocha69 Добавлено 08.10.2015 Категория Модули Системные требования Сайт разработчика http://opencart.zone/modules-2-0/zo_ico Старая цена Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 2.1 ocStore Несовместим OpenCart.Pro, ocShop Обращение к серверу разработчика  
    • By voronsoft
      Скачать/Купить дополнение


      Кнопка - перейти в СРАВНЕНИЕ
      В шапке сайта нет кнопки ссылки -ПЕРЕЙТИ В СРАВНЕНИЯ
      Я подумал и решил дополнить этот нюанс для более удобной навигации покупателя.
      Версия движка Version 3.0.3.2
       
      УСТАНОВКА
      Устанавливается как обычные модули типа .OCMOD.ZIP через обычный установщик.
      После установки незабываем обновить кеш модификаторов и шаблонов.
      Далее идём на главную страницу вашего сайта и смотрим верхний правый угол.
      Кнопка динамичная.

       

      Добавил voronsoft Добавлено 15.05.2019 Категория Меню, дизайн, внешний вид Системные требования Сайт разработчика Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 3.0 ocStore 3.0 OpenCart.Pro, ocShop Обращение к серверу разработчика Нет  
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.