@martuwka

Как сделать статичным эффект при наведении на пункт в меню?

Здравствуйте! Есть пункты меню и эффект при наведении на каждый пункт этого меню - https://jsfiddle.net/f3weqd8o/. Эффект реализован на чистом CSS с использованием псевдокласса after. Как можно, используя jQuery или JS сделать этот эффект статичным на текущем пункте меню. Т.е. если посетитель нажал на "Новости", то нужно, чтобы этот эффект оставался, а не пропадал.

Есть код jQuery, который добавляет текущему пункту меню класс active:
$(function () {
    $('.menu a').each(function () {
        var location = window.location.href;
        var link = this.href;
        if(location == link) {
            $(this).addClass('active');
        }
        
        $(this).click(function() {
            $('.menu .active').removeClass('active');
            $(this).addClass('active');            
        });
    });
});


Игрался с этим active-ом около двух часов, искал еще час решение в Интернете, но так и не нашел. Пробовал добавлять к классу active - border-bottom, но линия добавлялась ниже той, которая при выводится при наведении и вообще не то.

Как можно решить этот вопрос?
  • Вопрос задан
  • 178 просмотров
Решения вопроса 3
monochromer
@monochromer
DIVeloper
В примере нет стилей для класса active
.anim-middleout:hover:after,
.anim-middleout.active:after {
		width: 100%;
}
Ответ написан
rockon404
@rockon404
Frontend Developer
Ответ написан
Комментировать
Stalker_RED
@Stalker_RED
https://jsfiddle.net/7qxaepxz/
$('.menu').on('click', 'a', function() {
  $(this).closest('.menu').find('a').removeClass('active')
  $(this).addClass('active')
});


И у вас в css класс active вообще отсутствовал.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы