본문 바로가기
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' 카테고리의 다른 글

폴리곤. 컬러 로테이션 hue-rotate  (0) 2025.02.24
createElement, mousemove  (0) 2025.02.23
Lottie json 파일 단순 마우스 오버 효과  (0) 2024.10.17
replace(), 유튜브 클릭시 오토플레이  (0) 2024.07.17
숫자 카운터  (0) 2024.07.17
hasClass를 이용한 이미지 체인지  (0) 2024.07.17
throttle(), clone()  (0) 2024.07.17
lottieFiles  (0) 2024.07.15