Vertical menu only with pure CSS

dabblet.css

/**
 * Vertical menu only with pure CSS
 */
body{
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
}

.navigation {
    background-color: #6b9ad0;
    width: 300px;
}

/*------------------------------------*\
    #Panel
\*------------------------------------*/

.panel {}
/*------------------------------------*\
    #Panel_elements
\*------------------------------------*/

.panel__header {
    cursor: pointer;
    font-size: 1.4em;
    color: #9cbce1;
}
.panel__toggle_body {
    display: none;
}
.panel__body {
    display: none;
    background-color: #e1eefc;
}
/*------------------------------------*\
    #Panel_modificators
\*------------------------------------*/

.panel--pull_right {
    float: right;
}
.panel--pull_left {
    float: left;
}
.panel--break {
    clear: both;
}
.panel__toggle_body:checked + .panel--break + .panel__body {
    display: block;
}

/*------------------------------------*\
    #Menu
\*------------------------------------*/
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu__item {
    text-transform: uppercase;
    font-family: arial, sans-serif;
    color: #6b9ad0;
    text-align: center;
    padding: 10px;
    margin: 0 10px;
    border-bottom: 1px solid white;
}
.menu__item:last-child {
    border: none;
}

dabblet.html

<nav class="navigation">
            <div class="panel">
                <label for="tags" class="panel__header panel--pull_right">&#9776;</label>

                <input id="tags" class="panel__toggle_body" type="checkbox">

                <div class="panel--break"></div>

                <div class="panel__body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare tempus elit ac iaculis. Mauris mollis facilisis quam. Ut auctor diam at nibh finibus vehicula. Ut scelerisque nisl urna, sed consequat mi tristique a. Donec suscipit dui et orci molestie, eget lobortis libero iaculis. Aliquam erat volutpat. Quisque justo lacus, blandit ac massa a, molestie aliquet erat. Curabitur gravida nec risus quis feugiat.
                </div>
            </div>

            <div class="panel">
                <label for="menu" class="panel__header panel--pull_right">&#9776;</label>

                <input id="menu" class="panel__toggle_body" type="checkbox">

                <div class="panel--break"></div>

                <div class="panel__body">
                    <ul class="menu">
                        <li class="menu__item"><a href="#">javascript</a>
                        </li>
                        <li class="menu__item"><a href="#">css</a>
                        </li>
                        <li class="menu__item"><a href="#">latest</a>
                        </li>
                        <li class="menu__item"><a href="#">html</a>
                        </li>
                        <li class="menu__item"><a href="#">design</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

dabblet.js

// alert('Hello world!');

settings.json

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