Cấu trúc cây là một mô hình dữ liệu thường gặp trong thực tế. Mỗi một phần tử trong cây gọi là một Node, mỗi một cấu trúc cây gồm có:
- Root Node: gọi là Node gốc (gốc của cây). Nó có một hoặc nhiều Node con và không có Node cha.
- Parent Node: là Node nằm dưới Root Node. Nó có một hoặc nhiều Node con.
- Leaf Node : là Node lá, nó không có Node con nào.
 kết quả 1  |
| Kết quả 2 |
Ta tạo ra một menu đơn giản như sau:
HTML:
<ul class="tree">
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 2.1</li>
<li>List item 2.2
<ul>
<li>List item 2.2.1</li>
<li>List item 2.2.2</li>
</ul>
</li>
<li>List item 2.3</li>
</ul>
</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
Kết quả của đoạn code trên:
CSS:
ul.tree, ul.tree ul {
list-style-type: none;
}và ta sẻ thu được kết quả:
 |
| vline.png |
ul.tree, ul.tree ul {
list-style-type: none;
background: url(vline.png) repeat-y;
margin: 0;
padding: 0;
}
ul.tree ul {
margin-left: 10px;
}
ul.tree li {
margin: 0;
padding: 0 12px;
}
ta được kết quả:
 |
| node.png |
ul.tree, ul.tree ul {
list-style-type: none;
background: url(vline.png) repeat-y;
margin: 0;
padding: 0;
}
ul.tree ul {
margin-left: 10px;
}
ul.tree li {
margin: 0;
padding: 0 12px;
line-height: 20px;
background: url(node.png) no-repeat;
color: #369;
font-weight: bold;
}và kết quả sẻ là:
 |
| lastnode.png |
ul.tree,ul.tree ul {
list-style-type: none;
margin:0;
padding:0;
}
ul.tree ul {
margin-left:10px;
background: url(vline.png) repeat-y;
}
ul.tree li {
margin:0;
padding:0 12px;
font-size:14px;
line-height:20px;
color:#369;
font-weight:bold;
}
ul.tree ul li {
background: url(node.png) no-repeat;
}
ul.tree ul li.last,
ul.tree ul li:last-child {
background: #fff url(lastnode.png) no-repeat;
}
ta thu được kết quả cuối cùng:
HTML + CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Treeview Menu - List : nhatchanh.info</title>
<style>
ul.tree,ul.tree ul {
list-style-type: none;
margin:0;
padding:0;
}
ul.tree ul {
margin-left:10px;
background: url(vline.png) repeat-y;
}
ul.tree li {
margin:0;
padding:0 12px;
font-size:14px;
line-height:20px;
color:#369;
font-weight:bold;
}
ul.tree ul li {
background: url(node.png) no-repeat;
}
ul.tree ul li.last,
ul.tree ul li:last-child {
background: #fff url(lastnode.png) no-repeat;
}
</style>
</head>
<body>
<ul class="tree">
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 2.1</li>
<li>List item 2.2
<ul>
<li>List item 2.2.1</li>
<li>List item 2.2.2</li>
</ul>
</li>
<li>List item 2.3</li>
</ul>
</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
</body>
</html>
jQuery tree menu css slide up - downVới ví dụ trên các nhánh được hiển thị bằng hình ảnh, nếu bạn không muốn dùng hình ảnh bạn có thể sử dụng đoạn css dưới đây:
CSS:
ul.tree,
ul.tree ul {
list-style:none;
margin:0;
padding:0;
}
ul.tree ul {
margin-left:10px;
position:relative;
}
ul.tree ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid;
}
ul.tree li {
margin:0;
padding:0 12px;
font-size:14px;
line-height:20px;
color:#369;
font-weight:bold;
position:relative;
}
ul.tree ul li:before {
content:"";
display:block;
width:10px;
height:0;
border-top:1px solid;
position:absolute;
top:10px;
left:0;
}
ul.tree ul li:last-child:before {
background:white;
height:auto;
top:10px;
bottom:0;
}
