31 июля 2017 в 12:22
Имеется Landing Page на Drupal 7. Меню со скроллингом к блокам на странице реализовано с помощью scrool to destination anchors и void menu. Каким способом можно реализовать так, чтобы выделялись ссылки меню (добавлялся класс .active) в зависимости от того места где мы находимся на странице?
Так же есть внутренние страницы, например переход к архиву новостей. На внутренних страницах есть другое меню со ссылками вида '/#news_block'. Оно тоже с помощью void menu работает. При нажатии на пункт меню с ссылкой типа '/#news_block' нас перекидывает на главную страницу сразу к блоку новостей. А каким способом здесь можно сделать так, чтобы ссылки имели класс .active?
Комментарии
js
Модуль https://www.drupal.org/project/waypoints
Делал тут http://decomr.eu
Код http://decomr.eu/sites/all/themes/villagesite/js/script-funk.js
Определенные проблемы есть, но работает
спасибо, получилось. На главной теперь все красиво. Но второй вопрос так и остался открытым.
Если кому-то еще надо будет, то для добавления классов css пунткам меню - модуль Menu Attributes
Точняк, сам же недавно юзал вэйпоинтс. Причем можно и без модуля просто скрипт подрубить.
Осталось решить вопрос с классами active у пунктов меню на внутренних страницах.
Например... Находясь на странице архива новостей по адресу /news мы имеем в меню ссылку "Новости" с адресом '/#news_block', которая ведет к якорю блоку на главной. На этой странице нужно этот пункт и выделить классом .active.
Я хз как к ним добавить активные классы.
собирай скриптом все анкорные ссылки и все их цели обрабатывай вэйпоинтом, когда цель на экране, добавляй класс к её ссылке. Как-то так
ты наверное меня не понял. а может я не врубаюсь
Как залью на хостинг дам ссылку
я тоже не понял. в моем понимании так и работает, что класс active добавляется при переходе на нужную страницу
_vinodelrf.softohome.com/news
обратите внимание куда ведет ссылка в шапке "Новости". Вот как находясь на этой странице новостей сделать ссылку Новости активной? Может как-то жестко можно это задать в зависимости от url на котором мы находимся?
if ($(this).attr('href') === window.location.hash) {
$(this).addClass('active');
}
});
Что сложного то?
Аналогично с вэйпоинтс - перебираем все ссылки из менюшки по их хэшам находим блоки, на которые они ссылаются. Ищем, есть ли блок на текущей странице. Если есть, то вешаем на него вэйпоинт, который будет добавлять класс к ссылке у которой хэш такой же, как айдишник блока.
добавил код в файл js
if ($(this).attr('href') === window.location.hash) {
$(this).addClass('active');
}
});
в css так
border-bottom: 1px solid #fff;
}
но на страничке _vinodelrf.softohome.com/news никакой из пунктов не стал активным.
И ведь как оно узнает какой именно пункт надо подсветить
Или мы сейчас о главной странице с якорями говорим? На главной с вэйпоинтс я уже сделал по примеру VasyOK, там работает.
А для не-главной разве нельзя?
пля, вот я дурная бошка!
тебе надо подсветить ссылку, если на неё кликнули? Или что? Почему вэйпроинтс нельзя на внутренних юзать?
нет, это я тупорылить решил, теперь понял
Ребят, до меня дошло! Спасибо!
а нет! не то! срабатывает только если прокрутить до блока. А нужно сделать пункт активным при условии, что блок вообще есть на странице даже без прокрутки к нему.
Допустим на странице _vinodelrf.softohome.com/news надо сделать активным пункт Новости (этот пункт имеет класс insideNews), а на странице _vinodelrf.softohome.com/gallery активным должен быть пункт Фотогалерея (этот пункт имеет класс insideGallery). И причем интересно, если пойти дальше по фотогалереи будет ли и там оставаться активным соответствующий пункт.
"А нужно сделать пункт активным при условии, что блок вообще есть на странице даже без прокрутки к нему."
Это можно сделать. Например через модуль context и не только им.
Но как это увязать с меню зафиксированным сверху я не представляю. Не представляю что сделать нужно.
Может на определенных страницах разные меню использовать?
для внутренних страниц сделал отдельное меню...как буду на работе попробую еще один js скрипт, который нагуглил, он там вроде в зависимости от URL адреса по классу подсвечивать пункт может (ну типа добавлять класс), а то забыл пароль от team viewer
Context ща позырю, благодарю.
в Context добавил условие "Путь". А реакцию какую надо выбрать, не вкурю
Путь после хэша модулями не обрабатывается.
Сижу с мобилы, не могу написать код, но суть такая - перебираем все ссылки нужного меню. Берём хреф со ссылки, и ищем элемент с айдишником, равным хрефу. допустим так
var x = $('a').attr('href');
if ($(x).length) $('a').addClass('active')
я как собака - понимаю, а
сказатьнаписать не могу. Хотя...собака понимает и делает, а я любитель тупить.Ладно, у меня пока выходные после смен, заодно есть время сообразить...буду отписываться в теме...
А пока что интересное видео
про меняс умным шимпанзе в темуhttps://www.youtube.com/watch?v=anyrA-O6JLE
Все дороги ведут в первый комментарий. и думаю это будет лучший выход из ситуации