<div>
태그와 <span>
태그 등을 이용해 stylesheet로 아이콘처럼 만든 다음
<input>
태그에 checkbox 속성을 적용시키고, <label>
태그와 연결한 후 가상선택자 :checked
를 이용해 아이콘을 클릭할 수 있게 만든다.
알맞은 선택자들을 사용해서 필요한 태그에만 style을 적용시키고, transform/transition 속성으로 부드러운 애니매이션을 넣는다.
클릭시 아이콘이 X자로 변하면서 메뉴창과 함께 부드럽게 오른쪽으로 이동한다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input 태그의 :checked와 확장선택자</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- <ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
<p>문단입니다.</p>
<p>문단입니다.</p>
<div>
<p>div안에 자식 p입니다.</p>
</div>
<p>문단입니다.</p> -->
<div class="container">
<input type="checkbox" id="trigger">
<label for="trigger">
<span></span>
<span></span>
<span></span>
</label>
<div class="sidebar">
<p>1번 태그입니다</p>
<p>2번 태그입니다</p>
<p>3번 태그입니다</p>
<p>4번 태그입니다</p>
</div>
</div>
</body>
</html>
CSS
/* Google Web Fonts CDN */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');
/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body{
font-family: 'Montserrat', sans-serif;
}
/* 선택자의 활용 */
/* ul + p{
color: red;
} */
/* 선택자를 input과 함께 활용 */
input[id=trigger]{
display: none;
}
label[for=trigger]{
/* border: 1px solid red; */
width: 30px;
height: 20px;
display: block;
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
transition: 0.3s;
}
label[for=trigger] span{
display: block;
height: 2px;
background-color: black;
width: 100%;
position: absolute;
left: 0;
transition: 0.3s;
z-index: 100;
}
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){
top: 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{
left: 0;
}
input[id=trigger]:checked + label{
left: 250px;
}