[РЕШЕНО] Как выделить активный пункт меню?

[Rashpil]

Добрый день. Возникла необходимость выделять в главном (верхнем) меню активные пункты. Вот код меню:

<div id="menu">
 <ul>
<li><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>
<li><a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a></li>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a></li>
<li><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></li>
 </ul>
</div>

Вот магазин - http://fishing-trade.com/

[Vitukr]

Так они у Вас и так выделяются a:hover

Вы только этого не замечаете, так как цвета практически одинаковые.

[Rashpil]

Так они у Вас и так выделяются a:hover

Вы только этого не замечаете, так как цвета практически одинаковые.

Нет, речь идет о активных пунктах меню. А Вы пишите о изменение цвета при наведении. Мне нужно что бы такой цвет, как и при наведении, оставался у активных пунктов меню.

[Vitukr]

Нет, речь идет о активных пунктах меню. А Вы пишите о изменение цвета при наведении. Мне нужно что бы такой цвет, как и при наведении, оставался у активных пунктов меню.

Добавьте в стилях a:active к тому же элементу где и a:hover, скопировав все свойства оттуда.

[Rashpil]

Добавьте в стилях a:active к тому же элементу где и a:hover, скопировав все свойства оттуда.

Нет, это не помогает

[AlexFisher]

"Не помогает" - слишком уж размыто. Вам дали направление, в котором копать. От себя могу добавить, что этот самый hover можно присваивать, вычисляя жабаскриптом адрес страницы. Типа такого:

$(document).ready(function() {
route = getURLVar('route');

if (!route) {
$('#button_home').addClass('hovered');
} else {
part = route.split('/');

if (route == 'common/home') {
$('#button_home').addClass('hovered'); 
}  else if (route == 'checkout/cart') {
$('#button_cart').addClass('hovered');
}  else if (route == 'account/login') {
$('#button_account').addClass('hovered');
} 
}
});

[freelancer]

"Не помогает" - слишком уж размыто. Вам дали направление, в котором копать. От себя могу добавить, что этот самый hover можно присваивать, вычисляя жабаскриптом адрес страницы. Типа такого:

$(document).ready(function() {
route = getURLVar('route');

if (!route) {
$('#button_home').addClass('hovered');
} else {
part = route.split('/');

if (route == 'common/home') {
$('#button_home').addClass('hovered');
}  else if (route == 'checkout/cart') {
$('#button_cart').addClass('hovered');
}  else if (route == 'account/login') {
$('#button_account').addClass('hovered');
}
}
});

хороший способ. жаль с seo не работает

[AlexFisher]

Да. Для SEO нужен бубен =)

[Rashpil]

Все, я разобрался. Мне посоветовали код:

jQuery(document).ready(function($) {
var url=document.location.href;
$.each($("#preface-top a"),function(){
if(this.href==url){$(this).addClass('activeCSS');};
});
})(jQuery);

И он помог (на удивление, я разобрался что с ним делать :-) )

Всем спасибо!

[ocdev_pro]

Есть еще 1 неплохой вариант, который добавляет класс для любого елемента у которого уже назначен класс например "nav":
В header.tpl перед закрывающим тегом head

Пишем

<script language="JavaScript" type="text/javascript">
function highlight(){
  var tags=document.getElementsByTagName("li");
  for(i in tags){
    if(tags[i].className=="nav"){
        if(document.location.href==tags[i].firstChild.href){
            tags[i].className +=" active";
        }
    }
  }
}
</script>

где nav это класс элемента к которому нужно дописать active при активном пункте

Дальше после самого меню добавляем

<script language="JavaScript" type="text/javascript">highlight()</script>

Змінено 19 грудня 2013 користувачем tim21701

[Steorin]

Добрый день всем. Перечитал много обсуждений на эту тему, но не могу решить свою задачу. Замучался в край. Вот в этом фале мойсайт.com/catalog/view/theme/Мой шаблон/template/common/header.tpl есть следующий код для рабочего пункта меню:
<li><a class="<?php if ($this->request->get['route']=="information/contact") {echo "active";} ?>" href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>

Для создания дополнительного пункта добавил новую строку:
<li><a class="пусто" href="/dostavka_i_oplata.html" class="active">Доставка и Оплата</a></li>

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

Что мне нужно дописать и где? Какое решение (из вышеперечисленных) мне поможет? Конечно с адаптацией под мою ситуацию.

 

OpenCart 1.5.5.1 ocCMS 5.00 beta X6 (Commercial)

[AlexFisher]

Дайте ссылку на пациента.

[pasha77]

 

Есть еще 1 неплохой вариант, который добавляет класс для любого елемента у которого уже назначен класс например "nav":

В header.tpl перед закрывающим тегом head

Пишем

