Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


 Поделиться

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

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

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

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


  • 2 месяца спустя...

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

.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{}

  • +1 2
Ссылка на комментарий
Поделиться на других сайтах

  • 1 год спустя...

.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{}

 

 

 

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

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


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

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

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

  • 2 года спустя...

.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>

Спасибо! )

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


Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

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

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