Перейти к содержанию
iforecstasy

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

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

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

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

Поделиться сообщением


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

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

.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

Поделиться сообщением


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

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

 

 

 

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

Поделиться сообщением


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

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

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

Поделиться сообщением


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

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