GNB Menu 구현



See the Pen by yoonbitnara (@yoonbitnara) on CodePen.




상세코드

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GNB메뉴</title>
    <link rel="stylesheet" href="style/style.css">
</head>
<body>
    <div id="wrap">
        <h1>GNB메뉴</h1>

        <nav id="gnb">
            <ul id="mainMenu" class="flex-container">

                <li class="mainLi">
                    <a href="#">메인메뉴1</a>
                    <ul class="subMenu">
                        <li class="subLi"><a href="#">서브메뉴1-1</a></li>
                        <li class="subLi"><a href="#">서브메뉴1-2</a></li>
                        <li class="subLi"><a href="#">서브메뉴1-3</a></li>
                        <li class="subLi"><a href="#">서브메뉴1-4</a></li>
                    </ul>
                </li>
                <li class="mainLi">
                    <a href="#">메인메뉴2</a>
                    <ul class="subMenu">
                        <li class="subLi"><a href="#">서브메뉴2-1</a></li>
                        <li class="subLi"><a href="#">서브메뉴2-2</a></li>
                        <li class="subLi"><a href="#">서브메뉴2-3</a></li>
                        <li class="subLi"><a href="#">서브메뉴2-4</a></li>
                    </ul>
                </li>
                <li class="mainLi">
                    <a href="#">메인메뉴3</a>
                    <ul class="subMenu">
                        <li class="subLi"><a href="#">서브메뉴3-1</a></li>
                        <li class="subLi"><a href="#">서브메뉴3-2</a></li>
                        <li class="subLi"><a href="#">서브메뉴3-3</a></li>
                        <li class="subLi"><a href="#">서브메뉴3-4</a></li>
                    </ul>
                </li>
                <li class="mainLi">
                    <a href="#">메인메뉴4</a>
                    <ul class="subMenu">
                        <li class="subLi"><a href="#">서브메뉴4-1</a></li>
                        <li class="subLi"><a href="#">서브메뉴4-2</a></li>
                        <li class="subLi"><a href="#">서브메뉴4-3</a></li>
                        <li class="subLi"><a href="#">서브메뉴4-4</a></li>
                    </ul>
                </li>

            </ul>
        </nav>
    </div>

    <script src="lib/jquery-3.6.0.min.js"></script>
    <script src="script/script.js"></script>

</body>
</html>



CSS

@charset "UTF-8";
@import url(style_reset.css);

div#wrap {

    width: 700px;
    padding: 10px;
    border: 1px solid #000;
    margin: 20px auto;
}

#wrap h1 {

    margin: 30px 0;
}

/* GNB menu 시작 */
/* nav#gnb {

    border: 1px solid #000;
} */

#gnb ul#mainMenu {

    /* border: 1px solid #08f; */
    justify-content: center;
}

#gnb #mainMenu a {

    width: 150px;
    text-align: center;
    padding: 10px 0;
    border: 1px solid #aaa;
    display: inline-block;
}

#gnb #mainMenu li:hover>a {

    color: #fff;
    font-weight: bold;
    background-color: rgba(0, 136, 255, 0.527);
}

/* subMenu 시작 */

#gnb .subMenu {

    position: absolute;
    background-color: #fff;

    display: none;
}
/* subMenu 끝 */

/* GNB menu 끝 */



CSS Reset

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');


*{
    color: #222; /* 기본 글 색상 */
    text-decoration: none; /* 밑줄 제거 */
    font-family: "Nanum Gothic", sans-serif; /* 기본 글꼴 */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a:link{
    color: #333;
}
a:visited{
    color: #333;
}
a:hover{
    color: #444;
}
a:active{
    color: #444;
}

img{
    vertical-align: middle;
}
/* 이미지오소 옆에 사용되는 모든 인라인요소는 이미지의 세로기준 가운데 정렬 */

ul{
    list-style: none;
}
/* 리스트 불릿기호 미표시 */

.flex-container{
    display: flex;
}

/*
body{
    background-color: #fff;
}
배경색이 적용될 때 사용
*/

/* 기본 리셋 설정 */

#wrap{
    
}



jQuery

$(function() {

    $("#mainMenu li").mouseover(function() {
        $(".subMenu").stop().slideDown(500);
    });

    $("#mainMenu li").mouseout(function() {
        $(".subMenu").stop().slideUp(200);
    });

});

Leave a comment