아코디언 메뉴
아코디언 스타일 메뉴를 만들 때 방법은 여러가지가 있다.
여기서는 HTML과 CSS만으로 아코디언 메뉴를 만드는 방법을 알아보자.
예시
HTML
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Accordion Style</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="accordion"> <input type="checkbox" name="accordion" id="answer01"> <label for="answer01">짱구는 못말려<small class="arrow">🔻</small></label> <div> <ul> <li class="accountno">신짱구</li> <li class="accountno">신영식</li> <li class="accountno">봉미선</li> <li class="accountno">신짱아</li> </ul> </div> <input type="checkbox" name="accordion" id="answer02"> <label for="answer02">네모바지 스폰지밥<small class="arrow">🔻</small></label> <div> <ul> <li class="accountno">스폰지밥</li> <li class="accountno">뚱이</li> <li class="accountno">징징이</li> <li class="accountno">다람이</li> </ul> </div> </div> </body> </html>
CSS
@charset "utf-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
input:checked + label {
color: #555;
border: 1px solid #ddd;
border-top: 2px solid #2e9cdf;
border-bottom: 1px solid #ffffff;
}
.accordion {
min-width: 230px;
margin: 0 auto;
padding: 20px;
}
.accordion ul {
padding: 0;
}
.accordion ul li {
list-style: none;
border-bottom: 1px solid gray;
padding: 20px 5px;
}
input[id*="answer"] {
display: none;
}
input[id*="answer"]+label {
display: block;
padding: 20px;
margin: 10px 0;
border: 1px solid gray;
color: black;
font-weight: 900;
cursor: pointer;
line-height: 1rem;
}
input[id*="answer"]+label+div {
max-height: 0;
transition: 0.8s;
overflow: hidden;
}
input[id*="answer"]:checked+label+div {
max-height: 30rem;
}
input[id*="answer"]+label .arrow {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
input[id*="answer"]:checked+label .arrow {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
small {
line-height: 1rem;
font-size: 0.85rem;
}
small.arrow {
float: right;
}
기본 예시
사용된 태그 설명
type=”checkbox”
:
checkbox 이용해서 label이 눌린지 안눌린지 확인한다.
small
:
다른 글자보다 조금 작게 한다.
input[id*=”answer”]
:
id=”answer01″, id=”answer02″ 등을 지정한다.
input[id*=”answer”]+label+div
:
체크가 되어있지 않을 때를 의미한다.
input[id*=”answer”]:checked+label+div
:
체크가 되어있을 때를 의미한다.
transform: rotate(0deg);
:
회전하지 않은 텍스트 / 이미지
transform: rotate(-180deg);
:
180도 회전하는 텍스트 / 이미지
공부 목적 블로그