css로 슬라이드바 만들기

 

input:checked / 인접 선택자 + / 형제 선택자 ~  를 사용해서 위와 같은 slidebar를 만들 수 있다.

 

1.

:checked는 가상 선택자로, input 태그와 함께 쓰이며, :checked를 통해 input을 눌렀을 때의 동작을 처리함.

이를 이용해 input이 checked 됐을 땐 slidebar를 노출시키고, checked 해제됐을땐 slidebar를 숨기는 방식으로 slidebar를 만들 수 있음.

1. input태그는 display:none으로 숨길거지만, label을 연결하여 label을 클릭시 input이 checked 되도록 함.

2. label 안에 span 세 개를 넣어 예시이미지와 같은 햄버거 아이콘을 만듦. 클릭시 span 하나는 숨기고 두개의 span을 회전시켜 x아이콘을 만든다.

이 때 선택된 input 태그의 label만 선택하기 위해 인접선택자를 사용.

3. input 클릭시 형제요소인 slidebar를 제어하기 위해 형제선택자 사용.

 

인접 선택자 +

ul + p { color: red }

다음과 같이 작성 시, ul의 바로 아래에 있는 p의 컬러를 red로 변경함.

 

형제 선택자 ~

ul ~ p { color: blue }

다음과 같이 작성 시, ul의 형제요소인 p의 컬러를 모두 blue로 변경함.

 

 

전체코드

html

<input type="checkbox" id="trigger" />
<label for="trigger">
    <span></span>
    <span></span>
    <span></span>
</label>
<div class="sidebar"></div>

css

input[id=trigger] { /* 속성선택자라고, input의 속성을 이렇게 써서 선택한다는건데, id가 있는 상황에선 굳이 이거 안쓰고 id 써도 될듯. 하지만 밑에서처럼 label을 선택하는 경우엔 유용한듯하다. */
      display: none;
    }
    label[for=trigger] {
      cursor: pointer;
      width: 30px;
      height: 20px;
      display: inline-block; /* label 기본 속성은 inline임 */
      position: absolute;
      top: 10px;
      left: 10px;
      transition: 0.3s;
    }
    label[for=trigger] span {
      display: inline-block;
      height: 2px;
      width: inherit;
      background-color: #000;
      position: absolute;
      left: 0;
      transition: 0.3s;
      z-index: 1;
    }
    label[for=trigger] span:nth-child(1) {
      top: 0;
    }
    label[for=trigger] span:nth-child(2) {
      top: 50%;
    }
    label[for=trigger] span:nth-child(3) {
      top: 100%;
    }
    input[id=trigger]:checked + label span:nth-child(1) { /* input을 안보이게 해놨지만 label과 연결해놓았기 때문에, label 클릭해도 input이 checked됨 */
      top:50%; /* 50% 내려야 세번째 애랑 중심축이 맞음 */
      transform: rotate(45deg);
    }
    input[id=trigger]:checked + label span:nth-child(2) {
      opacity: 0;
    }
    input[id=trigger]:checked + label span:nth-child(3) {
      top:50%; 
      transform: rotate(-45deg);
    }
    .sidebar {
      width: 250px;
      height: 100vh;
      background-color: pink;
      position:fixed;
      top: 0;
      left: -250px;
      transition: 0.3s;
    }
    input[id=trigger]:checked ~ .sidebar { /* input의 형제요소 중 .sidebar */
      left: 0;
    }
    input[id=trigger]:checked + label {
      left: 260px;
      top: 10px;
    }