<!-- Note: stick navigation inside body tag, not header -->
<!-- Note: navigation comes first in code, because it's "behind" everything -->
<ul class="navigation">
<li class="nav-item"><a href="google.com">Google</a></li>
<li class="nav-item"><a href="bing.com">Bing</a></li>
<li class="nav-item"><a href="yahoo.com">Yahoo</a></li>
<li class="nav-item"><a href=" ask.com">Ask</a></li>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger " />
<label for="nav-trigger"><span class="hidden_nav"></span></label>
<!-- Note: the rest of the site needs to be wrapped in unique div (like site-wrap) so that it can slide to the side in it's entirety -->
<div class="site-wrap ">
<h1>Greatest Heading Ever</h1>
<p>Intelligentsia normcore 8-bit 90's Godard beard. Pop-up synth typewriter literally listicle yr letterpress, sartorial raw denim. Tumblr lo-fi letterpress, swag mustache Thundercats banh mi forage beard Carles jean shorts normcore Intelligentsia paleo vinyl. Migas ennui master cleanse flannel, Wes Anderson meditation roof party mustache tattooed normcore. +1 dreamcatcher leggings selfies mustache taxidermy, twee normcore irony distillery retro letterpress brunch fingerstache asymmetrical. Before they sold out taxidermy tousled tofu Odd Future. Fap cornhole squid sriracha.</p>
<p>Chillwave PBR crucifix cardigan, Schlitz pug beard bicycle rights shabby chic selvage mustache tote bag. Yr 90's shabby chic organic hoodie. Forage Wes Anderson whatever, cray tote bag kitsch chia Godard church-key retro XOXO mustache messenger bag cronut sustainable. Deep v direct trade church-key occupy, before they sold out wayfarers Marfa farm-to-table butcher. Actually brunch sartorial semiotics meggings. Readymade master cleanse Pitchfork meggings High Life organic, ugh distillery. Tousled Williamsburg kogi, drinking vinegar jean shorts food truck fingerstache hoodie pickled stumptown sriracha yr roof party.</p>
<p>Pop-up fashion axe slow-carb, mixtape freegan polaroid forage bitters you probably haven't heard of them cold-pressed church-key keytar. Stumptown readymade fashion axe Wes Anderson Blue Bottle, vegan pickled polaroid Odd Future sustainable. PBR&B disrupt DIY Banksy Odd Future. Synth chia XOXO, meditation selvage health goth flexitarian tilde cornhole. Artisan ethical tofu mustache asymmetrical, direct trade American Apparel crucifix Bushwick cray organic hoodie. Pork belly 8-bit trust fund, shabby chic heirloom fap blog put a bird on it fanny pack. Twee Truffaut squid, salvia vinyl American Apparel Thundercats seitan sustainable.</p>
</div> <!-- end of site-wrap -->
/*-------stylize navigation for desired effect---------*/
.navigation {
list-style: none;
background: #92d3b3; /*light green */
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*hides nav behind content */
z-index: 0;
/*get rid of color gap on top of menu*/
margin-top: 0;
}
a {
text-decoration:none;
color: #ffffff; /*white*/
}
li.nav-item {
padding: 20px;
font-size: 22px;
}
/*--------end of navigation styling--------*/
.site-wrap {
min-width: 100%;
min-height: 100%;
background-color: #ffffff; /* white */
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
padding: 4em; /*spaces out content from hamburger*/
}
/*----stylize nav-trigger actions and looks-----*/
/*hide the checkbox*/
.nav-trigger {
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/*nav stays in the same spot as user scrolls*/
position: fixed;
/*position hamburger menu*/
top: 15px;
left: 15px;
/*z-index needs to be 1 higher than site-wrap*/
z-index: 2;
width: 30px;
height: 30px;
/*changing to pointer indicates interactivity*/
cursor: pointer;
color: #111111;
}
/*styling to create "hamburger" icon (refer to notes)*/
.hidden_nav:before {
content: "";
position: absolute;
top: 1em;
width: 2em;
height: .25em;
border-top: .7em double #000;
border-bottom: 0.25em solid #000;
z-index: 3;
}
/*the following lines make the effect work*/
/*below styling controls label position when menu opens- add 15px, because we did left:15px in label[for="nav-trigger"]*/
/*uses adjacent sibling selector (+)--> nav-trigger:checked must come first so label moves after checkbox is activated*/
.nav-trigger:checked + label {
left: 200px;
}
/*ensures that the site-wrap is pushed to the right*/
/*uses general sibling selector (~) to target site wrap after nav-trigger gets activated*/
.nav-trigger:checked ~ .site-wrap {
left: 180px;
}
/*add slight transition to effect*/
.nav-trigger + label, .site-wrap {
transition: left 0.2s;
}
/*keep site-wrap from scrolling across window from left to right when menu is opened*/
body {
overflow-x: hidden;
}
/*----end of styling navigation actions and looks----*/
/*---end of what is required for sliding hamburger drawer effect--*/
p {
padding-right: 120px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.