[CSS 응용] 숨김 메뉴 만들기

 

 

안녕하세요 PNcoding입니다 :)

 

오늘은 인풋태그를 활용해 간단한 숨김메뉴 형태를 만들어 보도록 하겠습니다.

 

인풋태그가 궁금하신 분은 아래 포스팅을 참고해 주세요 :)

https://pncoding.tistory.com/36

[HTML 기초] form(폼)태그와 input(인풋)태그, label태그

 

---

 

 

바디구조 작성

먼저 바디구조를 작성해 보도록 하겠습니다.

<div class="wrap">

    <input type="checkbox" id="click_btn" />
    <label for="click_btn">=</label>

    <div class="menu_box"></div>

</div>

 

인풋 태그 중 체크박스 기능을 활용하여 한번 체크하였을 때 메뉴박스가 보이도록, 한번 더 체크하였을 때(체크 해제 되었을 때) 메뉴박스가 사라지도록 만들어 줄 거예요.

 

실제 브라우저 출력 시 인풋의 형태는 보이지 않게 만들어 주고, 레이블태그를 활용하여 메뉴 버튼을 만들어 주도록 하겠습니다.

 

 

스타일시트 작성

*{ margin: 0; padding: 0;}

input {
    display: none;
}

.wrap {
    width: 400px;
    height: 500px;
    border: 10px solid gray;
    margin: 0 auto;
}

label {
    display: block;
    width: 50px;
    height: 50px;
    background-color: gold;
    text-align: center;
    line-height: 50px;
    font-size: 30px;
}

.menu_box {
    width: 100%;
    height: 350px;
    background-color: salmon;
}

 

앞에서 설명했듯이 인풋 와 레이블이 연동되어 있는지 확인하신 다음 인풋태그에 disply:none을 작성해 브라우저에서 보이지 않게 만들어 주었습니다.

 

label태그는 인라인요소이므로 버튼의 크기를 생성해 주기 위하여 display:block으로 지정하여 크기값을 지정해 주었습니다.

 

기본 스타일시트 작성 후 모습

 

 

---

 

반응형

 

움직임 작성

인풋태그가 실제로 체크가 되도록 작성을 해주시되, 여러 가지 방법으로 움직임을 구현해 줄 수 있습니다.

 

1. display: none/block

메뉴박스를 display: none/block으로 보였다가 보이지 않게 만들어 줄 수 있습니다.

대신 display:none을 지정한 상태에서 메뉴박스에게 transition을 적용시켜 줄 수 없습니다.

즉, 부드러운 움직임을 구현해 줄 수 없다고 보시면 되겠습니다.

.menu_box {
    display: none;
}

#click_btn:checked~.menu_box {
    display: block;
}

 

트랜지션이 궁금하신 분은 아래 포스팅을 참고해 주세요 :)

https://pncoding.tistory.com/29

[CSS animation] 트랜지션 (transition)

 

2. opacity

투명도를 지정해 주어 보였다가 보이지 않게 만들어 줄 수 있습니다.

transition을 적용하지 않았을 때는 display: none/block과 유사한 움직임을 보이지만,

이 경우 메뉴박스에게 transition을 적용시켜 부드럽게 나타나게 만들어 줄 수 있습니다.

.menu_box {
    opacity: 0;
}

#click_btn:checked~.menu_box {
    opacity: 1;
}

 

3. 크기값 제어

메뉴박스의 가로나, 세로의 크기값을 0에서 원래크기로 조절해 주는 움직임도 적용시켜 줄 수 있습니다.

이 또한 transition을 적용시켜 줄 수 있습니다.

.menu_box 
    height: 0;
}

#click_btn:checked~.menu_box {
    height: 350px;
}

 

4. 위치 제어

포지션을 적용시켜 메뉴박스의 위치를 wrap의 바깥으로 보내준 다음 메뉴박스가 다시 원래위치로 돌아오는 움직임을 적용시켜 줄 수 있습니다.

이것 또한 transition을 적용시켜 부드러운 움직임을 넣어줄 수 있습니다.

.menu_box {
    position: relative;
    left: -400px;
}

#click_btn:checked~.menu_box {
    left: 0;   
}

 

포지션이 궁금하신 분은 아래 포스팅을 참고해 주세요 :)

https://pncoding.tistory.com/28

[CSS 기초] 포지션 (position)

 

 

---

 

이런 식으로 간단하게 숨겨진 메뉴를 나타나게 만드는 방법에 대하여 알아보았습니다.

숨겨져 있다가 나타나는 움직임은 여러 가지 방법으로 구현해 줄 수 있으니, 여러 가지 방법을 활용하여 한번 만들어 보시면 되겠습니다 :)