Result
こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ
CMSの管理画面なんかで複雑化したページを階層表示する、とかWebサイトのサイトマップとかいろいろ用途はありそうです
css
.tree {/*親要素*/ position: relative; background: white; margin-top: 20px; padding: 30px; font-size: .85rem; font-weight: 400; line-height: 1.5; color: #212529;}.tree ul {/*親フォルダ*/ padding-left: 5px; list-style: none;}.tree ul li {/*ファイル名部分*/ position: relative; padding-top: 5px; padding-bottom: 5px; padding-left: 15px; box-sizing: border-box;}.tree ul li:before {/*横線*/ position: absolute; top: 15px; left: 0; width: 10px; height: 1px; margin: auto; content: ''; background-color: #666;}.tree ul li:after {/*縦線*/ position: absolute; top: 0; bottom: 0; left: 0; width: 1px; height: 100%; content: ''; background-color: #666;}.tree ul li:last-child:after {/*これ以下は別フォルダになる事を明示する為、少しだけ離す*/ height: 15px;} |
線はよくあるパターンですが疑似要素に幅を付けて背景色を与えて実装されています
html
<div class="tree"> <ul> <li><i class="fa fa-folder-open"></i> Project <ul> <li><i class="fa fa-folder-open"></i> Opened Folder <span>- 15kb</span> <ul> <li><i class="fa fa-folder-open"></i> css <ul> <li><i class="fa fa-code"></i> CSS Files <span>- 3kb</span> </li> ・ ・ ・</div> |
