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

Тема в разделе "Инструкции и FAQ", создана пользователем Ravilr, 8 май 2015.

  1. Ravilr

    Ravilr Специалист

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

    открываем файл \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);
    }

    Если кто сделает окмод, то хорошо, "добро пожаловать в клуб )) "
     
    Последнее редактирование: 8 май 2015
    ввапвп, RoS, opencarter и ещё 1-му нравится это.
  2. tsap

    tsap Продвинутый пользователь

    Сообщения:
    230
    Симпатии:
    131
    а можно увидеть скриншот До-После?
     
  3. Ravilr

    Ravilr Специалист

    Сообщения:
    3.116
    Симпатии:
    861
  4. tsap

    tsap Продвинутый пользователь

    Сообщения:
    230
    Симпатии:
    131
    странно, такая мелочь, по идее должно быть по умолчанию из коробки
    пилить и пилить....
     
  5. ivan13i

    ivan13i Новичок

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

    ivan13i Новичок

    Сообщения:
    17
    Симпатии:
    2
    Спасибо, разобрался сам.

    Может кому понадобится, прописал 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 ;
    }
     
    Последнее редактирование: 30 янв 2016
    Vlad нравится это.
  7. ivan13i

    ivan13i Новичок

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

    Vlad Эксперт

    Сообщения:
    3.895
    Симпатии:
    938
    наверно как то так

    PHP:
    <li><a href="./punt-menu" <?php if ($_SERVER["REQUEST_URI"]  == "/punt-menu") {echo 'class="active" ';} ?>>Пункт</a></li>
     
    ivan13i нравится это.
  9. ivan13i

    ivan13i Новичок

    Сообщения:
    17
    Симпатии:
    2
    Спасибо, сейчас попробую. Я сделал уже, но по другому:
    добавил скрипт
    Код:
    <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>
     
  10. Vlad

    Vlad Эксперт

    Сообщения:
    3.895
    Симпатии:
    938
  11. ivan13i

    ivan13i Новичок

    Сообщения:
    17
    Симпатии:
    2
    Исправил. Ваш вариант рабочий и мне больше подходит. Не люблю скриптов много.
     
  12. ivan13i

    ivan13i Новичок

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

    ivan13i Новичок

    Сообщения:
    17
    Симпатии:
    2
    Всё, разобрался, мой косяк. Код правильный
     
  14. opencarter

    opencarter Пользователь

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

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

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

    ivan13i Новичок

    Сообщения:
    17
    Симпатии:
    2
    пропишите в 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 ;
    }
     
  16. opencarter

    opencarter Пользователь

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

    ivan13i Новичок

    Сообщения:
    17
    Симпатии:
    2
    сделайте такую ссылку
    Код:
    <li><a href="./punt-menu" <?php if ($_SERVER["REQUEST_URI"]  == "/punt-menu") {echo 'class="active" ';} ?>>Пункт</a></li>
    Путь смените на свой
     
  18. opencarter

    opencarter Пользователь

    Сообщения:
    54
    Симпатии:
    1
    У меня вот что уже есть в стилях:
    #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;}
     
  19. opencarter

    opencarter Пользователь

    Сообщения:
    54
    Симпатии:
    1
    Пробовал. Меню сломалось, появился пункт меню в цвет с главным меню и остальные пункты сместились.
     
  20. ivan13i

    ivan13i Новичок

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