[깃허브 예제] toggle버튼 만들기/ toggle버튼에 클래스를 추가함으로써 누르면 사라지고나타나게 하는 js만들기

2021.04.22 - [무작정 따라하기/패스트캠프(프론트)] - [깃허브 예제] 미디어 쿼리 / @media / 미디어 타입/ 미디어 특성/ max-width정의/ float 해제/ toggle버튼 생성

[깃허브 예제] 미디어 쿼리 / @media / 미디어 타입/ 미디어 특성/ max-width정의/ float 해제/ toggle버튼

지금 display: none;을 없애면 이런 형태로 보인다.

하지만 이렇게 세로로 정렬 되어있어야한다.

---

header .menu-group{
        /* 세로로 정렬 */
        display: block;
    }
    header .logo{
        padding: 12px 0;
    }
    header .main-menu{
        /* 세로로 정렬 */
        display: block;
        margin-bottom: 10px;
    }
    header .main-menu li{
        border-top: 1px solid #e5e5e5;
    }
    header .main-menu li a{
        padding: 16px 0;
    }
   
    header .toggle{
        /* 원래있던 header menu를 없앤다 */
        /* display: none; */
    }

---

btn부분에 display:inline-flex를 flex로 바꾼다.

sign부분들도 수직으로 정렬해주고 width값을 조정해주어야한다.

display: flex로 되어있던 부분을 block으로 다 바꿔준다.

/* MEDIA */
@media (max-width: 1024px){
    header.section .inner{
        /* 원래 max-width가 980px이다
        초기화 할때도 max-width로 해야함
        그런데 여기서 초기화되지 않음
        우선순위가 덮어쓰기에는 약하다(header .inner)
        header.section .inner로 써서 우선순위를 높여준다 */
        max-width: none;
        height: auto;
        padding: 0 20px;

    }
    header .menu-group, 
    header .sign-group{
        /* 원래 있었던 float 해제 */
        float: none;
    }
    header .menu-group{
        /* 세로로 정렬 */
        display: block;
    }
    header .logo{
        padding: 12px 0;
    }
    header .main-menu{
        /* 세로로 정렬 */
        display: block;
        margin-bottom: 10px;
    }
    header .main-menu li{
        border-top: 1px solid #e5e5e5;
    }
    header .main-menu li a{
        padding: 16px 0;
    }
   header .sign-group{
       /* 수직으로 정렬을 바꿈 */
       /* 원래 display가 flex이고 order이 있었는데 
       order은 flex일때만 적용이 되어서 지금은 적용 안되고
       html구조대로 쌓인다. */
       display: block;
       padding: 10px 0 20px;
   }
   header .btn-group{
       display: block;
   }
   header .btn-group .btn{
       justify-content: center;
   }
   header .btn-group .sign-in{
       margin-right:0;
       margin-bottom: 12px;
   }
   #search-form{
       margin-top: 12px;
       margin-right: 0;
   }
   #search{
       width: 100%;
       height: 42px;
       text-align: center;
   }
    header .toggle{
        /* 원래있던 header menu를 없앤다 */
        /* display: none; */
    }
    #toggle-btn{
        background: url("../img/toggle-btn.svg");
        width: 18px;
        height: 24px;
        position: absolute;
        top: 16px;
        right: 20px;
        cursor: pointer;
        text-indent: -9999px;
    }
}

 

 

---

header .sub-menu{
       margin-top: 12px;
       margin-right: 0;
       justify-content: center;
   }

마지막 요소들 까지 가운데 정렬을 해준다.

---

그리고 toggle버튼을 display : none으로 만들어준다.

요런 화면에서 toggle버튼을 누르면 메뉴가 나오고 사라지고 해야한다.

 

toggle에 on이라는 클래스가 있으면 display: block;을 넣어서 나오게 해주어야겠지.

 

main.js를 만든다

즉시 실행 함수를 만든다

왜냐하면 전체 영역을 더럽히게 하지 않기 위해 모듈화하는 것이다.

(function(window, document){
    'use strict';
})(window, document)

(function(window, document){
    'use strict';
    
    const $toggles = document.querySelectorAll('.toggle');
    const $toggleBtn = document.getElementById('toggle-btn');

    // 사용자가 클릭하는 이벤트가 발생하면
    $toggleBtn.addEventListener('click', function(){
        toggleElements();
    });

    function toggleElements(){
        // forEach를 써서 반복 시키겠다.
        // toggles를 반복시킬것이다.
        // toggle이라는 클래스를 가지고 있는 요소에 on이라는 것을 실행할 것이다.
        [].forEach.call($toggles, function(toggle){
            toggle.classList.toggle('on');
        });
    }
})(window, document)

 <!-- js -->
    <script defer src="./main.js"></script>

헤드 부분에 js를 연결해준다.

 

그러면 잘 실행이 된다.