본문 바로가기
프론트엔드 개발자/JS

자바스크립트 javascript 7. 서브메뉴만들기 1

by 신디블로그 2023. 4. 4.
SMALL
 <style>

        * {
            margin:0;
            padding:0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        .spacer {
            height: 50px;
        }

        body {
            padding: 50px;
        }

        .menu {
            width: 100px;
            height: 100px;
            background-color: #fc0;
            text-align: center;
            line-height: 100px;
            position: relative;
        }
        .menu .sub {
            position: absolute;
            left:100%; top:0;
            width: 150px; height: 100px;
            background-color: #0f0;
        }
       
        /* CSS로 메뉴1설정하기 */
        .menu1 .sub {
            display:none;
        }
        .menu1:hover .sub {
            display: block;
        }

        .menu3 .sub {
            left: 150px;
        }

        .menu4 {
            cursor: pointer;
        }

        .menu4 .sub{
            display: none;
        }

        .menu4 .sub.on{
            display: block;
        }

        .menu5 {
            cursor: pointer;
        }

        .menu5 .sub{
            opacity: 0;
            transition: all 0.5s ease-in-out;
            width: 0;
        }

        .menu5 .sub.on{
            opacity: 1;
            width: 150px;
        }

       

    </style>
</head>
<body>
    <div class="menu menu1">메뉴1
        <div class="sub">서브메뉴</div>
    </div>
    <div class="spacer"></div>
    <div class="menu menu2">메뉴2
        <div class="sub">서브메뉴</div>
    </div>
    <div class="spacer"></div>
    <div class="menu menu3">메뉴3
        <div class="sub">서브메뉴</div>
    </div>
    <div class="spacer"></div>
    <div class="menu menu4">메뉴4
        <div class="sub">서브메뉴</div>
    </div>
    <div class="spacer"></div>
    <div class="menu menu5">메뉴5
        <div class="sub">서브메뉴</div>
    </div>
    <div class="spacer"></div>



    <script>

        // menu2, menu3 , menu4 요소들 가져오기
        const menu2 = document.querySelector('.menu2');
        const menu3 = document.querySelector('.menu3');
        const menu4 = document.querySelector('.menu4');
        const menu5 = document.querySelector('.menu5');

        const menu2_sub = document.querySelector('.menu2 .sub');
        const menu3_sub = document.querySelector('.menu3 .sub');
        const menu4_sub = document.querySelector('.menu4 .sub');
        const menu5_sub = document.querySelector('.menu5 .sub');

        // menu2설정

        // menu2 서브 숨기기
        menu2_sub.style.display = 'none';

        // menu2에 마우스가 올라갈때 서브보이기
        menu2.addEventListener('mouseenter', function() {
            menu2_sub.style.display = 'block';
           
        });
        menu2.addEventListener('mouseleave', function() {
            menu2_sub.style.display = 'none';
           
        });

        menu3_sub.style.display = 'none';

        // 메뉴3 이벤트 생성
        menu3.addEventListener('mouseenter', function(){
            menu3_sub.style.display = "block"
        });

        // 마우스가 올라갈때 : mouseenter, mouseover
        // 마우스가 나갈때 : mouseleave, mouseout

        // 서브메뉴 --> mouseenter(올라갈때), mouseleave(마우스가 나갈때) 권장

        // 메뉴4 이벤트 생성

        // 메뉴4서브 숨기기

        // menu4_sub.style.display = 'none';

        // 메뉴4 클릭이벤트

        menu4.addEventListener('click', function(){
            console.log('클릭했습니다.');
            if (menu4_sub.classList.contains('on')) {
                //참일때
                console.log("있습니다");
                menu4_sub.classList.remove("on");

            } else {
                //거짓일때
                console.log("없습니다");
                menu4_sub.classList.add("on");

            }
        });

        // 메뉴5 클릭이벤트

        menu5.addEventListener('click', function(){
            console.log('클릭했습니다.');
            if (menu5_sub.classList.contains('on')) {
                //참일때
                console.log("있습니다");
                menu5_sub.classList.remove("on");

            } else {
                //거짓일때
                console.log("없습니다");
                menu5_sub.classList.add("on");

            }
        });


    </script>

LIST
저작자표시 비영리 변경금지

'프론트엔드 개발자 > JS' 카테고리의 다른 글

자바스크립트 javascript 7. 서브메뉴만들기 3 - css 의 hover 기능으로 메뉴 만들기  (0) 2023.04.04
자바스크립트 javascript 7. 서브메뉴만들기 2 (간단형)  (0) 2023.04.04
자바스크립트 javascript 6 .DOM요소 클래스 제어하기  (0) 2023.04.04
자바스크립트 javascript 5스크롤이벤트window --> scroll  (0) 2023.04.04
자바스크립트 javascript 4. forEach  (0) 2023.03.31

관련글

댓글

티스토리툴바