본문 바로가기
Js

menu bar mouse move

by 영감은어디에 2025. 2. 25.

// 메뉴 색상바
var $marker = $('<div class="marker"></div>').appendTo('.menu'); 
var $navitem = $('.menu > .menu-item'); 
var $current = $('.menu-item.current-menu-item');
if ($current.parents('.sub-menu').length) { // 2차 메뉴 
    $current = $current.closest('.menu-item-has-children');
}

function indicator($el) {
    $marker.css({
        left: $el.position().left + 20 + "px", 
        width: $el.outerWidth() - 40 + "px",
        opacity: 1
    });
}
if ($current.length) {
    indicator($current);
}
$navitem.mouseenter(function() {
    indicator($(this));
});
$(".menu").mouseleave(function() {
    if ($current.length) {
        indicator($current);
    } else {
        $marker.css({ opacity: 0, width: "0px" });
    }
});

'Js' 카테고리의 다른 글

rotate, mouse move, delay  (0) 2025.03.07
circle, strokeDashoffset, scrollTop, 그래프  (0) 2025.03.06
gsap, mouse move  (0) 2025.03.05
원페이지 스크롤  (0) 2025.03.03
폴리곤. 컬러 로테이션 hue-rotate  (0) 2025.02.24
createElement, mouse move  (0) 2025.02.23
Lottie json 파일 단순 마우스 오버 효과  (0) 2024.10.17
replace(), 유튜브 클릭시 오토플레이  (0) 2024.07.17