handl-sidebar

modern sidebar navigation

by kizer

HTML

<aside>
    <h1>incoming</h1>
    <ul>
        <li>All</li>
        <li>Important</li>
    </ul>
        <hr>
        <h1>tasks</h1>
     <ul>
         <li>Today<dt>123</dt></li>
        <li>Tasks</li>
        <li>Maybe</li>
        <li>Completed</li>
        <li>Archived</li>
    </ul>
    <h1>projects</h1>
     <ul>
        <li class="folder">companies</li>
        <li>test1</li>
        <li>folder2</li>
        <li>another-archive</li>
        <li>final test</li>
    </ul>
    
    <div id="three" class="screen">
    <span>three thousand</span>
</div>
</aside>

CSS

body {
  color: 80, 80, 80;
    font-family: 'Helvetica Neue', 'Lucida Grande', 'Lucida Sans', sans-serif;
    font-size: 11px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;  
}

aside {
    cursor: default;
width: 180px;
position: absolute;
top: 0px;
bottom: 0px;
   padding-top: 10px;
height: 100%;
text-shadow: 0 1px 0 white;
/* remember the background is a slight gradient */
background-color: #e9ebf0;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 235, 240)), to(rgb(217, 222, 228)));
background-image: -webkit-linear-gradient(top, rgb(233, 235, 240), rgb(217, 222, 228));
background-image: -moz-linear-gradient(top, rgb(233, 235, 240), rgb(217, 222, 228));
background-image: -o-linear-gradient(top, rgb(233, 235, 240), rgb(217, 222, 228));
background-image: -ms-linear-gradient(top, rgb(233, 235, 240), rgb(217, 222, 228));
background-image: linear-gradient(top, rgb(233, 235, 240), rgb(217, 222, 228));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#e9ebf0', EndColorStr='#d9dee4');

border-right: 1px solid #b4bbc4;
box-shadow: 1px 0px 3px rgba(0,0,0, .1);   
}

h1 {
 text-transform: uppercase;
 font-weight: bold;
 color: #717f8c;
 margin-bottom: 10px;
 padding-left: 10px;
}

li.folder:before {
 content:" ▶";
 color: #989898;
 margin-right: 5px;
 padding-top: 2px;
    font-size: 11px;
}

li {
 color: #212121;
 font-size: 13px;
 height: 20px;
 line-height: 20px;
 padding-left:  11px;
  text-shadow: 0px 1px 0px white;
}

li:last-child {
 margin-bottom: 10px;   
}

li:hover {
    cursor: default;
    color: white;
    font-weight: bold;
    text-shadow: 0px 1px 0px rgba(66,120,181, 1);
background: #005dde;
background: -moz-linear-gradient(top,  #005dde 0%, #60ceff 5%, #47afff 10%, #43adfe 15%, #34a2fc 25%, #309efb 30%, #2698fa 35%, #2295f8 40%, #108df7 50%, #0088f6 55%, #0064ec 95%, #0e314e 100%);
background: -webkit-gradient(linear, left top, left bottom,...