Aside nav test by srsaude

dabblet.css

/* Aside nav test by srsaude */
.main-nav-link {
            position: fixed;
            top: 50%;
            left: 100%;
            transform: translate(-50%, -50%);
            display: block;
            width: 50px;
            height: 50px;
            overflow: hidden;
            background-color: #fff;
            transition: 1s;
            z-index: 3;
        }
        .main-nav-link:before {
            content: '';
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAABmJLR0QA/wD/AP+gvaeTAAARvElEQVR4nO3dS6jmZR3A8a8XBjLNO02LIgJzcCjsNmRBtihDIsFVEpgaFNUis1q1CoJoYbeFRFFJtVBo48ZFmhuhTQhjpuKFyApqKM17RVbT4j8Tk+RxRs95n+d95/OBA2f5ZWbx+53nfysAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWJ0TRgeswO7q4mpvdd6hnzOrV1a7Dv0OwPHn8eof1bOHfn+4eqi6r7qzOjAubedt6gKwr7qiuqRl8APAsbq3uq26qbprcMu226QF4PTqk9XV1Z6xKQBsmAeqG6vvVE8ObtkWm7AAnFtdV326ZQkAgJ3yZHVD9Y3q0cEtL8s6LwC7qi9WX2i5ng8Aq/JsdX31lZb7CNbOui4Ae6ofV28fHQLAce0X1ZUtNw+ulRNHB7wE11b7M/wBGG9f9cvq46NDjtVJowOOwYnV16svVSePTQGA/zq5+lB1WnX74Jajti6XAF5R3VxdNjoEALZwS/WR6m+jQ17MOiwAu1r+QS8dHQIAR+HW6vLqudEhW5n9HoCTq59k+AOwPj7YMrumvsw+dVzLNf+rRkcAwDHaU53SxPcEzLwAXFV9dXQEALxE76p+Xd0zOuT/mfUegAtanq30gh8A1tkz1TtaXiU8lRnvATih+l6GPwDr79SW7wdM9wf3jAvAJ6qLRkcAwDZ5T3XN6Ijnm20jObN6sOUDPwCwKQ5U51dPjQ45bLYTgM9l+AOweXZXnx0dcaSZTgDOqB7JJ30B2Ex/qV5fPT24o5rrBOBjGf4AbK6zWmbdFGY6AXiweuPoCADYQfdXe0dH1DwnAPsy/AHYfBdUbx0dUfMsAB8eHQAAKzLFzJtlAfjA6AAAWJEpZt4M9wDsrv7QHC0AsNMOVq+u/jwyYoYTgHdn+ANw/DihZfYNNcMC8KbRAQCwYm8eHTDDArBndAAArNj5owNmWAA8/gfA8Wb47JthATh7dAAArNg5owNmWABOHR0AACt22ugACwAArJ4FII8AAnD8OTg6YIYFYIrPIgLACg2ffRYAAFi9p0YHzLAADH0VIgAM8OjogBkWgAdHBwDAij0wOsACAACrN3z2zbAA3D86AABWbPjsm+ERvLOrPzXHMgIAO+1fLW8CfGJkxAxD97HqV6MjAGBF7m7w8K85FoCqO0YHAMCKTDHzZrgEUHVhtX90BACswN4muAdglhOAu6t7RkcAwA7b3wTDv+ZZAKp+ODoAAHbYNLNulksAVadUj1TnDu4AgJ3wx+oN1d9Hh9RcJwB/rb41OgIAdsg3m2T411wnAFVntrwdySkAAJvkQHV+E3wE6LCZTgCqHq8+PzoCALbZdU00/Gu+E4Bamn5eXTQ6BAC2wZ3Ve6uDgzv+x4wLQNXrWh6VOGt0CAC8DI9Vb6l+Pzrk+Wa7BHDY76qrm2xbAoBjcLC6qgmHf9VJowO28FDLTYHvHB0CAC/B16obRke8kJkXgKqfVq9tOT4BgHXx/eozoyO2Mus9AEfaVd1SXTo6BACOwq3V5dVzo0O2MvsJQC3fTb65ek31tsEtALCV71ZXVv8cHfJi1mEBqOVGilurV+XxQADmdH11bfXv0SFHYx0uATzf+6sfVbtHhwBAyzv+P1r9bHTIsZj1McCt3N7yZMAdo0MAOO4dnklrNfxrPReAqt9W76sua/mCIACs0m9aZtAlLe+uWTvrcg/AC3mo+kH1THVhyyeFAWCnPFp9ubqmundwy8uyjvcAvJDTqk+1/KfsGdwCwGZ5oLqx+nb19OCWbbFJC8CR9lVXtBzN7B3cAsB6ure6rbqpumtwy7bb1AXgSLuri1sWgfMO/ZxTnVGdPrALgPGeqJ5sOdp/uOXS8n0tX/A7MLALAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYG2cMDpgBXZXF1d7q/MO/ZxZvbLadeh3AI4/j1f/qJ499PvD1UPVfdWd1YFxaTtvUxeAfdUV1SUtgx8AjtW91W3VTdVdg1u23SYtAKdXn6yurvaMTQFgwzxQ3Vh9p3pycMu22IQF4NzquurTLUsAAOyUJ6sbqm9Ujw5ueVnWeQHYVX2x+kLL9XwAWJVnq+urr7TcR7B21nUB2FP9uHr76BAAjmu/qK5suXlwrZw4OuAluLban+EPwHj7ql9WHx8dcqxOGh1wDE6svl59qTp5bAoA/NfJ1Yeq06rbB7cctXW5BPCK6ubqstEhALCFW6qPVH8bHfJi1mEB2NXyD3rp6BAAOAq3VpdXz40O2crs9wCcXP0kwx+A9fHBltk19WX2qeNarvlfNToCAI7RnuqUJr4nYOYF4Krqq6MjAOAlelf16+qe0SH/z6z3AFzQ8mylF/wAsM6eqd7R8irhqcx4D8AJ1fcy/AFYf6e2fD9guj+4Z1wAPlFdNDoCALbJe6prRkc832wbyZnVgy0f+AGATXGgOr96anTIYbOdAHwuwx+AzbO7+uzoiCPNdAJwRvVIPukLwGb6S/X66unBHdVcJwAfy/AHYHOd1TLrpjDTCcCD1RtHRwDADrq/2js6ouY5AdiX4Q/A5rugeuvoiJpnAfjw6AAAWJEpZt4sC8AHRgcAwIpMMfNmuAdgd/WH5mgBgJ12sHp19eeRETOcALw7wx+A48cJLbNvqBkWgDeNDgCAFXvz6IAZFoA9owMAYMXOHx0wwwLg8T8AjjfDZ98MC8DZowMAYMXOGR0wwwJw6ugAAFix00YHWAAAYPUsAHkEEIDjz8HRATMsAFN8FhEAVmj47LMAAMDqPTU6YIYFYOirEAFggEdHB8ywADw4OgAAVuyB0QEWAABYveGzb4YF4P7RAQCwYsNn3wyP4J1d/ak5lhEA2Gn/ankT4BMjI2YYuo9VvxodAQArcneDh3/NsQBU3TE6AABWZIqZN8MlgKoLq/2jIwBgBfY2wT0As5wA3F3dMzoCAHbY/iYY/jXPAlD1w9EBALDDppl1s1wCqDqleqQ6d3AHAOyEP1ZvqP4+OqTmOgH4a/Wt0REAsEO+2STDv+Y6Aag6s+XtSE4BANgkB6rzm+AjQIfNdAJQ9Xj1+dERALDNrmui4V/znQDU0vTz6qLRIQCwDe6s3lsdHNzxP2ZcAKpe1/KoxFmjQwDgZXisekv1+9EhzzfbJYDDfldd3WTbEgAcg4PVVU04/KtOGh2whYdabgp85+gQAHgJvlbdMDrihcy8AFT9tHpty/EJAKyL71efGR2xlVnvATjSruqW6tLRIQBwFG6tLq+eGx2yldlPAGr5bvLN1Wuqtw1uAYCtfLe6svrn6JAXsw4LQC03UtxavSqPBwIwp+ura6t/jw45GutwCeD53l/9qNo9OgQAWt7x/9HqZ6NDjsWsjwFu5faWJwPuGB0CwHHv8Exaq+Ff67kAVP22el91WcsXBAFglX7TMoMuaXl3zdpZl3sAXshD1Q+qZ6oLWz4pDAA75dHqy9U11b2DW16WdbwH4IWcVn2q5T9lz+AWADbLA9WN1berpwe3bItNWgCOtK+6ouVoZu/gFgDW073VbdVN1V2DW7bdpi4AR9pdXdyyCJx36Oec6ozq9IFdAIz3RPVky9H+wy2Xlu9r+YLfgYFdAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGvjhNEBK7C7urjaW5136OfM6pXVrkO/A3D8ebz6R/Xsod8frh6q7qvurA6MS9t5m7oA7KuuqC5pGfwAcKzurW6rbqruGtyy7TZpATi9+mR1dbVnbAoAG+aB6sbqO9WTg1u2xSYsAOdW11WfblkCAGCnPFndUH2jenRwy8uyzgvAruqL1RdarucDwKo8W11ffaXlPoK1s64LwJ7qx9XbR4cAcFz7RXVly82Da+XE0QEvwbXV/gx/AMbbV/2y+vjokGN10uiAY3Bi9fXqS9XJY1MA4L9Orj5UnVbdPrjlqK3LJYBXVDdXl40OAYAt3FJ9pPrb6JAXsw4LwK6Wf9BLR4cAwFG4tbq8em50yFZmvwfg5OonGf4ArI8PtsyuqS+zTx3Xcs3/qtERAHCM9lSnNPE9ATMvAFdVXx0dAQAv0buqX1f3jA75f2a9B+CClmcrveAHgHX2TPWOllcJT2XGewBOqL6X4Q/A+ju15fsB0/3BPeMC8InqotERALBN3lNdMzri+WbbSM6sHmz5wA8AbIoD1fnVU6NDDpvtBOBzGf4AbJ7d1WdHRxxpphOAM6pH8klfADbTX6rXV08P7qjmOgH4WIY/AJvrrJZZN4WZTgAerN44OgIAdtD91d7RETXPCcC+DH8ANt8F1VtHR9Q8C8CHRwcAwIpMMfNmWQA+MDoAAFZkipk3wz0Au6s/NEcLAOy0g9Wrqz+PjJjhBODdGf4AHD9OaJl9Q82wALxpdAAArNibRwfMsADsGR0AACt2/uiAGRYAj/8BcLwZPvtmWADOHh0AACt2zuiAGRaAU0cHAMCKnTY6wAIAAKtnAcgjgAAcfw6ODphhAZjis4gAsELDZ58FAABW76nRATMsAENfhQgAAzw6OmCGBeDB0QEAsGIPjA6wAADA6g2ffTMsAPePDgCAFRs++2Z4BO/s6k/NsYwAwE77V8ubAJ8YGTHD0H2s+tXoCABYkbsbPPxrjgWg6o7RAQCwIlPMvBkuAVRdWO0fHQEAK7C3Ce4BmOUE4O7qntERALDD9jfB8K95FoCqH44OAIAdNs2sm+USQNUp1SPVuYM7AGAn/LF6Q/X30SE11wnAX6tvjY4AgB3yzSYZ/jXXCUDVmS1vR3IKAMAmOVCd3wQfATpsphOAqserz4+OAIBtdl0TDf+a7wSglqafVxeNDgGAbXBn9d7q4OCO/zHjAlD1upZHJc4aHQIAL8Nj1Vuq348Oeb7ZLgEc9rvq6ibblgDgGBysrmrC4V910uiALTzUclPgO0eHAMBL8LXqhtERL2TmBaDqp9VrW45PAGBdfL/6zOiIrcx6D8CRdlW3VJeODgGAo3BrdXn13OiQrcx+AlDLd5Nvrl5TvW1wCwBs5bvVldU/R4e8mHVYAGq5keLW6lV5PBCAOV1fXVv9e3TI0ViHSwDP9/7qR9Xu0SEA0PKO/49WPxsdcixmfQxwK7e3PBlwx+gQAI57h2fSWg3/Ws8FoOq31fuqy1q+IAgAq/Sblhl0Scu7a9bOutwD8EIeqn5QPVNd2PJJYQDYKY9WX66uqe4d3PKyrOM9AC/ktOpTLf8pewa3ALBZHqhurL5dPT24ZVts0gJwpH3VFS1HM3sHtwCwnu6tbqtuqu4a3LLtNnUBONLu6uKWReC8Qz/nVGdUpw/sAmC8J6onW472H265tHxfyxf8DgzsAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAICN8h/XAu0hjGeq6QAAAABJRU5ErkJggg==);
            width: 50px;
            height: 50px;
            background-size: contain;
            display: block;
        }
        #main-nav {
            position: fixed;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            background-color: #fff;
            transition: 1s;
            width: 150px;
            padding-left: 50px;
            z-index: 2;
        }
        .main-nav-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            background-color: #000;
            transition: opacity 1s;
        }
        #main-nav:target {
            left: 10%;
        }
        #main-nav:target ~ .main-nav-bg {
            opacity: 0.5;
        }
        #main-nav:target ~ .main-nav-link {
            left: 10%;
        }

dabblet.html

<nav id="main-nav">
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
            <li><a href="#">Menu 5</a></li>
        </ul>
    </nav>
    <a href="#" class="main-nav-bg"></a>
    <a href="#main-nav" class="main-nav-link">Ir para a navegação</a>
    <main>
        <h1>Lorem</h1>
        <p>Sit expedita accusamus distinctio pariatur saepe! Inventore dolorem a ea maiores ad. Eius blanditiis nesciunt alias odit sapiente suscipit! Hic quos fugiat possimus architecto maxime temporibus in. Expedita beatae et!</p>
        <h2>Ipsum dolor</h2>
        <p>Adipisicing distinctio perferendis temporibus ex magnam! Neque dolorum corrupti autem tenetur sunt voluptatibus neque? Nisi hic reprehenderit dolorum possimus eaque dolorem repellendus labore facere tempore perferendis alias. Deserunt cupiditate perferendis.</p>
    </main>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}