Активный пункт в главном меню

Делаем активный пункт в главном меню. Инструкция действительна для шаблона по умолчанию.

открываем файл \catalog\controller\common\header.php

и после

PHP:

$categories = $this->model_catalog_category->getCategories(0);

добавим

PHP:

        if (isset($this->request->get['path'])) {
            $parts = explode('_', (string)$this->request->get['path']);
        } else {
            $parts = array();
        }

        if (isset($parts[0])) {
            $data['category_id'] = $parts[0];
        } else {
            $data['category_id'] = 0;
        }

        if (isset($parts[1])) {
            $data['child_id'] = $parts[1];
        } else {
            $data['child_id'] = 0;
        }

далее после

PHP:

$children_data[] = array(

добавим

PHP:

'category_id'     => $child['category_id'], 

и после

PHP:

$data['categories'][] = array(

вставим

PHP:

'category_id'     => $category['category_id'],

С конролером все.

Далее в файле шаблона \catalog\view\theme\default\template\common\header.tpl

меняем это

Код:

<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>

на это

Код:

<li class="dropdown <?php echo ($category['category_id'] == $category_id) ? 'active' : ''; ?>"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
        

а это

Код:

<li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>

на это

Код:

<li <?php echo ($child['category_id'] == $child_id) ? 'class="active"' : ''; ?>><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>

а это

Код:

<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>

на это

Код:

<li <?php echo ($category['category_id'] == $category_id) ? 'class="active"' : ''; ?>><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>

теперь в файле стилей \catalog\view\theme\default\stylesheet\stylesheet.css
добавим

Код:

#menu .nav li.active {
    background-color: rgba(0, 0, 0, 0.1);
}

Если кто сделает окмод, то хорошо, "добро пожаловать в клуб )) "

 

а можно увидеть скриншот До-После?

 

ДО



ПОСЛЕ

 

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

 

Добрый день, спасибо за доработку, только здесь нашёл. А есть вариант не "li" подсветить, а саму ссылку в меню. Я прописывал "#menu .nav li.active a" , но тогда подсвечиваются все категории в одной ветке вместо одной активной.

 

Спасибо, разобрался сам.

Может кому понадобится, прописал css таким образом:

Код:

#menu .nav li.active a.dropdown-toggle {
    color: #f00;
}

#menu .nav li .active a {
    color:#000 !important;
}

#menu .nav li.active>a {
    color:#00f ;
}

 

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

 

наверно как то так

PHP:

<li><a href="./punt-menu" <?php if ($_SERVER["REQUEST_URI"]  == "/punt-menu") {echo 'class="active" ';} ?>>Пункт</a></li>

 

Спасибо, сейчас попробую. Я сделал уже, но по другому:
добавил скрипт

Код:

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

 

Исправьте пожалуйста сообщения как указано в рекомендациях. http://forum.opencart-russia.ru/threads/rekomendacii-po-oformleniju-koda-i-voprosov.460/

 

Исправил. Ваш вариант рабочий и мне больше подходит. Не люблю скриптов много.

 

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

 

Всё, разобрался, мой косяк. Код правильный

 

Добрый вечер.
Спасибо за инструкцию. Все получилось.

Как подсветить свои пункты меню? Например вот этот:
<li><a href="http://site.ru/news/">Новости</a></li>

Этот вариант не помогает:

 

пропишите в css

Код:

#menu .nav li.active a.dropdown-toggle {
    color: #f00;
}

#menu .nav li .active a {
    color:#000 !important;
}

#menu .nav li.active>a {
    color:#00f ;
}

 

Не сработало.
Может к этой ссылке:
<li><a href="http://site.ru/news/">Новости</a></li>
нужно добавить какой-то класс или кусок кода?

 

сделайте такую ссылку

Код:

<li><a href="./punt-menu" <?php if ($_SERVER["REQUEST_URI"]  == "/punt-menu") {echo 'class="active" ';} ?>>Пункт</a></li>

Путь смените на свой

 

У меня вот что уже есть в стилях:
#menu .nav > li > a{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);padding:10px 15px 10px 15px;min-height:15px;background-color:transparent;}
#menu .nav > li > a:hover, #menu .nav > li.open > a{background-color:rgba(0, 0, 0, 0.1);}
#menu .nav li.active {background-color:rgb(3, 86, 200);}
#menu .nav li.active > a{color: #fff;}
#menu .dropdown-menu{padding-bottom:0;}

 

Пробовал. Меню сломалось, появился пункт меню в цвет с главным меню и остальные пункты сместились.

 

Значит ошибку где то допускаете. У меня всё работает.