Как реализовать такой эффект подчёркивания?

Question

[Владислав]

Добрый день.
www.technocom-ug.ru
Как реализовать такой эффект подчёркивания в меню? Чтобы полоска следовала за мышкой, меняя ширину. Судя по изменениям в инспекторе, это скрипт, не CSS

Answer 1

[Владимир Проскурин]

1) Создаете элемент для полоски, делаете ему абсолютное позиционирование, и transition на left и width
2) Вешаете на каждый пункт меню событие mouseenter
3) По выполнению события mouseenter, берете у текущего элемента позицию относительно родителя, и ширину
4) Назначаете полоске полученную позицию и ширину
5) Вешаете mouseleave на блок с меню
6) По выполнению mouseenter делаете переход полоски к активному пункту меню (или первому).
UPD: вот так на jQuery будет https://jsfiddle.net/Vlad_IT/8zj2x17L/

Comments

[Владислав]

flex в CSS играет важную роль?

[Владимир Проскурин]

Владислав, не важно, просто это один из способов сделать меню, у вас может быть другой способ, но для скрипта с примера это неважно.

Answer 2

[Andrew]

Код инспектор творит чудеса

function magicLine() {

    var $magicLine = $("#menu-line");
    if ($('.nav-first li.active').length > 0) {
        $magicLine
                .width($(".nav-first li.active>a").width())
                .css("left", $(".nav-first .active>a").parent().position().left + getLeftmarPad(false))
                .data("origLeft", $magicLine.position().left)
                .data("origWidth", $magicLine.width());
    }
}

отсюда

Клац