Tạo Menu Treeview đa cấp bằng HTML và CSS

TreeView là một điều khiển dùng để hiển thị các cấu trúc dạng cây.
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.

Trong bài viết này, tôi sẽ trình bày một kỹ thuật để hiển thị một danh sách có thứ tự đa cấp theo hình thức một cây với đường kết nối các nút. Kết quả cuối cùng sẽ trông như thế này:

Menu Treeview đa cấp bằng HTML và CSS, menu treeview, treeview html css, tao menu treview bang html va css, treeview

kết quả 1

Kết quả 2

Lưu ý rằng các menu mà chúng ta xây dựng là hoàn toàn tĩnh - có nghĩa là nó không có chức năng thu gọn hay mở rộng ra (xổ xuống).

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:

Điều đầu tiên mà chúng ta cần phải làm là loại bõ những nút chấm chấm đen đen "xấu xí" đó đi @@ bằng cách thiết lập list-style-type với thuộc tính là none

CSS:

ul.tree, ul.tree ul {
   list-style-type: none;
}

và ta sẻ thu được kết quả:

Tiếp đến là chúng ta kẽ 1 đường dọc xuống cho các cấp bằng cách tạo ra hình ảnh dạng |

vline.png

CSS:

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ả:

Kết nối các nút lại với nhau bằng cách bằng cách ta tạo ra 1 hình ảnh dạng chữ T

node.png

CSS:

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à:

Rõ ràng, nút cuối cùng trong mỗi danh sách nhìn chưa đạt cần phải thiết lập lại. Và ta lại tạo ra thêm 1 hình ảnh dạng chữ L để nối nó lại:

lastnode.png

CSS:

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:

Và đây là toàn bộ code:
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>

DEMO

jQuery tree menu css slide up - down

Vớ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;
}

Subscribe by:	RSS	Email
Follow me on:	Google+	Facebook	Twitter

Tạo Menu Treeview đa cấp bằng HTML và CSS

3 comments:

Bài viết mới nhất

Có thể bạn thích