HTML
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<div class="col-md-6">
<h1><span class="lnr lnr-rocket"></span> Developer Dashboard</h1>
<ul class="nav nav-list">
<li><label class="tree-toggler nav-header lvl1"><span class="lnr lnr-layers"></span> Projects</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><label class="tree-toggler nav-header rotate">Folder 1</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><label class="tree-toggler nav-header">Folder 2</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><label class="tree-toggler nav-header lvl1"><span class="lnr lnr-star"></span> GitHub</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><label class="tree-toggler nav-header">Folder 1</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><label class="tree-toggler nav-header">Folder 2</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-divider hidden"></li>
<li><label class="tree-toggler nav-header lvl1"><span class="lnr lnr-book"></span> Libraries</label>
<ul class="nav nav-list tree">
<li><label class="tree-toggler nav-header">JS</label>
<ul class="nav nav-list tree">
<li><label class="tree-toggler nav-header">Folder 1</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
</ul>
</li>
</ul>
</li>
<li><label class="tree-toggler nav-header">CSS</label>
<ul class="nav nav-list tree">
<li><a href="#">Link</a></li>
<li><label class="tree-toggler nav-header">Folder 1</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
</ul>
</li>
</ul>
</li>
<li><label class="tree-toggler nav-header">HTML</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><label class="tree-toggler nav-header">Folder 1</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
</ul>
</li>
</ul>
</li>
<li><label class="tree-toggler nav-header">PHP</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><label class="tree-toggler nav-header">Folder 1</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><label class="tree-toggler nav-header lvl1"><span class="lnr lnr-code"></span> Snippets</label>
<ul class="nav nav-list tree">
<li><label class="tree-toggler nav-header">Codepad</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
<li><label class="tree-toggler nav-header">Codepen</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
<li><label class="tree-toggler nav-header">Gist</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
<li><label class="tree-toggler nav-header">JSFiddle</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
</li>
<li><label class="tree-toggler nav-header lvl1"><span class="lnr lnr-bookmark"></span> Saved</label>
<ul class="nav nav-list tree">
<li><label class="tree-toggler nav-header">Articles</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><label class="tree-toggler nav-header">Videos</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><label class="tree-toggler nav-header">Images</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><label class="tree-toggler nav-header">Other</label>
<ul class="nav nav-list tree">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-6" id="welcome">
<p>Hi! I've been working on this little project as my home page when developing - giving me easy access to all of my resources and bookmarks.</p>
<p>Feel free to build upon it and make it your own!</p>
<p><small>Resources used:</small>
<ul>
<li><a href="https://getbootstrap.com" target="_blank">Bootstrap</a></li>
<li><a href="https://fonts.google.com/specimen/Source+Sans+Pro?selection.family=Source+Sans+Pro:300" target="_blank">Google Fonts</a></li>
<li><a href="https://linearicons.com" target="_blank">Linearicons</a></li>
<li><a href="https://code.jquery.com/jquery-2.2.4.min.js" target="_blank">jQuery</a></li>
</ul>
</p>
</div>
CSS
body{
background:#f6f6f6;
color:#aaa;
font-size:20px;
font-family:"Source Sans Pro", sans-serif;
font-weight:300;
/* for demo appearance */
margin: 3em;
}
h1{
font-size:1em;
font-weight:300;
margin-left:1em;
color:#d0d0d0;
border-bottom:1px solid #e7e6e6;
padding-bottom:.2em;
width:50%;
}
.nav-list{
padding-right:15px;
padding-left:15px;
}
.nav.nav-list.tree{
display:none;
margin-left:1.5em;
background:#8e9eab;
background:-webkit-linear-gradient(to left, #8e9eab , #eef2f3);
background:linear-gradient(to right, rgba(142,158,171,0.075) , rgba(238,242,243,0.075));
border-radius:3px;
}
.container{
width:80%;
margin:5% auto 0;
position:relative;
max-width:100%;
white-space:nowrap;
-webkit-user-select:none;
}
label.tree-toggler.nav-header, .nav-list.tree li a{
margin-bottom:1em;
padding:.2em .5em;
border-radius:3px;
box-sizing:border-box;
max-width:100%;
display:inline-block;
overflow:hidden;
text-overflow:ellipsis;
font-size:1em;
font-weight:300;
line-height:2;
text-decoration:none;
color:#555;
padding:0 .8em;
border-radius:.2em;
cursor:pointer;
transition-property:color, background-color, box-shadow, opacity;
transition-duration:0.2s;
transition-timing-function:ease-out;
}
label.tree-toggler.nav-header span.lnr{
margin-right:.25em;
}
.lnr.sm{
font-size:.7em;
margin-left:.5em;
}
label.tree-toggler.nav-header:hover, .nav-list.tree li a:hover{
background:#fff;
box-shadow:0px 0px 15px rgba(0,0,0,0.3);
}
.nav-list.tree li a{
display:inline-block;
color:#018aed;
}
.nav-list{
padding:10px;
}
label.tree-toggler.nav-header, .nav-list.tree li a{
margin:.5em 0;
}
