Developer Dashboard

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; }
JAVASCRIPT
$('label.tree-toggler').bind('click', function(){ $(this).parent().children('ul.tree').toggle(300); });
Expand for more options Login