Hiio.com

안녕하세요. 

이번 포스팅에서는 저번에 만들었던 사이드바 메뉴를 css와 checkbox를 이용해서 slide시켜 나타났다 사라지게 하는 것을 만들어 보겠습니다.

1. input & label

먼저 html에 input과 label 태그를 작성해 줍니다.

<input type="checkbox" id="sidebtn">

        <label for="sidebtn" class="sidebtn"> button

        </label>

input에서 type은 checkbox로 설정해 주시고, label 태그 안에 for에는 input의 id속성값을 넣어서 연결 시켜 줍니다.

그러면 아래와 같이 만들어 집니다.

여기서 input과 label을 연결시켜주면 checkbox를 클릭하지 않아도, label을 클릭하면 똑같은 효과가 나타납니다.

그래서 저에게 필요한 것은 label 만 있으면 되므로 input태그는 css에서 display:none;으로 없애줍니다.

#sidebtn{
	display:none;
}

이제 label에 width값과 height값을 주고 그안에 span을 넣어서 Burger button을 만들어 줍니다.

-HTML

<label for="sidebtn" class="sidebtn"> button
            <span></span>
            <span></span>
            <span></span>
        </label>

-CSS

.sidebtn {
    width: 50px;
    height: 50px;
}



.sidebtn span {
    display: block;
    width: 100%;
    height: 5px;
    background-color: black;
    border-radius: 10px;
    position: absolute;
    transition: all 0.25s;
}

.sidebtn span:nth-child(1) {
    top: 10%;
}

.sidebtn span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.sidebtn span:nth-child(3) {
    bottom: 10%;
}

label 안에 span 태그를 이용합니다. 3개 정도 만들어줍니다.

css에서는 nth-child를 통해서 각 span의 위치를 잡아줍니다.

이제 checkbox가 checked됐을때 효과를 이용하여 sidebar가 슬라이드 되어 나올수 있도록 해줍니다.

css에서 checkbox가 checked됐다는 코드는

input뒤에 :checked를 써서 알려줍니다.

이제 이 코드를 이용하여 체크시 사이드바가 출현하게끔 하기위해서 css선택자들 중 +를 통해서 각 태그들을 선택하여 

left값을 조절하여 나타나고 사라지게 한다음,

transition을 통해서 시간차를 주어 천천히 사라지고 나타나게끔합니다.

See the Pen pooBRZY by hongsam (@hongsamhc) on CodePen.

완성된 코드 입니다.

이것을 저번에 만들었던 페이지에 적용 시켜 줍니다.

기본적으로 저는 사이드바가 왼쪽에서 슬라이드 되어 나오는 것으로 했습니다.

기본 페이지에서는 사라져있다가 버튼을 클릭하면 아래 그림처럼 나오게 됩니다.

완성된 화면입니다.

transition 값을 조절하여 버튼와 사이드바 이동시간을 조절하여 마은에 드는 슬라이드형 사이드바를 만들면 좋을것 같습니다.

다음에는 메인이미지를 적용 시켜 보겠습니다.