0

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

Например, как на этом сайте. Читал, что нужно подключить javascript но что-то ни разу не получилось. Вот мой сайт.

Вот пример кода:

.widget ul {
	margin-left: 8px;
	padding: 0;
}

.widget ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.widget ul li a {
	color: inherit;
    text-decoration: none;
}

.widget ul li a:hover{
	background-color: #0f0;}

.widget ul li a:selected{
	background-color: #000;
}
<div class="menu-bokovoe-menyu-container"><ul id="menu-bokovoe-menyu" class="menu"><li id="menu-item-39" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-39"><a href="http://vas.newdesign-tm.com/product-category/teplovye-pushki/">Тепловые пушки</a>
<ul class="sub-menu">
	<li id="menu-item-83" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-83"><a href="http://vas.newdesign-tm.com/product-category/teplovye-pushki/gazovye/">Газовые</a></li>
	<li id="menu-item-84" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-84"><a href="http://vas.newdesign-tm.com/product-category/teplovye-pushki/dizelnye/">Дизельные</a></li>
	<li id="menu-item-85" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-85"><a href="http://vas.newdesign-tm.com/product-category/teplovye-pushki/elektricheskie/">Электрические</a></li>
</ul>
</li>
<li id="menu-item-43" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-product_cat-ancestor current-menu-ancestor current-menu-parent current-product_cat-parent menu-item-has-children menu-item-43"><a href="http://vas.newdesign-tm.com/product-category/mojki-vysokogo-davleniya/">Мойки высокого давления</a>
<ul class="sub-menu">
	<li id="menu-item-231" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-231"><a href="http://vas.newdesign-tm.com/product-category/mojki-vysokogo-davleniya/s-podogrevom-vody/">С подогревом воды</a></li>
	<li id="menu-item-230" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-230"><a href="http://vas.newdesign-tm.com/product-category/mojki-vysokogo-davleniya/bez-podogreva-vody/">Без подогрева воды</a></li>
	<li id="menu-item-81" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-item menu-item-81"><a href="http://vas.newdesign-tm.com/product-category/mojki-vysokogo-davleniya/stacionarnye-mojki-vysokogo-davleniya/">Стационарные мойки высокого давления</a></li>
	<li id="menu-item-82" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-82"><a href="http://vas.newdesign-tm.com/product-category/mojki-vysokogo-davleniya/mobilnye-avtonomnye-mojki/">Мобильные автономные мойки</a></li>
</ul>
</li>
<li id="menu-item-44" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-44"><a href="http://vas.newdesign-tm.com/product-category/podmetalnye-mashiny/">Подметальные машины</a></li>
<li id="menu-item-45" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-45"><a href="http://vas.newdesign-tm.com/product-category/teplogeneratory/">Теплогенераторы</a>
<ul class="sub-menu">
	<li id="menu-item-86" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-86"><a href="http://vas.newdesign-tm.com/product-category/teplogeneratory/gazovye-teplogeneratory/">Газовые теплогенераторы</a></li>
	<li id="menu-item-232" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-232"><a href="http://vas.newdesign-tm.com/product-category/teplogeneratory/dizelnye-teplogeneratory/">Дизельные теплогенераторы</a></li>
</ul>
</li>
</ul></div>

0

1 ответ 1

2

В заголовке у вас шла речь о классе .selected, а используете вы псевдокласс :selected.
Псевдокласса :selected у ссылок вообще не бывает.

Вместо

.widget ul li a:selected {
    background-color: #000;
}

Используйте

.widget ul li.current-menu-item > a {
    background-color: #000;
}

Update

Стилизация меню и подменю:

.widget ul.menu > li > a {
    font-weight: bold;
}

.widget ul.sub-menu > li > a {
    text-decoration: underline;
}
6
  • Теперь выделяется весь блок, а можно сделать по отдельной ссылочке? vas.newdesign-tm.com/product-category/teplovye-pushki 25 фев 2016 в 11:55
  • 1
    @ВалерийЕмельянов, исправил ответ
    – VenZell
    25 фев 2016 в 11:56
  • Спасибо огромное, то что нужно! 25 фев 2016 в 11:57
  • А не подскажешь можно ли (если да, то каким образом) сделать категории жирным, а подкатегории подчёркнутым? 25 фев 2016 в 12:14
  • 1
    @ВалерийЕмельянов, обновил ответ. Если у вас появится новый вопрос, пожалуйста, создайте отдельную тему.
    – VenZell
    25 фев 2016 в 12:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.