Перейти к содержанию
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/

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


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

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

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

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


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

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

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

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

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


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

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

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

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


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

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

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

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


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

"Не помогает" - слишком уж размыто. Вам дали направление, в котором копать. От себя могу добавить, что этот самый 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');
} 
}
});

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


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

"Не помогает" - слишком уж размыто. Вам дали направление, в котором копать. От себя могу добавить, что этот самый 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 не работает

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


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

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

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

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

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

  • +1 1

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


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

Есть еще 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>
Изменено пользователем tim21701

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


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

Добрый день всем. Перечитал много обсуждений на эту тему, но не могу решить свою задачу. Замучался в край. Вот в этом фале мойсайт.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)

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


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

 

Есть еще 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>

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

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

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

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

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


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


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

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

<?php } else { ?>

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

<?php } ?></li>

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


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

 

 <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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

  • +1 1

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


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

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

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


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

 

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

 

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

  • +1 1

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


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

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

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


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

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

 

У меня создано 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>

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

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


Ссылка на сообщение
Поделиться на другие сайты
Гость
Эта тема закрыта для публикации ответов.

  • Похожий контент

    • От Iskander16
      Привет. Нужны небольшие правки в дизайне сайта на OpenCart: 

      1) Добавить отображение нескольких фото для товара (исправить, сейчас так – ribachok24.ru/index.php?r... 
      Добавить остальные фото под основное фото – ibb.co/z7KbJrX 
      2) Исправить фильтры. Например, по моделям. Сейчас выглядит так – ibb.co/M8KYVzy 
      Их добавить в рядом с сортировкой "По цене"
      Цена 800р, по времени - пару часов.
    • От Sha
      1 899.00 руб · Срок продления: 500.00 руб за 12 месяцев
      Скачать/Купить дополнение


      TONIC - Универсальный адаптивный шаблон
      Tonic - адаптивный и универсальный OpenCart шаблон. Данный шаблон это готовый инструмент для начала продаж в интернете. Современный и дружественный дизайн шаблона подойдет для магазинов различных тематик. Благодаря простой и логичной структуре кода, шаблон имеет высокую скорость работы, а модули присутствующие в комплекте шаблона расширят функционал и внешний вид интернет магазина. 
       
      Шаблон тестировался и работает на OpenCart и Ocstore 2.3.х
      При покупке шаблона каждый клиент при необходимости получает бесплатную помощь по настройке и установке! 
       
      DEMO
       

       
      Особенности шаблона
      Адаптивный дизайн Кроссбраузерная совместимость Модуль Расширенные баннеры             Модуль Ajax быстрый поиск            Модуль Витрина      Модуль Главное меню      Модуль Местоположение атрибутов      Модуль Социальные сети           Модуль Цветной статус товара      Модуль Стикеры Мини меню в шапке сайта Дополнительные позиции в макетах схем Пять цветовых схем Вывод кол-ва продуктов в категориях Упрощенная форма заказа Вывод дополнительных атрибутов для продуктов Iframe карта  Изображение в футере Отображение в продукте детальной информации Сокращение имени товаров  
      Технологии и библиотеки:
      html 5; css 3;  Bootstrap 3.3.5;  JQuery 2.1.1; не используется ionecube.  
      Техническая поддержка
      Техническая поддержка доступна пользователям из списка покупателей.
      Обращаясь с просьбой разобраться в проблеме, предоставьте:
      Адрес сайта; Доступ в админ-панель; Доступ на FTP-сервер. По вопросам технической поддержки обращайтесь через:
      Личные сообщения на форуме; Электронный адрес roma78sha@gmail.com Режим работы с 10-00 до 18-00 по киевскому времени за исключением выходных и праздничных дней. 
       
       
       
      Добавил Sha Добавлено 24.10.2017 Категория Платные шаблоны Системные требования php 5.4 и выше Сайт разработчика r.konotop.info Старая цена Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 2.3 ocStore 2.3 OpenCart.Pro, ocShop Opencart.pro 2.3
      OcShop 2.0.3.х  
    • От Sha
      Tonic - адаптивный и универсальный OpenCart шаблон. Данный шаблон это готовый инструмент для начала продаж в интернете. Современный и дружественный дизайн шаблона подойдет для магазинов различных тематик. Благодаря простой и логичной структуре кода, шаблон имеет высокую скорость работы, а модули присутствующие в комплекте шаблона расширят функционал и внешний вид интернет магазина. 
       
      Шаблон тестировался и работает на OpenCart и Ocstore 2.3.х
      При покупке шаблона каждый клиент при необходимости получает бесплатную помощь по настройке и установке! 
       
      DEMO
       

       
      Особенности шаблона
      Адаптивный дизайн Кроссбраузерная совместимость Модуль Расширенные баннеры             Модуль Ajax быстрый поиск            Модуль Витрина      Модуль Главное меню      Модуль Местоположение атрибутов      Модуль Социальные сети           Модуль Цветной статус товара      Модуль Стикеры Мини меню в шапке сайта Дополнительные позиции в макетах схем Пять цветовых схем Вывод кол-ва продуктов в категориях Упрощенная форма заказа Вывод дополнительных атрибутов для продуктов Iframe карта  Изображение в футере Отображение в продукте детальной информации Сокращение имени товаров  
      Технологии и библиотеки:
      html 5; css 3;  Bootstrap 3.3.5;  JQuery 2.1.1; не используется ionecube.  
      Техническая поддержка
      Техническая поддержка доступна пользователям из списка покупателей.
      Обращаясь с просьбой разобраться в проблеме, предоставьте:
      Адрес сайта; Доступ в админ-панель; Доступ на FTP-сервер. По вопросам технической поддержки обращайтесь через:
      Личные сообщения на форуме; Электронный адрес roma78sha@gmail.com Режим работы с 10-00 до 18-00 по киевскому времени за исключением выходных и праздничных дней. 
       
       
       
    • От AWARO
      699.00 руб
      Скачать/Купить дополнение


      HYPER Positions +70 позиций модулей
      Модуль будет развиваться - как выложим исправленную версию включим продажи .
      70 модульных позиций в 24х блоках  - Оформление, лендинг, дизайн.
      эта версия 2.0 - 2.1 - 2.2   -  для  версий 2.3x >>   ТУТ
       
      В модуле никогда не было стучалок и прочей лапши - всем, кто скачал где то - где модуль неофициально представлен - мои поздравления с вирусами и свободным доступом к вашей базе данных 
       
      Забудьте об однообразном расположении позиций вывода модулей как инкубационные яйца))
      Позаботьтесь о презентабельной подаче вашего сайта - это не только лицо вашей компании но и ваше лицо!
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
      Модуль не затирает а заменяет ваши стандартные схемы на свои! если что то не так - то достаточно его выключить в модификаторах!
      описание
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
      Модуль добавляет к уже имеющимся блокам ещё 24 блочных позиций и 70 колонок вывода модулей в 5 секциях!
      Внедрены четыре вида блоков общее количество которых 24 штуки каждый из которых так же можно растянуть на всю ширину экрана
      Восемь блоков четырех колоночных позиций = 32 модульных позиций Шесть блоков трех колоночных позиций = 18 модульных позиций Пять блоков трех колоночных позиций по типу стандарта = 15 модульных позиций Пять блоков с одно модульной позицией = 5 модульных позиций ДЕМО  с оформлением
      ДЕМО   без оформления
      АДМИНКА  demo\demo
           все модульные позиции              один из вариантов             чем ни лендинг?))

             

      Схемы настройки блоков
               
      + Вывод виджетов SEO CMS TOP от markimax
       
      Вывести можно хоть все позиции но! лучше только те, что вам нужны!
       
      Установка:
      В административной части во вкладке *Установка дополнений* загрузить архив. В административной части во вкладке *Менеджер дополнений* нажать кнопку обновления. ВНИМАНИЕ!
      Ни какие файлы не затираются
      --------------
      Возможно будет нужна адаптация под ваш шаблон  нужно смотреть походу..
      в любом случае если, что то не так пишите в тему поддержки - попробуем сделать
      ВНИМАНИЕ!
      Не подходит для использования под дебильные шаблоны по типу Jornal, Fastor и им подобных!
      Поддержка и адаптация под прочие шаблоны возможна только на ветке 2.3x!
      Прежде чем приобрести модуль уточняйте все моменты в теме поддержки!
       
      Если вы купили модуль и он у вас не корректно установился, не заработал и т.д. и вы мне отказываете в доступах для поддержки - значит поддержка вам ненужна
       
      Благодарность ваша это оставить отзыв к файлу. Это мотивирует нас на развитие модуля.
      Спасибо вам за спасибо!)
      Пользуйтесь на здоровье)
      Лицензия
      Это программное обеспечение не свободно!
      Условия использования лицензии - "одна покупка модуля > на один домен".
      Это означает, что Вы можете использовать одну лицензию для одного домена и его под доменов.
      Для дополнительных доменов требуется дополнительная покупка модуля!
      Запрещена передача данного ПО третьим лицам, распространение от своего имени, изменение исходных файлов модуля без получения разрешения на то автора модуля.
       
      Прежде чем купить читайте описание!
      Если не смотря на это вы всё же приобрели то знайте Модуль возврату или обмену не подлежит! Учтите этот момент!

      авторы - ElyCoin & AWARO
       
      Добавил AWARO Добавлено 11.04.2017 Категория Меню, дизайн, внешний вид Системные требования Сайт разработчика http://awaro.ru Старая цена 999 Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 2.1
      2.0 ocStore 2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.1
      OcShop 2.0.3.х  
    • От AWARO
      Модуль будет развиваться - как выложим исправленную версию включим продажи .
      70 модульных позиций в 24х блоках  - Оформление, лендинг, дизайн.
      эта версия 2.0 - 2.1 - 2.2   -  для  версий 2.3x >>   ТУТ
       
      В модуле никогда не было стучалок и прочей лапши - всем, кто скачал где то - где модуль неофициально представлен - мои поздравления с вирусами и свободным доступом к вашей базе данных 
       
      Забудьте об однообразном расположении позиций вывода модулей как инкубационные яйца))
      Позаботьтесь о презентабельной подаче вашего сайта - это не только лицо вашей компании но и ваше лицо!
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
      Модуль не затирает а заменяет ваши стандартные схемы на свои! если что то не так - то достаточно его выключить в модификаторах!
      описание
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
      Модуль добавляет к уже имеющимся блокам ещё 24 блочных позиций и 70 колонок вывода модулей в 5 секциях!
      Внедрены четыре вида блоков общее количество которых 24 штуки каждый из которых так же можно растянуть на всю ширину экрана
      Восемь блоков четырех колоночных позиций = 32 модульных позиций Шесть блоков трех колоночных позиций = 18 модульных позиций Пять блоков трех колоночных позиций по типу стандарта = 15 модульных позиций Пять блоков с одно модульной позицией = 5 модульных позиций ДЕМО  с оформлением
      ДЕМО   без оформления
      АДМИНКА  demo\demo
           все модульные позиции              один из вариантов             чем ни лендинг?))

             

      Схемы настройки блоков
               
      + Вывод виджетов SEO CMS TOP от markimax
       
      Вывести можно хоть все позиции но! лучше только те, что вам нужны!
       
      Установка:
      В административной части во вкладке *Установка дополнений* загрузить архив. В административной части во вкладке *Менеджер дополнений* нажать кнопку обновления. ВНИМАНИЕ!
      Ни какие файлы не затираются
      --------------
      Возможно будет нужна адаптация под ваш шаблон  нужно смотреть походу..
      в любом случае если, что то не так пишите в тему поддержки - попробуем сделать
      ВНИМАНИЕ!
      Не подходит для использования под дебильные шаблоны по типу Jornal, Fastor и им подобных!
      Поддержка и адаптация под прочие шаблоны возможна только на ветке 2.3x!
      Прежде чем приобрести модуль уточняйте все моменты в теме поддержки!
       
      Если вы купили модуль и он у вас не корректно установился, не заработал и т.д. и вы мне отказываете в доступах для поддержки - значит поддержка вам ненужна
       
      Благодарность ваша это оставить отзыв к файлу. Это мотивирует нас на развитие модуля.
      Спасибо вам за спасибо!)
      Пользуйтесь на здоровье)
      Лицензия
      Это программное обеспечение не свободно!
      Условия использования лицензии - "одна покупка модуля > на один домен".
      Это означает, что Вы можете использовать одну лицензию для одного домена и его под доменов.
      Для дополнительных доменов требуется дополнительная покупка модуля!
      Запрещена передача данного ПО третьим лицам, распространение от своего имени, изменение исходных файлов модуля без получения разрешения на то автора модуля.
       
      Прежде чем купить читайте описание!
      Если не смотря на это вы всё же приобрели то знайте Модуль возврату или обмену не подлежит! Учтите этот момент!

      авторы - ElyCoin & AWARO
       
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

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

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