초보자를 위한 메뉴 열고 닫기 만들기(Toggle 창 만들기)

 

웹사이트나 앱을 보면 메뉴창을 열고닫는 기능이 있다.

이 기능을 신입입장에서 기능을 쉽게 구현해 보겠다.

1.구현화면

위에 이미지는 내가 현재 구현한 메뉴 열고닫기 기능 또는 toggle창 기능인데 

원리를 설명하자면 특정 버튼을 누르면 감춰져있던 div가 보이고 

다시 특정버튼을 누르면 다시 div가 감춰지도록 하는데 

이때 쓰이는 요소가 css의 요소중 display 를 이용하여 기능을 구현 할수 있다!

자세한 설명을 아래 코드를 보고 설명 하도록 한다.

2.코드설명

(1)html 코드

<div class="top">
    <h3>ASP 모바일 상담 서비스</h3>
    <button onclick="openSetting()"><img src="./img/setting.png"></button>
    <div id="setting">
        <h3>*화면구성 설정</h3>
        <label><input type="radio">고객화면크게</label>
        <label><input type="radio">상담사화면크게</label>
        <label><input type="radio">고객만</label>
        <label><input type="radio">직원만</label>
        <h3>*카메라 설정</h3>
        <label><input type="radio">전면카메라</label>
        <label><input type="radio">후면카메라</label>
        <h3>*음성 설정</h3>
        <label><input type="radio">음성포함</label>
        <label><input type="radio">음성제거</label>
    </div>
</div>

위에 코드는 이미지상의 상단부분만 발췌 하였는데 

특정아이콘은 버튼요소로 안에 img를 넣어줘야 하고, 세팅화면은 따로 div를 설정 하여 넣어 줘야한다.

그리고 버튼 요소에 보면 자바스크립트 함수를 설정 하였는데, 그거는 자바스크립트 부분에서 설명하도록 하겠다.

 

(2)css코드

.top>button{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent; /* 뒷 배경을 부모와 같게 맞춰줌 */
    border:none;
    margin-top: 1rem;
    float: right;
}
.top>button>img{
    width: 3.5rem;
    height: 3.5rem;
}
#setting{
    width: 80%;
    height: 30rem;
    position: absolute;
    display: none;
    margin-left: 17%;
    border: solid 0.1rem;
    border-radius: 1rem;
    background-color: white;
    font-size: 1.3rem;
    z-index: 1;
}

css코드 설정은 많지만 제일 중요한건 #setting 중에  

display: none;

position: absolute;

요소를 해놓는게 제일 중요

왜? 버튼을 누를때 세팅창을 보이게 하기위해서는 초기세팅을 안보이게끔 none 해놓고

또한 absolute로 설정 하므로써 설정창이 독립적으로 존재할수 있게끔 position을 지정해 줘야한다.

그리고 나머지 요소는 디자인에 맞춰 넣든지빼던지는 개발자맘

 

(3)javascript 코드

function openSetting(){
    if(document.getElementById('setting').style.display==='block'){
        document.getElementById('setting').style.display='none';
    }else{
        document.getElementById('setting').style.display='block';
    }
}

html코드를 보면 특정버튼에

onclick="openSetting()"

이렇게 설정한 부분이 있다. 이부분은 특정 버튼을 눌렀을때 자바스크립트의  openSetting() 함수를 실행하라는 의미로 

id로 지정한 setting의 css부분의 display요소부분이 block으로 되어 있다면 none으로 바꿔주고, 

반대라면 block으로 바꿔준다.

자바스크립트를 이용하여 위와 같이 요소를 바꿔주면서 설정창을 열고 닫기를 구현 할수 있다.