<script language="JavaScript" type="text/javascript">
function highlight(){
  var tags=document.getElementsByTagName("li");
  for(i in tags){
    if(tags[i].className=="nav"){
        if(document.location.href==tags[i].firstChild.href){
            tags[i].className +=" active";
        }
    }
  }
}
</script>

где nav это класс элемента к которому нужно дописать active при активном пункте

Дальше после самого меню добавляем

<script language="JavaScript" type="text/javascript">highlight()</script>

Решение работает и выделяется активный пункт если открыто сайт.ру/одна-ссылка

Но как сделать чтобы работало в случае сайт.ру/одна-ссылка/другая-ссылка

Нужно чтобы в обоих случаях подсвечивалась ссылка на "одна-ссылка".. т.е. как бы на категорию

Подскажете пожалуйста решение!

[Tom]

 <li><?php if ($category['active']) { ?>

<a href="ССЫЛКА НА СТРАНИЦУ">" class="active">ПУНКТ МЕНЮ</a>

<?php } else { ?>

<a href="ССЫЛКА НА СТРАНИЦУ">ПУНКТ МЕНЮ</a>

<?php } ?></li>

[pasha77]

 

 <li><?php if ($category['active']) { ?>

<a href="ССЫЛКА НА СТРАНИЦУ">" class="active">ПУНКТ МЕНЮ</a>

<?php } else { ?>

<a href="ССЫЛКА НА СТРАНИЦУ">ПУНКТ МЕНЮ</a>

<?php } ?></li>

то, что выделил красным, видимо ошибка? Исправил

Пробую, получаю ошибку.

Notice: Undefined variable: category in бла-бла\сайт.ру\vqmod\vqcache\vq2-catalog_view_theme_default_template_common_header.tpl on line 132

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

[Tom]

Я написал на примере   Ocstore.

[pasha77]

у меня ocstore.. вставляю код в header.tpl и сразу получаю ошибку

[AlexFisher]

ну так active из контроллера нужно брать. Хотя, вроде, оно там и так есть..

[pasha77]

Видимо нет. Способ предложенный выше Тоm не работает. Просьба помочь.

[AlexFisher]

В теме уже несколько решений. Вы своими "хелп" и "ап" к чему народ побуждаете? Еще что-нибудь придумать, поизощренней? Если "бьетесь уже неделю", а никак не получается, то, может, стоит сделать вывод "ну не мое это" и заплатить специалисту?

[pasha77]

не вижу в теме решения. Вернее оно есть но работает только для конечных страниц, а не для категорий.

[Tom]

catalog\view\theme\шаблон\template\common\header.tpl

 

до закрывающего

 

</head> добавляем скрипт 

 

<script type="text/javascript">
jQuery(document).ready(function($) {
var url=document.location.href;
$.each($("#menu a"),function(){
if(this.href==url){$(this).addClass('active');};
});
})(jQuery);
</script>

PS тестирую всё только на Ocstore 1.5.5.1.2

[pasha77]

 

catalog\view\theme\шаблон\template\common\header.tpl

 

до закрывающего

 

</head> добавляем скрипт 

 

<script type="text/javascript">
jQuery(document).ready(function($) {
var url=document.location.href;
$.each($("#menu a"),function(){
if(this.href==url){$(this).addClass('active');};
});
})(jQuery);
</script>

PS тестирую всё только на Ocstore 1.5.5.1.2

 

Сделал. Версия та же самая. Класс к <а> добавляется только если открыта категория. А ежели товар из этой категории - класса нету. :(

[Tom]

Речь шла о ссылках  для пунктов НЕ КАТЕГОРИЙ (статьи итп). При чём здесь товар и категории которые в Ocstore по-умолчанию подсвечиваются?

[pasha77]

Вы выше в теме пытались помочь по моему вопросу, а теперь говорите "причем здесь")))

 

У меня создано 2 меню, одно стандартными средствами, а второе - просто в коде хедера прописал:

<div id="mainmenu">
    <ul>
    <li class="arrow-right nav"><a href="index.php?route=product/category&path=60">Автомобильные</a></li>
    <li class="nav"><a href="index.php?route=product/category&path=59" >Для квадроцикла</a></li>
    <li class="nav"><a href="index.php?route=product/category&path=61">Для эвакуатора</a></li>
    <li class="nav"><a href="index.php?route=product/category&path=96">Переносные</a></li>
    </ul>
</div>

нужно вывести именно 2 разных меню. отправил сайт в личку на всякий случай..

 <li><?php if ($category['active']) { ?>
<a href="ССЫЛКА НА СТРАНИЦУ" class="active">ПУНКТ МЕНЮ</a>
<?php } else { ?>
<a href="ССЫЛКА НА СТРАНИЦУ">ПУНКТ МЕНЮ</a>
<?php } ?></li>

такой код пробовал, сайт выдает ошибку, писал выше.