Skip to content

Instantly share code, notes, and snippets.

@Grawl

Grawl/index.html

Created December 6, 2018 08:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Grawl/d53df427381541fa6d5acfa233aeccb9 to your computer and use it in GitHub Desktop.
Save Grawl/d53df427381541fa6d5acfa233aeccb9 to your computer and use it in GitHub Desktop.
Download ZIP
Off-Canvas navigation without JS
Raw
index.html
<html>
<body>
<input
type='checkbox'
id='nav-off-canvas'
class='offCanvas-model'
>
<div class='offCanvas-layer'>
<p>navigation</p>
<label
for='nav-off-canvas'
class='offCanvas-button hamburger'
>
<span class='offCanvas-buttonBox hamburger-box'>
<span class='offCanvas-buttonInner hamburger-inner'></span>
</span>
<span class='show-for-sr'>
{{- 'nav' -}}
</span>
</label>
</div>
<input
type='checkbox'
id='filters-off-canvas'
class='offCanvas-model'
>
<div class='offCanvas-layer'>
<p>filtration</p>
<label
for='filters-off-canvas'
class='offCanvas-button hamburger'
>
<span class='offCanvas-buttonBox hamburger-box'>
<span class='offCanvas-buttonInner hamburger-inner'></span>
</span>
<span class='show-for-sr'>
{{- 'nav' -}}
</span>
</label>
</div>
<div class='layout-wrapper offCanvas-backgroundLayer'>
<label
for='filters-off-canvas'
class='offCanvas-button hamburger'
>
<span class='offCanvas-buttonBox hamburger-box'>
<span class='offCanvas-buttonInner hamburger-inner'></span>
</span>
<span class='show-for-sr'>
{{- 'nav' -}}
</span>
</label>
</div>
</body>
</html>
Raw
off-canvas-without-js.sass
$off-canvas-layer-width: 300px
=off-canvas-model-watch-button-active-state
%off-canvas-toggle-button-inner_active
@extend %off-canvas-toggle-button-inner_active-hamburger
=off-canvas-checked-state
&:checked
+ %off-canvas-layer-visible
@extend %off-canvas-layer-visible-style
~ %off-canvas-background-layer-hidden
@extend %off-canvas-background-layer-hidden-style
~ %off-canvas-background-layer-hidden,
~ %off-canvas-layer-visible
@content
=off-canvas-toggles-model-watch
&[for='nav-off-canvas']
@extend %nav-off-canvas-toggle-button_active
&[for='filters-off-canvas']
@extend %filters-off-canvas-toggle-button_active
=off-canvas-model-watch
&[id='nav-off-canvas']
+off-canvas-checked-state
%nav-off-canvas-toggle-button_active
+off-canvas-model-watch-button-active-state
&[id='filters-off-canvas']
+off-canvas-checked-state
%filters-off-canvas-toggle-button_active
+off-canvas-model-watch-button-active-state
%off-canvas-layer-visible-style
transform: translateX(0)
%off-canvas-background-layer-hidden-style
transform: translateX(-$off-canvas-layer-width)
overflow: hidden
%off-canvas-toggle-button-inner_active-hamburger
+hamburger-inner_active_elastic
.offCanvas
&-model
display: none
+off-canvas-model-watch
&-layer
@extend %off-canvas-layer-visible
fixed: top right
width: $off-canvas-layer-width
height: 100%
transform: translateX($off-canvas-layer-width)
transition: transform 0.5s
&-backgroundLayer
@extend %off-canvas-background-layer-hidden
transform: translateX(0)
transition: transform 0.5s
&-button
z-index: 11
font-size: 0.75rem
font-weight: 500
background-color: initial
transition: background-color 0.3s, transform 0.3s
html:root &
display: flex
flex-flow: row
align-items: center
margin: 0
+off-canvas-toggles-model-watch
&-buttonBox
display: block
&-buttonInner
@extend %off-canvas-toggle-button-inner_active
+hamburger-inner_elastic
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment