.note-nav{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 6;
}


input[id*="joacims-menu"] {
    display:none;
}

input[id*="joacims-menu"] + label {
    display:block;
    width:40px;
    height:40px;
    cursor:pointer;
    font-size:30px;
    color:#fff;
    position:relative;
}

input[id*="joacims-menu"] + label span {
    display:block;
    position:absolute;
    left: 5px;
    transition:.2s;
}

input[id*="joacims-menu"]:checked + label span {
    transform:rotate(45deg);
    font-size:34px;
    top:0px;
    left:5px;
}

.note-nav a {
    display:block;
    height:40px;
    line-height:40px;
    background:#3e3e3e;
    width:100px;
    padding-left:10px;
    text-decoration:none;
    color:white;
    box-shadow:5px 0 0 #000;
}

input[id*="joacims-menu"] ~ nav a:nth-child(1) { box-shadow:5px 0 0 #3498db; transition-delay:.05s; }
input[id*="joacims-menu"] ~ nav a:nth-child(2) { box-shadow:5px 0 0 #2ecc71; transition-delay:.10s; }
input[id*="joacims-menu"] ~ nav a:nth-child(3) { box-shadow:5px 0 0 #e67e22; transition-delay:.15s; }
input[id*="joacims-menu"] ~ nav a:nth-child(4) { box-shadow:5px 0 0 #c0392b; transition-delay:.20s; }
input[id*="joacims-menu"] ~ nav a:nth-child(5) { box-shadow:5px 0 0 #2c3e50; transition-delay:.25s; }
input[id*="joacims-menu"] ~ nav a:nth-child(6) { box-shadow:5px 0 0 #f1c40f; transition-delay:.30s; }
input[id*="joacims-menu"] ~ nav a:nth-child(7) { box-shadow:5px 0 0 #222222; transition-delay:.35s; }

input[id*="joacims-menu"]:checked ~ nav a {
    margin-left:0px;
}

input[id*="joacims-menu"]:checked ~ nav a:hover {
    width:110px;
}

input[id*="joacims-menu"] ~ nav a {
    margin-left:-110px;
    transition:.6s margin;
}

input[id*="joacims-menu"] ~ nav a:hover {
    background:#999;
}