input(type="checkbox" id="check")
label(for="check")
svg(viewBox="0 0 30 30" width="30" height="30")
path#one(
d="M4 10h22M4"
stroke="#fff"
stroke-width="2"
stroke-linecap="round"
)
path#two(
d="M4 20h22M4"
stroke="#fff"
stroke-width="2"
stroke-linecap="round"
)
| Click me
aside
.top
h2 Title
ul
- for (var x=0;x<5;x++)
li Nav text
.bottom
p © 2019 by Andrej Sharapov
article
.wrapper
.content
h1 Off-Canvas menu on Pure CSS
p Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident rerum unde porro consequatur doloribus ex distinctio similique, voluptas repellendus voluptates nam dolorum! Repudiandae maxime, itaque vero dolorem distinctio inventore explicabo!
p Odio eaque cum blanditiis esse, earum saepe voluptate quae aliquid possimus facere non qui illo necessitatibus eveniet ab sit quaerat. Atque animi nulla veritatis molestiae qui ipsam ut assumenda facilis?
.footer
p Follow me
a(href="https://twitter.com/andrejsharapov" target="_blank" title="") in Twitter
View Compiled
@import url('https://fonts.googleapis.com/css?family=Signika');
$light: #fff;
$dark: #21213d;
$col1: #1cc7d0;
$col2: #2ede98;
$col3: #3369e7;
$time: 500ms;
$cubic: cubic-bezier(0.06, 0.63, 0.91, 0.66);
$aside: 25vw;
$size: 0.25em;
*,
::before,
::after {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
overflow: hidden;
display: flex;
line-height: 1.5;
font-family: 'Signika', cursive;
font-weight: 300;
background-color: $dark;
color: $light;
}
a {
text-decoration: none;
color: $col3;
}
#check {
display: none;
+ label {
position: absolute;
top: $size * 4;
left: $size * 4;
z-index: 1;
display: flex;
align-items: center;
cursor: pointer;
&::before {
position: absolute;
content: '';
top: -1em;
left: -1em;
width: 100vw;
height: 100vh;
background-color: rgba($dark, 0.5);
transform-origin: 50% 50%;
transform: scale(1.3);
visibility: hidden;
opacity: 0;
transition: all $time / 2 linear;
}
svg {
margin-right: 0.5em;
path {
transform-origin: 35% 50%;
transition: transform $time / 3 $cubic;
}
}
}
&:checked + label {
~ aside {
transform: none;
}
&::before {
left: calc(25vw - 1em);
transform: scale(1);
visibility: visible;
opacity: 1;
@media (max-width: 576px) {
left: calc(50vw - 1em);
}
}
svg {
#one {
transform: rotate(45deg);
}
#two {
transform: rotate(-45deg);
}
}
}
&:checked + label {
~ article {
z-index: -1; // set value in case of position transform-origin: x -* %
transform: translateX(25vw) scale(0.7);
border-radius: $size;
user-select: none;
pointer-events: none;
}
}
}
aside,
article {
padding: ($size * 10) ($size * 4) $size;
transition: all $time / 2 $cubic;
}
aside {
position: absolute;
width: $aside;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
background-image: linear-gradient(
45deg,
$col3,
$col2
);
transform: translateX(-100%);
@media (max-width: 576px) {
width: $aside * 2;
}
}
article {
position: relative;
transform-origin: 10% 50%; // change for position
width: 100%;
background-image: linear-gradient(
45deg,
$col1,
$col2
);
.wrapper {
margin: auto;
padding: 2em;
max-width: 90%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
h1 {
margin: 0;
}
.footer {
text-align: right;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.