responsive slide menu

by Dru Dro

HTML

<div class="wrapper">
    <input type="checkbox" checked="true" id="menu"></input>
    <label id="formenu" for="menu"><span></span><span></span></label>
    <div class="fixed"></div>
    <div class="elastic">
        <iframe src="" />
    </div>
</div>

CSS

* {
    transition: all .2s ease-in-out;
}
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.wrapper {
    display: table;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.fixed, .elastic {
    display: table-cell;
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}
.elastic {
    background: #fff;
}
.fixed {
    background: #333;
}
iframe {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    border: none;
}
#menu {
    display: none;
}
label#formenu {
    display: block;
    position: absolute;
    background: #333;
    opacity: 0.1;
    color: #fff;
    width: 30px;
    height: 100%;
    text-align: center;
    box-sizing: padding-box;
    z-index: 1;
    cursor: pointer;
    
}
label#formenu:hover {
    opacity: .8;
}
label#formenu:active {
    opacity: 1;
}
label#formenu span:first-child, label#formenu span:last-child {
    display: block;
    position: absolute;
    width:0;
    height:0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgba(255, 255, 255, 1);
    top: 49%;
    left: 10px;
    opacity: 1;
}
label#formenu span:last-child {
    border-right: 10px solid rgba(255, 255, 255, 1);
    border-left: none;
    opacity: 0;
}
#menu:checked ~ .fixed {
    width: 25%;
}
#menu:checked ~ #formenu span:first-child {
    opacity: 0;
}
#menu:checked ~ #formenu span:last-child {
    opacity: 1;
}
#menu:checked ~ #formenu {
    left: 25%;
    opacity: 1;
}
#menu:not(:checked) ~ .fixed {
    width: 0%;
}
#menu:not(:checked) ~ .elastic {
    width: 100%;
}
#menu:not(:checked) ~ #formenu {
    left: 0;
}
@media (max-width: 960px) {
    #menu:checked ~ .fixed {
        width: 100%;
    }
    #menu:checked ~ #formenu {
        left: auto;
    left: calc(100% - 30px);
    }
}