Применение стиля только к одному элементу меню

[iforecstasy]

Есть тема ThemeGlobal. 2 вопроса: Как сделать чтобы скруглялся только левый элемент в меню при наведении а не все элементы при наведении на них? И как сделать чтобы текущая категория меню продолжала светиться, когда мы уже бродим по выпадающему списку.

Например, как тут http://livedemo00.te...opencart_40616/

[riny]

Как сделать чтобы скруглялся только левый элемент в меню при наведении а не все элементы при наведении на них?

.nav > li:first-child > a{

здесь стили

}

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

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

Например, как тут http://livedemo00.te...opencart_40616/

добавьте перед закрывающим тегом </head> файла header.tpl этот код:

<script type="text/javascript">
$(document).ready(function () {
	var url = document.location.toString();
	$("a").filter(function () {
		return url.indexOf(this.href) != -1;
	}).addClass("active");
});
</script>

затем в стилях у вас должно быть что-то вроде .navbar .nav > li > a:hover {} , измените вот так .navbar .nav > li > a:hover, .navbar .nav > li > a.active{}

[biotorn]

.nav > li:first-child > a{

здесь стили

}

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

добавьте перед закрывающим тегом </head> файла header.tpl этот код:

<script type="text/javascript">
	$(document).ready(function () {
		var url = document.location.toString();
		$("a").filter(function () {
			return url.indexOf(this.href) != -1;
		}).addClass("active");
	});
</script>

затем в стилях у вас должно быть что-то вроде .navbar .nav > li > a:hover {} , измените вот так .navbar .nav > li > a:hover, .navbar .nav > li > a.active{}

 

.nav > li:first-child > a{

здесь стили

}

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

добавьте перед закрывающим тегом </head> файла header.tpl этот код:

<script type="text/javascript">
	$(document).ready(function () {
		var url = document.location.toString();
		$("a").filter(function () {
			return url.indexOf(this.href) != -1;
		}).addClass("active");
	});
</script>

затем в стилях у вас должно быть что-то вроде .navbar .nav > li > a:hover {} , измените вот так .navbar .nav > li > a:hover, .navbar .nav > li > a.active{}

 

 

 

Здравствуйте, сделал как вы рекомендовали, все работает, но вместе с активным пунктом меню теперь постоянно активен и самый первый (левый пункт), подскажите пожалуйста как можно исправить

[riny]

Здравствуйте, сделал как вы рекомендовали, все работает, но вместе с активным пунктом меню теперь постоянно активен и самый первый (левый пункт), подскажите пожалуйста как можно исправить

лучше ссылку на сайт дайте, уже не помню подробностей.

[sammygr]

.nav > li:first-child > a{

здесь стили

}

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

добавьте перед закрывающим тегом </head> файла header.tpl этот код:

<script type="text/javascript">
	$(document).ready(function () {
		var url = document.location.toString();
		$("a").filter(function () {
			return url.indexOf(this.href) != -1;
		}).addClass("active");
	});
</script>

затем в стилях у вас должно быть что-то вроде .navbar .nav > li > a:hover {} , измените вот так .navbar .nav > li > a:hover, .navbar .nav > li > a.active{}

 

 

Подскажите, плиз, как должен выглядеть этот код вот для такого меню:

<ul>
<li class="category-137"><a href="/category&path=137" class="category-btn"><span></span>Пункт 1</a>
</li>
<li class="category-81"><a href="/category&path=81" class="category-btn"><span></span>Пункт 2</a>
</li>
<li class="category-134"><a href="/category&path=134" class="category-btn"><span></span>Пункт 3</a>
</li>
<li class="category-78">
   <a href="/category&path=78" class="category-btn"><span></span>Пункт 4</a>
   <a href="/category&path=78" class="toggle-btn"> </a>
   <ul>
      <li class="category-80"><a href="/category&path=78_80" class="category-btn"><span></span>Подпункт 1</a>
      </li>
      <li class="category-92"><a href="/category&path=78_92" class="category-btn"><span></span>Подпункт 2</a>
      </li>
      <li class="category-132"><a href="/category&path=78_132" class="category-btn"><span></span>Подпункт 3</a>
      </li>
      <li class="category-79"><a href="/category&path=78_79" class="category-btn"><span></span>Подпункт 4</a>
      </li>
      <li class="category-136"><a href="/category&path=78_136" class="category-btn"><span></span>Подпункт 5</a>
      </li>
      <li class="category-133"><a href="/category&path=78_133" class="category-btn"><span></span>Подпункт 6</a>
      </li>
      <li class="category-109"><a href="/category&path=78_109" class="category-btn"><span></span>Подпункт 7</a>
      </li>
      <li class="category-131"><a href="/category&path=78_131" class="category-btn"><span></span>Подпункт 8</a>
      </li>
   </ul>
</li>
<li class="category-91"><a href="/category&path=91" class="category-btn"><span></span>Пункт 5</a>
</li>
<li class="category-89">
   <a href="/category&path=89" class="category-btn"><span></span>Пункт 6</a>
   <a href="/category&path=89" class="toggle-btn"> </a>
   <ul>
      <li class="category-117"><a href="/category&path=89_117" class="category-btn"><span></span>Подпункт 1</a>
      </li>
   </ul>
</li>
</ul>

Спасибо! )