자바스크립트 javascript 8. 동적으로 움직이는 서브메뉴 만들기

 

메뉴위에 마우스 호버될시 모든 서브메뉴가 같이 나오는 메뉴를 자바스크립트로 구현했습니다.

 

html

<header class="hbox">
        <div class="top">1</div>
        <div class="bottom">
            <nav>
                <ul class="gnb">
                    <li><a href="">MENU1</a>
                        <ul class="sub">
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                        </ul>
                    </li>
                    <li><a href="">MENU2</a>
                        <ul class="sub">
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                        </ul></li>
                    <li><a href="">MENU3</a>
                        <ul class="sub">
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                        </ul></li>
                    <li><a href="">MENU4</a>
                        <ul class="sub">
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                            <li><a href="">서브메뉴</a></li>
                        </ul></li>
                </ul>
            </nav>
        </div>
    </header>

 

css

    <style>

        * {
            margin:0; padding:0;
            box-sizing: border-box;
        }
        body {
            background-color: #fc0;
        }

        .hbox {
            height: 200px;
            background-color: #fff;
            transition: all 0.4s ease-in-out;
        }
        .hbox.active {
            height: 500px;
            border-radius: 0 0 50px 50px;
            box-shadow: 0 5px 10px rgba(0,0,0,.4);
        }

        .top {
            height: 50px;
            border-bottom: 1px solid #f00;
        }
        .bottom {
            height: 150px;
            border-bottom: 1px solid transparent;
        }
        .hbox.active .bottom {
            border-bottom-color:#f00;
        }

        .bottom nav {
            width: 1000px;
            margin: 0 auto;
        }
        .gnb {
            display: flex;
        }
        .gnb > li {
            flex:none;
            width: 250px;
            list-style: none;
            background-color: aqua;
            position: relative;
        }
        .gnb > li > a {
            display: block;
            line-height: 149px;
            text-align: center;
            font-size: 50px;
        }

        .gnb .sub {
            position: absolute;
            left: 0; top: 100%;
            background-color: blueviolet;

        }


    </style>

js

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

        //서브 숨기기
        $('.gnb .sub').hide();


        $('.bottom').on('mouseenter',function() {
            $('.hbox').addClass('active');
            $('.gnb .sub').fadeIn(500);
            
        });

        $('.hbox').on('mouseleave',function() {
            $('.hbox').removeClass('active');
            $('.gnb .sub').hide();
        });



    </script>