jQuery - 메뉴 hover 움직이는 밑줄 효과 만들기

웹 페이지의 내비게이션은 사용자 경험에서 매우 중요한 부분입니다. 특히, 내비게이션 메뉴에 마우스를 올렸을 때 동적인 효과를 주면 사용자의 시선을 끌고 상호작용을 유도할 수 있습니다. 이번 블로그 글에서는 jQuery와 CSS를 사용하여 메뉴에 마우스를 올렸을 때 밑줄이 움직이는 ‘hover 효과’를 만드는 방법에 대해 설명하겠습니다.

HTML 구조

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<nav>
    <div class="inner">
        <ul class='menu'>
            <li class='active'><a href='#'>메뉴 1</a></li>
            <li><a href='#'>메뉴 2</a></li>
            <li><a href='#'>메뉴 3</a></li>
            <li><a href='#'>메뉴 4</a></li>
            <li><a href='#'>메뉴 5</a></li>
        </ul>
        <span class='marker'></span>
    </div>
</nav>

<nav> 태그는 웹 페이지의 내비게이션 섹션을 정의하는데 사용됩니다. 고유한 식별자와 클래스 이름을 줄 수 있어 스타일링과 JavaScript 조작이 쉬워집니다.
내부 inner 클래스는 최대 너비를 설정하고 가운데 정렬하기 위한 컨테이너 역할을 합니다. 이는 max-width와 margin: 0 auto 스타일을 사용하여 구현됩니다.
여러 <li> 태그로 이루어진 menu 클래스는 실제 메뉴 아이템을 나열하는 데 사용되며, 각 항목은 <a> 태그로 링크를 제공합니다.
marker 클래스는 마우스 호버시에 나타날 움직이는 밑줄을 위한 요소입니다. CSS와 jQuery를 통해서 동적으로 위치를 조정하게 됩니다.

CSS 스타일

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
nav {
    display: block;
    position: relative;
    width: 100%;
    background-color: #001F3F;
}

nav .inner {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

nav .marker {
    position: absolute;
    bottom: 0;
    width: 90px;
    height: 3px;
    background-color: #FFD700;
    z-index: 1;
    opacity: 0;
    transform: translateX(-50%) translateX(var(--marker-translate, 0px));
    transition: all 0.3s ease;
}

nav .inner:hover .marker {
    opacity: 1;
}

.menu {
    display: flex;
    justify-content: center;
    text-align: center;
    list-style: none;
}

.menu li {
    flex: 1;
}

.menu li a {
    display: block;
    padding: 15px 0 18px;
    font-size: 16px;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.menu li:hover a {
    color: #FFD700;
}

nav 태그에는 position: relative를 적용하여 .marker의 절대 위치를 조정할 기준을 제공합니다.
inner 클래스에는 max-width와 margin을 적용하여 내부 요소를 중앙에 배치합니다.
marker 클래스는 호버 효과의 핵심 요소로, 절대 위치를 사용하여 메뉴 하단에 배치되며, transform 속성을 이용하여 동적으로 위치가 변하도록 합니다.
menu 클래스의 <li> 요소들은 flex: 1 속성을 통해 동일한 너비를 가지도록 조정됩니다.
메뉴 아이템에 대한 스타일은 hover 상태일 때와 일반 상태에서 다르게 설정하여 시각적인 피드백을 제공합니다.

jQuery 코드

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
$('.menu li').on('mouseenter', function () {
    // 각 메뉴 li의 left 위치와 너비를 가져옵니다.
    const $menuItem = $(this);
    const itemLeft = $menuItem.position().left;
    const itemWidth = $menuItem.outerWidth();
     
    // 마커의 위치값을 계산합니다.
    const centerValue = itemLeft + itemWidth / 2;
     
    // 마커를 움직여 메뉴 li의 가운데로 위치시킵니다.
    $('.marker').css('--marker-translate', centerValue + 'px');
});

jQuery의 .on() 메소드를 사용하여 각 메뉴 항목(<li>)에 마우스가 진입하는(mouseenter) 이벤트에 반응할 수 있도록 이벤트 핸들러를 설정합니다.
이벤트 핸들러 내에서는 현재 마우스가 올라가 있는 메뉴 항목의 위치(.position().left)와 너비(.outerWidth())를 측정합니다.
계산된 위치 값(centerValue)을 CSS 변수(--marker-translate)에 할당하여 .marker의 위치를 해당 메뉴 항목의 중앙으로 이동시킵니다.
CSS의 transform 속성을 이용하여 .marker를 부드럽게 이동시키는 애니메이션 효과를 적용합니다.

결론

jQuery와 CSS를 이용하여 메뉴 밑줄 이동 효과를 만드는 방법을 배웠습니다. 사용자가 메뉴 항목에 마우스를 올릴 때 동적으로 움직이는 밑줄은 효과적인 시각적 피드백을 제공하며, 사용자가 내비게이션을 이용하도록 유도합니다. 이러한 기능은 웹사이트의 전반적인 사용자 경험을 향상시킬 뿐만 아니라, 디자인에 현대적이고 역동적인 느낌을 더해줍니다.

예제결과 미리보기