1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Установка и настройка

Класс .active у ссылок меню на страницах

Главные вкладки

Аватар пользователя xSPiRiTx xSPiRiTx 31 июля 2017 в 12:22

Имеется Landing Page на Drupal 7. Меню со скроллингом к блокам на странице реализовано с помощью scrool to destination anchors и void menu. Каким способом можно реализовать так, чтобы выделялись ссылки меню (добавлялся класс .active) в зависимости от того места где мы находимся на странице?
Так же есть внутренние страницы, например переход к архиву новостей. На внутренних страницах есть другое меню со ссылками вида '/#news_block'. Оно тоже с помощью void menu работает. При нажатии на пункт меню с ссылкой типа '/#news_block' нас перекидывает на главную страницу сразу к блоку новостей. А каким способом здесь можно сделать так, чтобы ссылки имели класс .active?

Комментарии

Аватар пользователя xSPiRiTx xSPiRiTx 1 августа 2017 в 11:42

спасибо, получилось. На главной теперь все красиво. Но второй вопрос так и остался открытым.
Если кому-то еще надо будет, то для добавления классов css пунткам меню - модуль Menu Attributes

Аватар пользователя xSPiRiTx xSPiRiTx 1 августа 2017 в 11:58

Осталось решить вопрос с классами active у пунктов меню на внутренних страницах.
Например... Находясь на странице архива новостей по адресу /news мы имеем в меню ссылку "Новости" с адресом '/#news_block', которая ведет к якорю блоку на главной. На этой странице нужно этот пункт и выделить классом .active.
Я хз как к ним добавить активные классы.

Аватар пользователя gun_dose gun_dose 1 августа 2017 в 12:01

собирай скриптом все анкорные ссылки и все их цели обрабатывай вэйпоинтом, когда цель на экране, добавляй класс к её ссылке. Как-то так

Аватар пользователя VasyOK VasyOK 1 августа 2017 в 13:41

я тоже не понял. в моем понимании так и работает, что класс active добавляется при переходе на нужную страницу

Аватар пользователя xSPiRiTx xSPiRiTx 1 августа 2017 в 14:45

_vinodelrf.softohome.com/news
обратите внимание куда ведет ссылка в шапке "Новости". Вот как находясь на этой странице новостей сделать ссылку Новости активной? Может как-то жестко можно это задать в зависимости от url на котором мы находимся?

Аватар пользователя gun_dose gun_dose 1 августа 2017 в 16:15
$('a').each(function(){
  if  ($(this).attr('href') === window.location.hash) {
    $(this).addClass('active');
  }
});

Что сложного то?

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

Аватар пользователя xSPiRiTx xSPiRiTx 1 августа 2017 в 17:01

добавил код в файл js

$('#inside-header .inside-menu ul li a').each(function(){
  if  ($(this).attr('href') === window.location.hash) {
    $(this).addClass('active');
  }
});

в css так

#inside-header .inside-menu ul li a.active {
  border-bottom: 1px solid #fff;
}

но на страничке _vinodelrf.softohome.com/news никакой из пунктов не стал активным.
И ведь как оно узнает какой именно пункт надо подсветить

Или мы сейчас о главной странице с якорями говорим? На главной с вэйпоинтс я уже сделал по примеру VasyOK, там работает.

Аватар пользователя gun_dose gun_dose 1 августа 2017 в 17:33
1

тебе надо подсветить ссылку, если на неё кликнули? Или что? Почему вэйпроинтс нельзя на внутренних юзать?

Аватар пользователя xSPiRiTx xSPiRiTx 1 августа 2017 в 18:20

а нет! не то! срабатывает только если прокрутить до блока. А нужно сделать пункт активным при условии, что блок вообще есть на странице даже без прокрутки к нему.

Допустим на странице _vinodelrf.softohome.com/news надо сделать активным пункт Новости (этот пункт имеет класс insideNews), а на странице _vinodelrf.softohome.com/gallery активным должен быть пункт Фотогалерея (этот пункт имеет класс insideGallery). И причем интересно, если пойти дальше по фотогалереи будет ли и там оставаться активным соответствующий пункт.

Аватар пользователя VasyOK VasyOK 1 августа 2017 в 18:55

"А нужно сделать пункт активным при условии, что блок вообще есть на странице даже без прокрутки к нему."
Это можно сделать. Например через модуль context и не только им.

Но как это увязать с меню зафиксированным сверху я не представляю. Не представляю что сделать нужно.

Может на определенных страницах разные меню использовать?

Аватар пользователя xSPiRiTx xSPiRiTx 1 августа 2017 в 19:19

для внутренних страниц сделал отдельное меню...как буду на работе попробую еще один js скрипт, который нагуглил, он там вроде в зависимости от URL адреса по классу подсвечивать пункт может (ну типа добавлять класс), а то забыл пароль от team viewer Sad

Context ща позырю, благодарю.

Аватар пользователя gun_dose gun_dose 1 августа 2017 в 21:03
2

Путь после хэша модулями не обрабатывается.

Сижу с мобилы, не могу написать код, но суть такая - перебираем все ссылки нужного меню. Берём хреф со ссылки, и ищем элемент с айдишником, равным хрефу. допустим так
var x = $('a').attr('href');
if ($(x).length) $('a').addClass('active')

Аватар пользователя xSPiRiTx xSPiRiTx 1 августа 2017 в 21:59

я как собака - понимаю, а сказать написать не могу. Хотя...собака понимает и делает, а я любитель тупить.
Ладно, у меня пока выходные после смен, заодно есть время сообразить...буду отписываться в теме...
А пока что интересное видео про меня с умным шимпанзе в тему
https://www.youtube.com/watch?v=anyrA-O6JLE