1강 - 밑줄 애니메이션 2가지

밑줄 애니메이션 코드 보러가기

• 마우스 호버시 따라오는 밑줄 효과의 html, css, js 코드이다. 응용하여 다양한 메뉴바에 적용시킬 수 있다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<header class="top_bar con-min-width">
    <div class="con height-100p flex">
        <nav class="top_bar--menu_1">
            <div class="top_bar--menu_1-item_line"></div>
            <ul class="flex height-100p">
                <li><a href="#" class="flex flex-ai-c height-100p"><span>HOME</span></a></li>
                <li><a href="#" class="flex flex-ai-c height-100p"><span>BRAND</span></a></li>
                <li><a href="#" class="flex flex-ai-c height-100p"><span>ARTICLES</span></a></li>
                <li><a href="#" class="flex flex-ai-c height-100p"><span>WRITE</span></a></li>
                <li><a href="#" class="flex flex-ai-c height-100p"><span>FAQ</span></a></li>
            </ul>
        </nav>
    </div>
</header>

/* 노말라이즈 */
body, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

/* 라이브러리 */
.height-100p {
    height: 100%;
}

.flex {
    display: flex;
}

.flex-ai-c {
    align-items: center;
}

.flex-jt-c {
    justify-content: center;
}

.con {
    margin-left: auto;
    margin-right: auto;
}

/* 커스텀 */
.con-min-width {
    min-width: 1080px;
}

.con {
    width: 1080px;
}

.top_bar {
    background-color: black;
    color: white;
    height: 100px;
}

.top_bar--menu_1 {
    position: relative;
}

.top_bar--menu_1 > ul > li > a {
    padding: 0 20px;
}

.top_bar--menu_1 > ul > li:hover > a {
    background-color: white;
    color: black;
}

.top_bar--menu_1-item_line {
    height: 3px;
    width: 80px;
    background-color: #afafaf;
    position: absolute;
    left: -500px;
    bottom: 0;
    transition: left .3s, width .3s;
}

function TopBar__init() {
    var $menu1ItemLine = $('.top_bar--menu_1-item_line');
    
    $('.top_bar--menu_1 > ul > li').mouseenter(function() {
        var $li = $(this);
        
        var left = $li.position().left;
        var width = $li.outerWidth();
        
        // console.log("left : " + left + ", width : " + width);
        
        $menu1ItemLine.css({
            left: left,
            width: width
        });
        
    });
    
    $('.top_bar--menu_1 > ul > li').eq(0).mouseenter();
}

TopBar__init();