Moushe.ru

Блог обо всём

OcStore 1.5.5.1.2 перекрашиваем ссылки в меню категорий



Недавно меня просили показать как перекрасить ссылки категорий в меню навигации, то есть каждой категории товаров закреплённой в меню задать свой фон, раз просили – делаю.

OcStore15512

До:

ocstore_menu_category_1

После:

ocstore_menu_category_5ocstore_menu_category_6

Это делается всего в одном файле stylesheet.css.

Приступим:

Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и немного изменим стандартные стили, вместо этих строк (263-343):

#menu {
background: #585858;
border-bottom: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
font-size: 13px;
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
padding: 6px 10px 6px 10px;
margin-bottom: 5px;
z-index: 6;
position: relative;
}
#menu > ul > li:hover > a, #menu > ul > li > a.active {
background: #000000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
background: #000000;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
}

вставим эти:

#menu {
background: #585858;
border-bottom: 1px solid #000000;
height: 40px;
margin-bottom: 15px;
border-radius: 5px;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
}
#menu > ul > li:hover {}
#menu > ul > li > a {
font-size: 13px;
color: #FFF;
text-decoration: none;
display: block;
padding: 13px 10px;
z-index: 6;
position: relative;
}
#menu > ul > li:hover > a, #menu > ul > li > a.active {
background: #000000;
border-radius: 5px;
}
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
background: #000000;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
}

(мы просто чуть-чуть изменили размеры меню навигации – сделали его повыше, подправили отступы для ссылок и незначительно почистили код от старых стилей)

теперь можно и перекрашивать наши категории, после этих строк (277-281):

#menu > ul > li {
position: relative;
float: left;
z-index: 20;
}

вставим эти:

#menu > ul > li {
background: #f44336;
}
#menu > ul > li + li {
background: #E91E63;
}
#menu > ul > li  + li + li {
background: #9C27B0;
}
#menu > ul > li + li + li  + li {
background: #673AB7;
}
#menu > ul > li + li + li  + li + li {
background: #3F51B5;
}
#menu > ul > li + li + li + li + li  + li {
background: #2196F3;
}
#menu > ul > li + li + li + li + li + li + li {
background: #03A9F4;
}
#menu > ul > li + li + li + li + li + li + li  + li {
background: #00BCD4;
}

(после установки ОпенКарта у нас в меню всего 8 категорий, поэтому мы и создали только 8 стилей, если у вас больше категорий выведено – то просто добавьте ещё необходимое количество стилей)

Можно обойтись и без огромного количества плюсиков, записав стили так:

#menu > ul > li:nth-child(1) {
background: #f44336;
}
#menu > ul > li:nth-child(2) {
background: #E91E63;
}
#menu > ul > li:nth-child(3) {
background: #9C27B0;
}
#menu > ul > li:nth-child(4) {
background: #673AB7;
}
#menu > ul > li:nth-child(5) {
background: #3F51B5;
}
#menu > ul > li:nth-child(6) {
background: #2196F3;
}
#menu > ul > li:nth-child(7) {
background: #03A9F4;
}
#menu > ul > li:nth-child(8) {
background: #00BCD4;
}

но старые браузеры не понимают такую конструкцию стилей (хотя кто сейчас использует ie5 — 7 и аналогичное старье).

Результат:

ocstore_menu_category_2

Неплохо, но можно сделать намного красивее, для начала сократим слишком длинные названия категорий, в нашем случае это всего одна категория: Программное обеспечение, переименуем его в Программы (или Софт).

ocstore_menu_category_3

И вместо этих строк (263-281):

#menu {
background: #585858;
border-bottom: 1px solid #000000;
height: 40px;
margin-bottom: 15px;
border-radius: 5px;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
}

вставим эти:

#menu {
width: 100%;
height: 40px;
margin-bottom: 15px;
border-radius: 5px;
box-shadow: 0px 2px 2px #DDDDDD;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
width: 12.5%;
position: relative;
float: left;
z-index: 20;
}

(делим 100% на количество категорий, в нашем примере на 8, получаем значение 12.5, вот поэтому для #menu > ul > li и ставим ширину пунктов в 12.5%)

Смотрим результат:

ocstore_menu_category_4

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

1 Вариант (изменим размер шрифта):

Изменим эти строки (307-315):

#menu > ul > li > a {
font-size: 13px;
color: #FFF;
text-decoration: none;
display: block;
padding: 13px 10px;
z-index: 6;
position: relative;
}

