Задача
Как выяснилось в последствии стили которые вы зададите в пункте Active не будут работать если у вас одностраничный сайт и вы используете якорное меню для перемещения по странице. Эти стили будут работать только если у вас многостраничный сайт. Столкнувшись с этим я обратился к разработчикам плагина меню который я использовал, они обещали исправить.
Обещанного три года ждут, а проект сдавать надо, поэтому я начал искать решение самостоятельно. Я нашел несколько решений в интернете, но в итоге подошло мне только одно. В общем нашел только часть решения, а именно код, который работал именно в моем случае с конструктором страниц Елементор.
Решение
И так перейдем к решению нашей задачи. А именно изменим стили активного пункта меню на одностраничном сайте сделанном в Елементоре. Нам потребуется следующий код:
jQuery(document).ready(function(jQuery) {
var topMenu = jQuery(«.jet-nav»),
offset = 35,
topMenuHeight = topMenu.outerHeight()+offset,
// All list items
menuItems = topMenu.find(‘a[href*=»#»]’),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var href = jQuery(this).attr(«href»),
id = href.substring(href.indexOf(‘#’)),
item = jQuery(id);
//console.log(item)
if (item.length) { return item; }
});
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = jQuery(this).attr(«href»),
id = href.substring(href.indexOf(‘#’));
offsetTop = href === «#» ? 0 : jQuery(id).offset().top-topMenuHeight+1;
jQuery(‘html, body’).stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
jQuery(window).scroll(function(){
// Get container scroll position
var fromTop = jQuery(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if (jQuery(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : «»;
menuItems.parent().removeClass(«active2»);
if(id){
menuItems.parent().end().filter(«[href*=’#»+id+»‘]»).parent().addClass(«active2»);
}
})
})
Этот скрипт нам нужно будет подключить к странице. Я подключал с при помощи плагина
Simple Custom CSS and JS. Можно и напрямую в шаблон страницы подключить, но для меня этот способ удобнее. Просто скачиваете из админки вордпресса этот плагин, устанавливаете его и добавляете в нем Custom JS код который я написал выше. Теперь некоторые нюансы. Во второй строчке кода
var topMenu = jQuery(«.jet-nav«) вам нужно будет вставить свой класс для меню. Я использовал .jet-nav так, как мое меню было создано с помощью плагина Jet Blocks от Crocoblock в вашем случае класс будет другой. Посмотреть его можно через консоль разработчика в браузере.
И в конце кода в строчках:
menuItems.parent().removeClass(«active2«);
if(id){
menuItems.parent().end().filter(«[href*=’#»+id+»‘]»).parent().addClass(«active2«);
вам нужно будет обратить внимание active2 — это имя класса которое будет присваиваться активному элементу меню. Вы можете назвать его по своему. Теперь все, что нам остается это прописать css стили для нашего класса (в моем случае это active2). Сделать этом можно через раздел дополнительные стили в настройках темы, либо с помощью того же плагина через который мы добавляли JavaScript код. В этим стилях мы задаем как будет выглядеть активный элемент меню на странице при переходе на него. В моем случае css код выглядел так:
.active2 > a > span{
color: #ff6b00;
font-weight: bold;
}
я менял цвет активной ссылки меню и толщину шрифта.
На этом в общем все. Задача решена. Если будут вопросы пишите, что знаю подскажу.