Выдвигающаяся боковая панель

Боковая панель навигации выдвигающаяся по клику, без javascript, исключительно на чистом CSS

HTML

<!-- 
    Скрытый checkbox, отвечающий за переключение панели, должен быть в верхней части документа, лучше сразу после тега `<body>`

    `id` атрибут предназначен для связки с атрибутом `for` тега <label>

    Атрибут `hidden` указывает состояние «скрытый» у текущего элемента
    -->
    <input type="checkbox" id="nav-toggle" hidden="">
    <!-- 
    Выдвижную панель размещаете ниже
    флажка (checkbox), но не обязательно 
    непосредственно после него, например
    можно и в конце страницы
    -->
    <nav class="nav">
        <!-- 
    Метка с именем `id` чекбокса в `for` атрибуте
    Символ Unicode 'TRIGRAM FOR HEAVEN' (U+2630)
    Пустой атрибут `onclick` используем для исправления бага в iOS < 6.0
    См: http://timpietrusky.com/advanced-checkbox-hack 
    -->
        <label for="nav-toggle" class="nav-toggle" onclick=""></label>
        <!-- 
    Здесь размещаете любую разметку,
    если это меню, то скорее всего неупорядоченный список <ul>
    -->
        <h2 class="logo"> 
            <a href="//dbmast.ru/">DBmast.ru</a> 
        </h2>
        <ul>
            <li><a href="#1">Один</a>
            </li><li><a href="#2">Два</a>
            </li><li><a href="#3">Три</a>
            </li><li><a href="#4">Четыре</a>
            </li><li><a href="#5">Пять</a>
            </li><li><a href="#6">Шесть</a>
            </li><li><a href="#7">Семь</a> 
        </li></ul>
    </nav>
    <!-- 
    Маска (затемнение) основного контента при включенной панели
    по-умолчанию данная фишка не используется, если оно вам надо,
		просто расккоментируйте div-контейнер ниже
		
    <div class="mask-content"></div>
		-->
		
    <!-- 
    Далее размещаем любую разметку,
    много слов, картинки и т.д...
    -->
    <main role="main">
        <article>
            <header>
                <h1 class="header__title">Просто Демо:</h1>
                <h2>Выдвигающееся боковое меню на чистом CSS</h2> 
            </header>
            <section>
<p>Нажмите на "гамбургер-иконку" в...

CSS

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,cyrillic);

* {
    box-sizing: border-box;
}

/**
 * Максимальная высота базового контейнера
 */
html {
    font-size: 100%;
}
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    color: #333;
    font: 1em 'Open Sans', sans-serif;
    background-color: #f1f1f1;
}


/* изменяем полоcу прокрутки */

::-webkit-scrollbar {
    width: .65em;
}

::-webkit-scrollbar-track {
    background-color: rgba(217, 217, 217, 0.75);
}

::-webkit-scrollbar-thumb {
    background: rgba(170, 170, 170, 0.6);
    border-radius: 5px;
    box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
}

main {
    max-width: 1024px;
    margin: 0 auto
}

article {
    margin: 0 1em;
    padding: 0 22px;
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: : -moz-transform .3s;
    transition: transform .3s;
}

header {
    margin: 0;
    padding: 0;
    text-align: center;
}

footer {
    font-size: 14px;
    text-align: center
}

p {
    margin-bottom: 16px;
}

hr {
    margin: 22px 0;
    height: 1px;
    border: 0;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

h1,
h2 {
    margin-bottom: 22px;
    color: #191919;
    font-weight: 300;
}

h1 {
    font-size: 32px;
    line-height: 32px;
}

h2 {
    color: #565d66;
    font-size: 26px;
    line-height: 26px;
}

a {
    color: #006b05;
    text-decoration: none;
}
.btn {
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    -ms-border-radius: 10em;
   ...