반응형
접었다 펼 수 있는 메뉴 트리 구조 샘플을 찾았다.
<html>
<style type="text/css">
.tree{
margin-top: 5px;
}
.tree, .tree ul{
list-style: none; /* 기본 리스트 스타일 제거 */
padding-left:10px;
}
.tree *:before{
width:15px;
height:15px;
display:inline-block;
}
.tree label{
cursor: pointer;
font-family: NotoSansKrMedium, sans-serif !important;
font-size: 14px;
color: #0055CC;
}
.tree label:hover{
color: #00AACC;
}
.tree label:before{
content: '+'
}
.tree label.lastTree:before{
content:'o';
}
.tree label:hover:before{
content: '+'
}
.tree label.lastTree:hover:before{
content:'o';
}
.tree input[type="checkbox"] {
display: none;
}
.tree input[type="checkbox"]:checked~ul {
display: none;
}
.tree input[type="checkbox"]:checked+label:before{
content: '-'
}
.tree input[type="checkbox"]:checked+label:hover:before{
content: '-'
}
.tree input[type="checkbox"]:checked+label.lastTree:before{
content: 'o';
}
.tree input[type="checkbox"]:checked+label.lastTree:hover:before{
content: 'o';
}
</style>
<ul class="tree">
<li>
<input type="checkbox" id="root">
<label for="root">ROOT</label>
<ul>
<li>
<input type="checkbox" id="node1">
<label for="node1" class="lastTree">node1</label>
</li>
<li>
<input type="checkbox" id="node2">
<label for="node2">node2</label>
<ul>
<li>
<input type="checkbox" id="node21">
<label for="node21" class="lastTree">node21</label>
</li>
</ul>
<li>
<input type="checkbox" id="node3">
<label for="node3">node3</label>
<ul>
<li>
<input type="checkbox" id="node31">
<label for="node31" class="lastTree">node31</label>
</li>
<li>
<input type="checkbox" id="node32">
<label for="node32">node32</label>
<ul>
<li>
<input type="checkbox" id="node321">
<label for="node321" class="lastTree">node321</label>
</li>
<li>
<input type="checkbox" id="node322">
<label for="node322" class="lastTree">node322</label>
</li>
<li>
<input type="checkbox" id="node323">
<label for="node323" class="lastTree">node323</label>
</li>
</ul>
<li>
<input type="checkbox" id="node33">
<label for="node33" class="lastTree">node33</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</html>
반응형
'Web' 카테고리의 다른 글
| 스프링프레임워크 <form:form> 태그 사용법 (0) | 2023.10.25 |
|---|---|
| Eclipse 개발환경 사용시 대처법 (0) | 2023.08.14 |
| Spring Interceptor 클래스 구현하기 (0) | 2023.07.19 |
| DriverSpy 라이브러리 사용하기 (0) | 2023.07.10 |
| 화면에서 외부 API 연동하는 기능 성능 개선 시키기 (0) | 2023.07.05 |
댓글