Bên dưới là đoạn code mẫu để tạo ra một cây thư mục bằng css 1 cấp đơn giản, dựa vào ý tưởng này mà mình có thể làm tiếp 2 cấp hoặc nhiều hơn tùy theo mình mong muốn.
Cây thư mục bằng css |
Ở đây mình có xài thêm thằng fontawesome.io để tạo cái icon, ta phải import thêm cái thằng css của fontawesome nữa
FONTAWESOME
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">HTML
<div class="tree-view-com"> <ul class="tree-view-parent"> <li> <a href=""><i class="fa fa-folder c-icon c-icon-list" aria-hidden="true"></i> folder</a> <ul class="tree-view-child"> <li> <a href="" class="document-title"> <i class="fa fa-folder c-icon" aria-hidden="true"></i> sub folder 1 </a> </li> <li> <a href="" class="document-title"> <i class="fa fa-folder c-icon" aria-hidden="true"></i> sub folder 2 </a> </li> <li> <a href="" class="document-title"> <i class="fa fa-folder c-icon" aria-hidden="true"></i> sub folder 3 </a> </li> </ul> </li> </ul> </div>CSS
.tree-view-com ul li { position: relative; list-style: none; } .tree-view-com .tree-view-child > li{ padding-bottom: 30px; } .tree-view-com .tree-view-child > li:last-of-type{ padding-bottom: 0px; } .tree-view-com ul li a .c-icon { margin-right: 10px; position: relative; top: 2px; } .tree-view-com ul > li > ul { margin-top: 20px; position: relative; } .tree-view-com > ul > li:before { content: ""; border-left: 1px dashed #ccc; position: absolute; height: calc(100% - 30px - 5px); z-index: 1; left: 8px; top: 30px; } .tree-view-com > ul > li > ul > li:before { content: ""; border-top: 1px dashed #ccc; position: absolute; width: 25px; left: -32px; top: 12px; }
No comments:
Post a Comment