Skip to content

Instantly share code, notes, and snippets.

@LostKobrakai

LostKobrakai/index.html

Forked from anonymous/index.html
Created August 21, 2015 18:17
Show Gist options
  • Save LostKobrakai/e1bd1529537206b306bf to your computer and use it in GitHub Desktop.
Save LostKobrakai/e1bd1529537206b306bf to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/romofusexe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Bin</title>
<style id="jsbin-css">
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
}
nav {
width: 100%;
background: #101010;
color: #fff;
}
main {
padding: 1.5em;
background: white;
}
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
.toggleNav {
cursor: pointer;
display: none;
padding: 1em 0;
text-align: center;
border: 1px solid #202020;
}
#toggle-1 {
margin-left: 400px;
}
@media (min-width: 43.125em) {
nav {
position: fixed;
left: 0;
top: 0;
width: 60px;
bottom: 0;
}
nav > div {
overflow: auto;
}
main {
margin-left: 60px;
min-height: 100%;
}
.toggleNav {
display: block;
}
#toggle-1:checked ~ nav {
width: 200px;
}
#toggle-1:checked ~ nav .toggleNav {
transform: rotate(180deg);
}
}
@media (min-width: 64em) {
nav {
width: 200px;
}
.toggleNav {
display: none;
}
main {
margin-left: 200px;
min-height: 100%;
}
}
</style>
</head>
<body>
<input type="checkbox" class="hide" id="toggle-1">
<nav>
<div>
<label for="toggle-1" class="toggleNav"><span>&rarr;</span><span class="hide">Open Menu</span></label>
<ul>
<li>Title1</li>
<li>Title2</li>
<li>Title3</li>
<li>Title4</li>
<li>Title5</li>
</ul>
</div>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda eius perferendis quaerat iusto laboriosam. Amet omnis veritatis iure, dignissimos modi, soluta ullam! Quam omnis, autem assumenda exercitationem fugiat porro!</p>
<p>Suscipit a reprehenderit aliquam nemo cupiditate inventore nulla consequatur impedit sit soluta saepe rerum, quas nihil quisquam facilis sapiente at nobis beatae. Vitae, ratione voluptatibus quo consequatur maiores quia aut.</p>
<p>Aliquam sunt perspiciatis quaerat, quibusdam delectus possimus laborum doloremque. Quidem maiores numquam explicabo aliquid accusamus, voluptates expedita, maxime. Omnis inventore ipsum vitae vel cupiditate nihil delectus ipsa! Totam, tenetur, neque.</p>
<p>Cumque, hic, ad. Laboriosam veniam iure inventore molestiae molestias obcaecati similique, est velit deserunt dignissimos quae in quod, quidem nisi, commodi reiciendis facilis vitae vero, optio voluptatum ut quis! Sint.</p>
<p>Facere fuga, aliquam optio quia, soluta, reiciendis assumenda, incidunt suscipit voluptas nihil quaerat cupiditate nam maxime qui quod sint. Impedit aut sunt error. Necessitatibus ipsa esse laboriosam, error distinctio ratione.</p>
<p>Deleniti esse cum saepe non voluptate harum odit tempora porro aspernatur quo? Tenetur eligendi perspiciatis, rem natus quidem magni culpa, modi porro hic! Accusamus, animi nemo! Animi neque, nihil ipsum.</p>
<p>Eaque illo aperiam, quod nam iusto. Adipisci incidunt asperiores sed ad explicabo necessitatibus, voluptatum iste numquam a officia ipsam error harum, labore dicta ullam ipsa! Iusto, debitis voluptate eius commodi!</p>
<p>Blanditiis excepturi, ullam vero dolore dolor aperiam quis, quia eius accusantium quo accusamus similique laboriosam, impedit, harum nisi obcaecati illum? Suscipit excepturi est voluptate nobis tenetur ducimus ratione ex similique!</p>
<p>Saepe illo accusamus cum in excepturi, optio consectetur facilis sint assumenda animi numquam ducimus recusandae, facere ab fugit ullam quia voluptatum dolorem laboriosam sit! Provident delectus perferendis sint ipsa voluptatem.</p>
<p>Corporis, voluptas amet ipsam. Aliquam voluptate quisquam, nam nisi, magni iusto hic eius minus velit, sed veritatis! Repellendus, labore, eaque. Eum reprehenderit deleniti reiciendis vero consequatur fuga, qui nam. Doloremque!</p>
<p>Tempora tempore, amet obcaecati nihil fugit expedita similique repudiandae dicta, dolores optio sequi, natus alias aliquid. At nisi earum, officia dolore atque, voluptatum impedit, saepe harum porro assumenda optio voluptatibus.</p>
<p>Aut dolorem consectetur, aliquam impedit, quasi voluptates facere. Tempora obcaecati non, reprehenderit eos alias, consectetur veniam aperiam maiores quod libero voluptate reiciendis, officia dolor sed et impedit temporibus totam nihil!</p>
<p>Iste maiores cum praesentium debitis quidem consectetur soluta rem, eligendi, cumque voluptates dolorem, ullam, saepe porro excepturi? Iure quasi placeat, numquam unde totam. Nam eveniet numquam, inventore ullam? Debitis, distinctio!</p>
<p>Voluptates quasi doloribus accusantium enim illo facere adipisci quibusdam, cumque quam sit reprehenderit reiciendis assumenda in a ea rem officia nesciunt animi similique. Enim, minima odio voluptatum esse magni consequatur.</p>
<p>Consequuntur, voluptas quia. Dolore laudantium quam quidem perferendis voluptatum, modi numquam? Ex incidunt ullam nesciunt placeat dignissimos maiores natus quod temporibus nulla, recusandae ipsa quas eaque esse, aspernatur, blanditiis perferendis!</p>
<p>Facilis hic incidunt iure ea distinctio repellat, perferendis commodi. Sunt nesciunt reprehenderit, doloremque dolores! Sit iste sapiente vitae quisquam perferendis sequi labore, non facilis assumenda, ab illum soluta aliquid voluptate.</p>
<p>Vitae ipsum assumenda voluptates hic quis, dolorum nam odit nemo, tempore harum, deleniti praesentium saepe, at perspiciatis pariatur aut vel in dignissimos cumque placeat fuga modi. Praesentium officiis nesciunt in!</p>
<p>Nisi deleniti delectus tempore, cupiditate itaque suscipit perspiciatis rem pariatur ut eos, voluptate quod, facilis, earum excepturi! Dignissimos corporis asperiores, accusantium tempora, reiciendis itaque rem adipisci ad odit quidem architecto!</p>
<p>Voluptatibus, iusto, porro sint doloribus est impedit provident assumenda vel culpa enim maxime corporis deleniti cum minus temporibus laudantium, laborum deserunt quas numquam facere nostrum aperiam corrupti quae! Voluptates, nostrum.</p>
<p>Nesciunt eveniet quibusdam provident, error, distinctio cum ipsa veritatis expedita alias possimus eligendi in est nam saepe perferendis! Vel blanditiis dolore perspiciatis tempora similique aspernatur ea inventore, corporis fuga possimus!</p>
<p>Optio quas ducimus commodi modi blanditiis nam aliquam ratione neque enim. Magnam aliquam corporis vitae reprehenderit sit voluptas fuga voluptatum veniam ullam quasi quos ducimus sint ab vero, sunt accusantium!</p>
<p>Hic quas magni quo ipsam obcaecati quia consequuntur nisi veniam. Voluptatum consectetur dolor voluptatem impedit asperiores aliquid a? Beatae sunt soluta maxime dicta, ratione esse, sint illo inventore consequatur unde?</p>
<p>Dolor, commodi voluptate. Animi alias incidunt quasi eius asperiores a, minima magnam, aspernatur quia culpa corporis provident vitae eligendi cumque ullam reprehenderit dolorem temporibus placeat delectus itaque. Cumque, tempore, delectus!</p>
<p>Dolorem saepe omnis vel amet, esse, repudiandae soluta asperiores natus atque deserunt. Tenetur pariatur, ratione recusandae dolorum ad assumenda consequatur voluptatum ducimus unde quasi officiis soluta porro error harum optio!</p>
<p>Placeat ullam eveniet nobis neque totam, ab fugiat vel nesciunt recusandae quos eaque, et veritatis modi optio explicabo, provident! Maiores molestias necessitatibus ex dolore quidem asperiores eum, tempora a. Repellat!</p>
<p>Quisquam impedit, enim aperiam veritatis neque nemo laudantium quis consectetur eos vero at exercitationem, soluta autem quaerat ratione nihil earum odio libero totam maxime natus in itaque. Maiores, commodi, tenetur.</p>
<p>Repudiandae modi labore reprehenderit ipsam amet facere non dolorum natus veritatis velit ab veniam iusto expedita obcaecati temporibus nesciunt magnam aspernatur eveniet nemo harum quae hic voluptas omnis, sunt. Dolor!</p>
<p>Exercitationem voluptatibus autem, omnis esse perferendis recusandae ipsa magnam quod ad enim ratione libero, culpa praesentium. Fugit nulla, harum, veniam, corporis velit accusantium repudiandae, distinctio dolore sit tenetur ab quaerat?</p>
<p>Aliquam obcaecati, nobis, ullam excepturi molestiae dignissimos quos unde. Ipsa cum, voluptates fugiat facilis sed aliquam minus labore, rerum explicabo mollitia blanditiis incidunt neque ea quia, error recusandae odio vitae.</p>
<p>Ut voluptate animi quas quod expedita architecto assumenda doloremque explicabo. Totam fugiat eaque voluptate numquam perspiciatis quas consequatur ex modi iure aspernatur, aliquid nam reprehenderit dolore ipsam natus inventore eos!</p>
</main>
<script id="jsbin-source-css" type="text/css">@charset "UTF-8";
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
}
nav {
width: 100%;
background: #101010;
color: #fff;
}
main {
padding: 1.5em;
background: white;
}
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
.toggleNav {
cursor: pointer;
display: none;
padding: 1em 0;
text-align: center;
border: 1px solid #202020;
}
#toggle-1{
margin-left: 400px;
}
@media (min-width: 43.125em) {
nav {
position: fixed;
left: 0;
top: 0;
width: 60px;
bottom: 0;
& > div{
overflow: auto;
}
}
main {
margin-left: 60px;
min-height: 100%;
}
.toggleNav{
display: block;
}
#toggle-1:checked ~ nav {
width: 200px;
}
#toggle-1:checked ~ nav .toggleNav {
transform: rotate(180deg);
}
}
@media (min-width: 64em) {
nav {
width: 200px;
}
.toggleNav{
display: none;
}
main {
margin-left: 200px;
min-height: 100%;
}
}
</script>
</body>
</html>
Raw
jsbin.romofusexe.css
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
}
nav {
width: 100%;
background: #101010;
color: #fff;
}
main {
padding: 1.5em;
background: white;
}
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
.toggleNav {
cursor: pointer;
display: none;
padding: 1em 0;
text-align: center;
border: 1px solid #202020;
}
#toggle-1 {
margin-left: 400px;
}
@media (min-width: 43.125em) {
nav {
position: fixed;
left: 0;
top: 0;
width: 60px;
bottom: 0;
}
nav > div {
overflow: auto;
}
main {
margin-left: 60px;
min-height: 100%;
}
.toggleNav {
display: block;
}
#toggle-1:checked ~ nav {
width: 200px;
}
#toggle-1:checked ~ nav .toggleNav {
transform: rotate(180deg);
}
}
@media (min-width: 64em) {
nav {
width: 200px;
}
.toggleNav {
display: none;
}
main {
margin-left: 200px;
min-height: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment