반응형
작업을 하다 보면 메인메뉴 또는 사이드 메뉴를 꾸며야하는 경우가 있다.
물론 기존에 만들어진 Plugin이나 module들을 받아서 적용시키면 간편하게 구현할 수 있겠지만
이 포스트에서는 간단히 Treeview를 만드는 코드를 보여주려고 한다.
구현할 때 고려해야할 점은 두가지다.
1. 클릭이벤트 캐치
2. toggle() 메소드 사용
아래 코드를 참고하기를 바란다.
1. HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="treeview.css">
</head>
<body>
<h2>Tree View</h2>
<p>Simple TreeView</p>
<p>Click on the arrow(s) to open or close the tree branches.</p>
<ul id="side-navigation">
<li><span class="group">Continent</span>
<ul class="nested">
<li>Europe</li>
<li>Africa</li>
<li><span class="group">Asia</span>
<ul class="nested">
<li>Western Asia</li>
<li>Southeast Asia</li>
<li><span class="group">Eastern Tea</span>
<ul class="nested">
<li>South Korea</li>
<li>Japan</li>
<li>China</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="./treeview.js"></script>
</body>
</html>
2. JS
var toggler = document.getElementsByClassName("group");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function () {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("group-down");
});
}
3. CSS
ul, #side-navigation {
list-style-type: none;
}
#side-navigation {
margin: 0;
padding: 0;
}
.group {
cursor: pointer;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
.group::after {
content: "\25B6";
color: black;
display: inline-block;
margin-left: 10px;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */
transform: rotate(90deg);
}
.group-down::after {
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari */
transform: rotate(-90deg);
}
.nested {
display: none;
}
.active {
display: block;
}반응형
'Javascript > 배경 & 실무 지식' 카테고리의 다른 글
| [Javascript] - Slide/Carousel 효과내기 (119) | 2024.01.23 |
|---|---|
| [Javascript] infinite scroll (리스트 불러오기) (1) | 2023.11.30 |
| [Javascript] 한국 우편번호,주소 API(다음,카카오) 테스트 (1) | 2023.11.22 |
| [Javascript] Ajax 참고자료 (2) | 2023.11.22 |
| [Javascript] Var, Let, Const (1) | 2023.11.15 |
