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

31 июля 2017 в 12:22
Drupal7 Установка и настройка
Аватар пользователя xSPiRiTx xSPiRiTx 0 23

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

Комментарии

Аватар пользователя xSPiRiTx xSPiRiTx 0

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

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

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

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

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

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

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

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

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

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

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

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

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

добавил код в файл 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, там работает.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1 августа 2017 в 21:59