на эти:

#menu > ul > li > a {
font-size: 12px;
color: #FFF;
text-decoration: none;
display: block;
padding: 13px 10px;
z-index: 6;
position: relative;
}

Результат:

ocstore_menu_category_5

2 Вариант (изменим высоту всех категорий):

Изменим эти строки (307-315):

#menu > ul > li > a {
font-size: 13px;
color: #FFF;
text-decoration: none;
display: block;
padding: 13px 10px;
z-index: 6;
position: relative;
}

на эти:

#menu > ul > li > a {
font-size: 13px;
color: #FFF;
text-decoration: none;
display: block;
padding: 10px 10px 0 10px ;
z-index: 6;
position: relative;
height: 40px;
}

Результат:

ocstore_menu_category_6

Отлично, и тот и тот вариант вполне достойны, но при наведении курсором мыши на категорию фон становится тёмно-серым с закруглёнными углами, нам это естественно не подходит:

ocstore_menu_category_7

Ну некрасиво, не так-ли? Давайте исправим?

Вместо этих строк (317-320):

#menu > ul > li:hover > a, #menu > ul > li > a.active {
background: #000000;
border-radius: 5px;
}

вставим эти:

#menu > ul > li:hover > a, #menu > ul > li > a.active {
background: #fff;
color: #000;
}

При наведении или при заходе в категорию ссылка в меню станет чёрной, а её фон станет белым:

ocstore_menu_category_8

Но нас же это не устроит? Значит поработаем над стилями чуть дольше:

вместо этих строк (317-320):

#menu > ul > li:hover > a, #menu > ul > li > a.active {
background: #fff;
color: #000;
}

вставим эти:

#menu > ul > li:hover > a, #menu > ul > li > a.active {
color: #fff;
}
#menu > ul > li:nth-child(1) a:hover, #menu > ul > li:nth-child(1) > a.active {
background: #EF5350;
}
#menu > ul > li:nth-child(2) a:hover, #menu > ul > li:nth-child(2) > a.active {
background: #EC407A;
}
#menu > ul > li:nth-child(3) a:hover, #menu > ul > li:nth-child(3) > a.active {
background: #AB47BC;
}
#menu > ul > li:nth-child(4) a:hover, #menu > ul > li:nth-child(4) > a.active {
background: #7E57C2;
}
#menu > ul > li:nth-child(5) a:hover, #menu > ul > li:nth-child(5) > a.active {
background: #5C6BC0;
}
#menu > ul > li:nth-child(6) a:hover, #menu > ul > li:nth-child(6) > a.active {
background: #42A5F5;
}
#menu > ul > li:nth-child(7) a:hover, #menu > ul > li:nth-child(7) > a.active {
background: #29B6F6;
}
#menu > ul > li:nth-child(8) a:hover, #menu > ul > li:nth-child(8) > a.active {
background: #26C6DA;

}

Результат (лучше смотреть проделав все шаги моей статьи):

ocstore_menu_category_9

(при наведении курсором мыши или при заходе в любую категорию фон пункта меню становится светлее, плюс в выпадающем списке при наведении на подкатегории у ссылок фон приобретает цвет главной категории, смотрится нереально круто — можно было просто сделать полупрозрачную картинку, и присвоить активной ссылке её, но я специально сделал более трудоёмкий вариант — вы можете задавать пунктам другой цвет или более светлый более тёмный оттенок, полупрозрачная картинка в png такой свободы не даёт + подкатегории не смотрелись при наведении курсором мыши так круто 😉)

Надеюсь статья вам понравилась, можете поблагодарить меня за проделанную работу закинув деньги в мою копилку (пора оплачивать хостинг) или нажав кнопку Поделиться. Подмигивающая рожица

Следите за нашими новостями, скоро будет ещё интереснее.

3 Комментария

  1. Здравствуйте! Помогите пожалуйста разобраться с проблемой. Включил ЧПУ сеопро, категории отображает нормально, но большую часть товаров пишет запрашиваемая страница не найдена. Причем когда ставишь тип чпу по умолчанию, то все работает. Нигде решение найти не могу. ocstore 1.5.5.1.2. Заранее спасибо.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      28.11.2015 at 17:48

      Не используйте пробелы и знаки препинания в чпу ссылке, можно использовать латиниу, цифры и тире с нижним подчёркиванием (- и _).

  2. Спасибо большое, помогли)

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика