jquery 를 이용하여 트리 메뉴 구조(tree view)를 만들 수 있다.
jquery 를 이용하여 트리 메뉴를 구현해 놓은 plugin 들이 많은데
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
에서 구현 해 놓은 소스가 가장 간결한것 같아서 이걸 참고로 한 간단한 트리 메뉴를 구성 해 보았다.
Demos 를 누르면 여러가지 트리 메뉴 종류들을 확인 할 수가 있는데
그중에서도 Large 라는 트리 구조 메뉴를 간단하게 소개 하자면 다음과 같다.
별다른 설명도 필요없이 위에서 보는 바와 같이 ul 및 li로 메뉴를 구성하면 끝 이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<link rel="stylesheet" href="css/jquery.treeview.css"/><link rel="stylesheet" href="css/screen.css"/><script src="lib/jquery.js" type="text/javascript"></script><script src="lib/jquery.cookie.js" type="text/javascript"></script><script src="lib/jquery.treeview.js" type="text/javascript"></script><script type="text/javascript"> $(function() { $("#tree").treeview({ collapsed: true, animated: "medium", control:"#sidetreecontrol", persist: "location" }); }) </script></head><body><div id="sidetree"> <div class="treeheader"> </div> <div id="sidetreecontrol"> <a href="?#">전체 닫기</a> | <a href="?#">전체 열기</a> </div> <ul id="tree"> <li> <strong>첫번째 메뉴</strong> <ul> <li><a href="#">서브메뉴</a></li> </ul> </li> <li> <strong>두번째 메뉴</strong> <ul> <li><a href="#">첫번째 서브메뉴</a></li> </ul> <ul> <li> <a href="#">두번째 서브메뉴</a> <ul> <li><a href="#">서브메뉴 속 첫번째 서브메뉴</a></li> </ul> </li> </ul> </li> </ul></div> |
처음 로딩시 펼쳐 진 메뉴를 보기를 원하면 자바스크립트 collapsed: true 부분을 collapsed: false 로 바꿔주면 된다.
예제 소스를 첨부하니 참고하길 바란다.