July 2017
Intermediate to advanced
300 pages
5h 43m
English
The directory list will be used for navigation through the file system, so we will wrap it with the nav > ul structure:
./index.html
<aside class="l-main__dir-list dir-list"> <nav> <ul> <li class="dir-list__li">..</li> <li class="dir-list__li">assets</li> <li class="dir-list__li">js</li> <li class="dir-list__li">node_modules</li> <li class="dir-list__li">tests</li></ul> </nav> </aside>
To support it with styles, we go with the following code:
./assets/css/Component/dir-list.css
.dir-list__li { padding: 0.8em 0.6em; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dir-list__li:hover { background-color: var(--dirlist-bg-hover-color); color: var(--dirlist-fg-hover-color); ...Read now
Unlock full access