Head over to Github and download the scss and/or css files.
It is important that the markup is in the same order as below due to the use of the css sibling selector. If you add additional containers to your markup you need to update the css accordingly.
<div class="pure-container" data-effect="pure-effect-slide">
<input type="checkbox" id="pure-toggle-left" class="pure-toggle" data-toggle="left">
<label class="pure-toggle-label" for="pure-toggle-left" data-toggle-label="left">
<span class="pure-toggle-icon"></span>
</label>
<div class="pure-drawer" data-position="left">
Put your off canvas content here
</div>
<div class="pure-pusher-container">
<div class="pure-pusher">
Put your site content here
</div>
</div>
<label class="pure-overlay" for="pure-toggle-left" data-overlay="left"></label>
</div>
<div class="pure-container" data-effect="pure-effect-1">
<input type="checkbox" id="pure-toggle-left" class="pure-toggle" data-toggle="left">
<input type="checkbox" id="pure-toggle-right" class="pure-toggle" data-toggle="right">
<input type="checkbox" id="pure-toggle-top" class="pure-toggle" data-toggle="top">
<label class="pure-toggle-label" for="pure-toggle-left" data-toggle-label="left">
<span class="pure-toggle-icon"></span>
</label>
<label class="pure-toggle-label" for="pure-toggle-right" data-toggle-label="right">
<span class="pure-toggle-icon"></span>
</label>
<label class="pure-toggle-label" for="pure-toggle-top" data-toggle-label="top">
<span class="pure-toggle-icon"></span>
</label>
<div class="pure-drawer" data-position="left">
Put your off canvas content for the left drawer here
</div>
<div class="pure-drawer" data-position="right">
Put your off canvas content for the right drawer here
</div>
<div class="pure-drawer" data-position="top">
Put your off canvas content for the top drawer here
</div>
<div class="pure-pusher-container">
<div class="pure-pusher">
Put your site content here
</div>
</div>
<label class="pure-overlay" for="pure-toggle-left" data-overlay="left"></label>
<label class="pure-overlay" for="pure-toggle-right" data-overlay="right"></label>
<label class="pure-overlay" for="pure-toggle-top" data-overlay="top"></label>
</div>
<div class="pure-container" data-effect="pure-effect-slide">
data-effect: This is where you enter your desired effect.
Choose between: slide, reveal, slideAlong, reverseSlide, scaleDown, scaleUp, scaleRotate, fall, push, bounce, fade, flipX, flipY and zoom.
<div class="pure-drawer" data-position="left">
data-position:Where you want you off-canvas drawer to appear. Legal values are 'left', 'right' and 'top'.
<input type="checkbox" id="pure-toggle-left" class="pure-toggle" data-toggle="left">
<label class="pure-toggle-label" for="pure-toggle-left" data-toggle-label="left">
<span class="pure-toggle-icon"></span>
</label>
data-toggle:Used to target the the toggle in css. Must match the value of data-position.
data-toggle-label:Used to target the the toggle label in css. Must match the value of data-toggle.
pure-toggle-icon:This controlls the hamburger icon graphics and animation. If you want to use your own custom icon just remove this span
<label class="pure-overlay" for="pure-toggle-left" data-overlay="left"></label>
data-overlay:Used to target the the overlay in css. Must match the value of data-position.
// Point $show-drawer to one of the variables in _pure-drawer-breakpoints.scss to control which breakpoints drawers should appear.
// $show-drawer: $small-only;
/**************
## Animation ##
**************/
// $pure-drawer-animation-duration-slide: 500ms;
// $pure-drawer-animation-duration-reveal: 500ms;
// $pure-drawer-animation-duration-slideAlong: 500ms;
// $pure-drawer-animation-duration-reverseSlide: 500ms;
// $pure-drawer-animation-duration-scaleDown: 500ms;
// $pure-drawer-animation-duration-scaleUp: 500ms;
// $pure-drawer-animation-duration-scaleRotate: 500ms;
// $pure-drawer-animation-duration-fall: 500ms;
// $pure-drawer-animation-duration-push: 500ms;
// $pure-drawer-animation-duration-bounce: 1000ms;
// $pure-drawer-animation-duration-fade: 1000ms;
// $pure-drawer-animation-duration-flipX: 1000ms !default;
// $pure-drawer-animation-duration-flipY: 1000ms !default;
// $pure-drawer-animation-duration-zoom: 1000ms !default;
/************
## Toggler ##
************/
// $toggler-color: lighten(#374c5d, 20%);
// $toggler-checked-color: #1fc08e;
// $toggler-focus-color: #1fc08e;
/***********
## Drawer ##
***********/
// $drawer-bgcolor: #374c5d;
// For 'left' and 'right' positioned drawers.
// $drawer-width-small: 100%;
// $drawer-width-medium: 300px;
// $drawer-width-large: 300px;
// For 'top' positioned drawers.
// $drawer-height-small: 100%;
// $drawer-height-medium: 100%;
// $drawer-height-large: 100px;
/***********
## Pusher ##
***********/
// $pusher-bgcolor: #fff;
/*******************
## Pusher Overlay ##
*******************/
// $overlay-bgcolor: rgba(0,0,0,0.4);
Media queries can be easily customized by changing the variable values in _pure-drawer-breakpoints.scss.
// Media Query Ranges
$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$screen: "only screen";
$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";
$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
$large-down: "#{$screen} and (max-width:#{upper-bound($medium-range)})";
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
Use these media queries with the variables specified above.
@media #{$small-up} { }
@media #{$small-only} { }
@media #{$medium-up} { }
@media #{$medium-only} { }
@media #{$large-up} { }
@media #{$large-only} { }
Coming at a later stage
There is no javascript! But feel free to enhance the functionality further with some awesome javascript code.
Works in all modern browsers. (IE10+, Chrome, Firefox, Safari).
Gracefully degrades in IE9. (Requires Modernizr).
Not yet tested on Windows Phone.