Бывают же такие ситуации, когда клиенту нужен лендинг, а на самом деле получается сайт из нескольких страниц.
Главная страница - создается в виде лендинга, а дополнительно добавляются страницы конфиденциальности и политики обработки данных.
Вроде бы ничего страшного. Ссылки на дополнительные страницы в футер, а в верхнем меню якорные ссылки на блоки главной страницы.
Но, заказчик с фантазией, хочет чтобы было красиво. И появляются дополнительные условия:
активные пункты верхнего меню должны подсвечиваться (выделяться подчеркиванием),
в меню нужно добавить ссылку на еще одну дополнительную страницу - Контакты.
Лендинг создается на CMS Wordpress с использованием конструктора Elementor. В выбранном шаблоне используется плагин для управления областями header и footer без покупки версии Elementor Pro.
Пункты меню при наведении и после нажатия должны подсвечиваться полосой снизу. При прокрутке страницы вниз меню фиксируется.
В админке созданы два варианта меню. В первом в якорных ссылках не указан домен, т.е. ссылки типа #link1. Во втором домен указан mydomain.com/#link1. Первое меню показывается на Главной, второе - на странице Контакты. Если бы мы использовали на всех страницах первое меню, то при переходе по якорным ссылкам со страницы Контакты, все якоря в url добавлялись бы к ней же: mydomain.com/contacts#link1. Elementor позволяет нам указывать для разных страниц разные headers с разными меню.
И вот с чем мы сталкиваемся в таком случае:
Если мы находимся на главной, то якорные ссылки подсвечиваются только при наведении. В url адрес якоря не добавляются.
Когда мы находимся на странице Контакты - соответствующий пункт меню подсвечивается.
При нажатии любого пункта меню с якорем, мы естественно перенаправляемся со страницы Контакты на Главную. При этом в url добавляется якорь. Активная ссылка при этом не подсвечивается.
Теперь пробуем выбрать другие якорные ссылки, и они подсвечиваются в активном состоянии. Причем если мы выберем ссылку по которой перешли со страницы Контакты она тоже подсвечивается. В url адресе при нажатии по всем якорным ссылкам остается якорь ссылки по которой мы перешли со страницы Контакты.
А почему бы нам не использовать второй вариант меню для всех страниц?
Потому что, в таком случае при прямом переходе на главную и при переходе по любому якорю у нас будут подсвечены все ссылки. Так происходит потому что в Wordpress для активных пунктов меню добавляются классы current-menu-item current_page_item к тегу <li> и атрибут aria-current="page"к тегу <a>. И в случае якорных ссылок на одной странице эти классы и атрибут будут присутствовать в тегах всех пунктов меню с якорями при нахождении на этой странице.
Есть ли выход в данной ситуации без привлечения программистов?
Да, но необходимы базовые знания, уровня что такое скрипт, стили css и куда всё это добавлять. Мы поискали на разных сайтах готовые решения и попытались их проверить. Практически всё что нашли работает не так как ожидалось. Показалось интересным предложение установить плагин Page scroll to id - там должен по умолчанию добавляться класс mPS2id-highlight к активной ссылке, но у нас он так и не добавился, возможно он не работает корректно с выбранной нами темой.
Больше всего под решение задачи подошел такой вариант:
https://atuin.ru/demo/noindex/landing-menu.html
В принципе скрипт библиотеки jQuery можно размещать как есть https://atuin.ru/blog/navigacionnoe-menyu-dlya-lendinga/
Данная библиотека на Wordpress сайте уже подключена, в коде должна быть примерно такая ссылка /wp-includes/js/jquery/jquery.min.js?ver=3.7.1. Поэтому добавляем только сам скрипт без подключения jQuery.
let sections = jQuery('section'),
nav = jQuery('nav'),
nav_height = nav.outerHeight();
jQuery(window).on('scroll', function () {
jQuery('nav a').removeClass('active');
let cur_pos = jQuery(this).scrollTop();
sections.each(function() {
let top = jQuery(this).offset().top - nav_height - 50,
bottom = top + jQuery(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
jQuery(this).addClass('active');
nav.find('a[href="#'+jQuery(this).attr('id')+'"]').addClass('active');
}
});
});
nav.find('a').on('click', function () {
let $el = jQuery(this),
id = $el.attr('href');
jQuery('html, body').animate({
scrollTop: jQuery(id).offset().top - nav_height
}, 600);
return false;
});
Можно менять nav_height и обратите внимание что меню должно находиться внутри тегов <nav> и id для блоков должны быть прописаны в тегах <section>, если у вас сделано как то по другому рекомендуется использовать эти теги в шаблоне лендинга. И конечно учитываем, что этот код прекрасен когда в меню нет ссылок на другие страницы, а точнее когда используются якорные ссылки без указания домена, поэтому используем вариант с двумя меню. Если на вашем сайте Wordpress нет никаких конструкторов и настройки темы не позволяют менять хедеры или меню для разных страниц, то потребуется подредактировать файл (файлы) темы, а именно прописать условие, что если страница Главная, выводим меню 1, а для остальных - меню2.
Скрипт для активных ссылок добавляет класс active, не забываем добавить примерно такое в файл css
#menu-primary-menu .active, .menu-item:hover, #menu-menu-2 .current-menu-item {
border-bottom: 2px solid #fff;
}
здесь у нас применяется подчеркивание белого цвета для активного пункта первого меню (якорей), при наведении на любой пункт, для активного пункта второго меню (Контакты), после решётки вы указываете id своих меню.