1. Главная
  2. Блог
  3. Wordpress
  4. Меню для лендинга

Меню для лендинга

4 января 2024
198

Бывают же такие ситуации, когда клиенту нужен лендинг, а на самом деле получается сайт из нескольких страниц.

Главная страница - создается в виде лендинга, а дополнительно добавляются страницы конфиденциальности и политики обработки данных.

Вроде бы ничего страшного. Ссылки на дополнительные страницы в футер, а в верхнем меню якорные ссылки на блоки главной страницы.

Но, заказчик с фантазией, хочет чтобы было красиво. И появляются дополнительные условия: 

  • активные пункты верхнего меню должны подсвечиваться (выделяться подчеркиванием), 

  • в меню нужно добавить ссылку на еще одну дополнительную страницу - Контакты.

подсветка якоря в меню

Лендинг создается на 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 своих меню.

Комментарии
Name
Email
Phone
Ваше имя
Ваш email
Оставить комментарий
Нажмите для звонка
Хотите заказать сайт?
Обращайтесь любым удобным способом и мы поможем подобрать интересный вариант для Вас!