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

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

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


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

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

    • От barboosdjan
      Доброго дня!
       
      Движок 1.5.5.1 сильно кастомизированный с частями от 2.3
      Требуется услуга верстальщика для:
      - расширения сайта до 1280
      - определения отображения дизайна меню, подменю, подкатегорий
      - перевернуть фильтр по горизонтали и красиво отверсать
      - допилка моб версии в части шрифтом, интервалов
      Пока все.
    • От barboosdjan
      Доброго дня!
       
      Движок 1.5.5.1 сильно кастомизированный с частями от 2.3
      Требуется услуга верстальщика для:
      - расширения сайта до 1280
      - определения отображения дизайна меню, подменю, подкатегорий
      - перевернуть фильтр по горизонтали и красиво отверсать
      - допилка моб версии в части шрифтом, интервалов
      Пока все.
    • От AWARO
      799.00 руб
      Скачать/Купить дополнение


      +70 позиций модулей \ HYPER Positions - oc3x
      Лендинг дизайн, оформление.. 70 модульных позиций в 24х блоках - oc-3x
       
      для opencart 2.3х - тут
      для opencart 2.0 - 2.1 - 2.2  - тут
      В модуле никогда не было стучалок и прочей лапши - всем, кто скачал где то - где модуль неофициально представлен - мои поздравления с вирусами и свободным доступом к вашей базе данных 
       
      Забудьте об однообразном расположении позиций вывода модулей как инкубационные яйца))
      Позаботьтесь о презентабельной подаче вашего сайта - это не только лицо вашей компании но и ваше лицо!
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!

      Модуль добавляет к уже имеющимся блокам ещё 24 блочных позиций и 70 колонок вывода модулей в 5 секциях!
      Внедрены четыре вида блоков обшее количество которых 24 штуки каждый из которых так же можно растянуть на всю ширину экрана
      Восемь блоков четырех колоночных позиций = 32 модульных позиций Шесть блоков трех колоночных позиций = 18 модульных позиций Пять блоков трех колоночных позиций по типу стандарта = 15 модульных позиций Пять блоков с одно модульной позицией = 5 модульных позиций Возможность перетаскивать модули по сортировке ДЕМО  с оформлением
      ДЕМО   без оформления
      АДМИНКА  demo\demo
           все модульные позиции              один из вариантов             чем ни лендинг?))

             

      Схемы настройки блоков
      кликните по картинке и откройте в полном размере
               
       
      Вывести можно хоть все позиции но лучше то что нужно!
       
      Установка:
      В административной части во вкладке *Установка дополнений* загрузить архив. В административной части во вкладке *Менеджер дополнений* нажать кнопку обновления. Дать права на редактирование модуля Включить модуль в модулях В схемах выставить модули по вашему усмотрени. Ни какие файлы не затираются
      --------------
      Возможно будет нужна адаптация под ваш шаблон  нужно смотреть походу..
      в любом случае если, что то не так пишите в тему поддержки - попробуем сделать
      ВНИМАНИЕ!
      Не подходит для использования под дебильные шаблоны по типу Jornal, Fastor и им подобных!
      Поддержка и адаптация под прочие шаблоны возможна только на ветке 3x!
      Прежде чем приобрести модуль уточняйте все моменты в теме поддержки!
       
      Если вы купили модуль и он у вас не корректно установился, не заработал и т.д. и вы мне отказываете в доступах для поддержки - значит поддержка вам ненужна
       
       
      Благодарность ваша это оставить отзыв к файлу. Это мотивирует нас на развитие модуля.
      Спасибо вам за спасибо!)
      Пользуйтесь на здоровье)
      Прежде чем купить читайте описание!
      Если не смотря на это вы всё же приобрели то знайте Модуль возврату или обмену не подлежит! Учтите этот момент!
       
      ЛИЦЕНЗИОННОЕ СОГЛАШЕНИЕ!
       
      Добавил AWARO Добавлено 26.02.2019 Категория Модули Системные требования прямые руки Сайт разработчика https://awaro.ru Старая цена 999 Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 3.0 ocStore 3.0 OpenCart.Pro, ocShop Обращение к серверу разработчика Нет  
    • От AWARO
      Лендинг дизайн, оформление.. 70 модульных позиций в 24х блоках - oc-3x
       
      для opencart 2.3х - тут
      для opencart 2.0 - 2.1 - 2.2  - тут
      В модуле никогда не было стучалок и прочей лапши - всем, кто скачал где то - где модуль неофициально представлен - мои поздравления с вирусами и свободным доступом к вашей базе данных 
       
      Забудьте об однообразном расположении позиций вывода модулей как инкубационные яйца))
      Позаботьтесь о презентабельной подаче вашего сайта - это не только лицо вашей компании но и ваше лицо!
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!

      Модуль добавляет к уже имеющимся блокам ещё 24 блочных позиций и 70 колонок вывода модулей в 5 секциях!
      Внедрены четыре вида блоков обшее количество которых 24 штуки каждый из которых так же можно растянуть на всю ширину экрана
      Восемь блоков четырех колоночных позиций = 32 модульных позиций Шесть блоков трех колоночных позиций = 18 модульных позиций Пять блоков трех колоночных позиций по типу стандарта = 15 модульных позиций Пять блоков с одно модульной позицией = 5 модульных позиций Возможность перетаскивать модули по сортировке ДЕМО  с оформлением
      ДЕМО   без оформления
      АДМИНКА  demo\demo
           все модульные позиции              один из вариантов             чем ни лендинг?))

             

      Схемы настройки блоков
      кликните по картинке и откройте в полном размере
               
       
      Вывести можно хоть все позиции но лучше то что нужно!
       
      Установка:
      В административной части во вкладке *Установка дополнений* загрузить архив. В административной части во вкладке *Менеджер дополнений* нажать кнопку обновления. Дать права на редактирование модуля Включить модуль в модулях В схемах выставить модули по вашему усмотрени. Ни какие файлы не затираются
      --------------
      Возможно будет нужна адаптация под ваш шаблон  нужно смотреть походу..
      в любом случае если, что то не так пишите в тему поддержки - попробуем сделать
      ВНИМАНИЕ!
      Не подходит для использования под дебильные шаблоны по типу Jornal, Fastor и им подобных!
      Поддержка и адаптация под прочие шаблоны возможна только на ветке 3x!
      Прежде чем приобрести модуль уточняйте все моменты в теме поддержки!
       
      Если вы купили модуль и он у вас не корректно установился, не заработал и т.д. и вы мне отказываете в доступах для поддержки - значит поддержка вам ненужна
       
       
      Благодарность ваша это оставить отзыв к файлу. Это мотивирует нас на развитие модуля.
      Спасибо вам за спасибо!)
      Пользуйтесь на здоровье)
      Прежде чем купить читайте описание!
      Если не смотря на это вы всё же приобрели то знайте Модуль возврату или обмену не подлежит! Учтите этот момент!
       
      ЛИЦЕНЗИОННОЕ СОГЛАШЕНИЕ!
       
    • От dmutro962
      Здравствуйте! Прошу помочь мне изменить стандартный шаблон в ocstore а именно изменить шапку сайта.

      из этого сделать к примеру как тут:

      http://ntools.com.ua/
       
      Прошу не судить строго, очень нуждаюсь в помощи!
       
  • Последние посетители   0 пользователей онлайн

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

×

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

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