Skip to content

Instantly share code, notes, and snippets.

@woodcox

woodcox/PureCSS Fullscreen-Navmenu.scss

Last active April 7, 2021 20:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save woodcox/c1a3d8dc0a8bf92e17dd53ceffbd3bf7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save woodcox/c1a3d8dc0a8bf92e17dd53ceffbd3bf7 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
markup.html
<h1>Your Content</h1>
<div class="outer-menu">
<input class="checkbox-toggle" type="checkbox" />
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
Raw
output.css
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format("truetype");
}
@font-face {
font-family: "Pacifico";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/pacifico/v17/FwZY7-Qmy14u9lezJ-6H6Mw.ttf) format("truetype");
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
font-weight: 300;
}
a {
color: inherit;
text-decoration: none;
}
a:visited, a:hover, a:active {
color: inherit;
text-decoration: none;
}
h1 {
font-family: "Pacifico", cursive;
font-weight: 400;
font-size: 3em;
text-align: center;
}
.outer-menu {
position: fixed;
top: 10vh;
left: 0;
z-index: 1;
}
.outer-menu .checkbox-toggle {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 60px;
height: 60px;
opacity: 0;
}
.outer-menu .checkbox-toggle:checked + .hamburger > div {
transform: rotate(135deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before {
top: 0;
transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
pointer-events: auto;
visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
transform: scale(1);
transition-duration: 0.75s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
.outer-menu .checkbox-toggle:hover + .hamburger {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
.outer-menu .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 0.5em 1em;
background: rgba(33, 150, 243, 0.75);
border-radius: 0 0.12em 0.12em 0;
cursor: pointer;
transition: box-shadow 0.4s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #fefefe;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .hamburger > div:before, .outer-menu .hamburger > div:after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
left: 0;
width: 100%;
height: 2px;
background: inherit;
transition: all 0.4s ease;
}
.outer-menu .hamburger > div:after {
top: 10px;
}
.outer-menu .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
visibility: hidden;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
outline: 1px solid transparent;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .menu > div {
width: 200vw;
height: 200vw;
color: #fefefe;
background: rgba(41, 98, 255, 0.97);
border-radius: 50%;
transition: all 0.4s ease;
flex: none;
transform: scale(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .menu > div > div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
overflow-y: auto;
flex: none;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .menu > div > div > ul {
list-style: none;
padding: 0 1em;
margin: 0;
display: block;
max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
padding: 0;
margin: 1em;
font-size: 24px;
display: block;
}
.outer-menu .menu > div > div > ul > li > a {
position: relative;
display: inline;
cursor: pointer;
transition: color 0.4s ease;
}
.outer-menu .menu > div > div > ul > li > a:hover {
color: #e5e5e5;
}
.outer-menu .menu > div > div > ul > li > a:hover:after {
width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
content: "";
position: absolute;
z-index: 1;
bottom: -0.15em;
left: 0;
width: 0;
height: 2px;
background: #e5e5e5;
transition: width 0.4s ease;
}
Raw
PureCSS Fullscreen-Navmenu.scss
$hamburger-menu-size: 60px;
$hamburger-menu-border-radius: .12em;
$hamburger-menu-bg-color: rgba(33, 150, 243, 0.75);
$hamburger-menu-line-height: 2px;
$hover-line-height: $hamburger-menu-line-height;
$main-color: #fefefe;
$hover-color: darken($main-color,
10%);
$content-bg-color: rgba(41, 98, 255, 0.97);
$anim-duration: 0.4s;
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format("truetype");
}
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/pacifico/v17/FwZY7-Qmy14u9lezJ-6H6Mw.ttf) format("truetype");
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
font-weight: 300;
}
a {
color: inherit;
text-decoration: none;
&:visited, &:hover, &:active {
color: inherit;
text-decoration: none;
}
}
h1 {
font-family: "Pacifico", cursive;
font-weight: 400;
font-size: 3em;
text-align: center;
}
.outer-menu {
position: fixed;
top: 10vh;
left: 0;
z-index: 1;
.checkbox-toggle {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: $hamburger-menu-size;
height: $hamburger-menu-size;
opacity: 0;
&:checked {
+ .hamburger > div {
transform: rotate(135deg);
&:before {
top: 0;
transform: rotate(90deg);
}
&:after {
top: 0;
transform: rotate(90deg);
opacity: 0;
}
}
~ .menu {
pointer-events: auto;
visibility: visible;
> div {
transform: scale(1);
transition-duration: 0.75s;
> div {
opacity: 1;
transition: opacity $anim-duration ease $anim-duration;
}
}
}
}
&:hover + .hamburger {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
&:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
}
.hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: $hamburger-menu-size;
height: $hamburger-menu-size;
padding: 0.5em 1em;
background: $hamburger-menu-bg-color;
border-radius: 0 $hamburger-menu-border-radius $hamburger-menu-border-radius 0;
cursor: pointer;
transition: box-shadow $anim-duration ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
> div {
position: relative;
flex: none;
width: 100%;
height: $hamburger-menu-line-height;
background: $main-color;
transition: all $anim-duration ease;
display: flex;
align-items: center;
justify-content: center;
&:before,
&:after {
content: "";
position: absolute;
z-index: 1;
top: -$hamburger-menu-size / 6;
left: 0;
width: 100%;
height: $hamburger-menu-line-height;
background: inherit;
transition: all $anim-duration ease;
}
&:after {
top: $hamburger-menu-size / 6;
}
}
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
visibility: hidden;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
outline: 1px solid transparent;
display: flex;
align-items: center;
justify-content: center;
> div {
width: 200vw;
height: 200vw;
color: $main-color;
background: $content-bg-color;
border-radius: 50%;
transition: all $anim-duration ease;
flex: none;
transform: scale(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
> div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity $anim-duration ease;
overflow-y: auto;
flex: none;
display: flex;
align-items: center;
justify-content: center;
> ul {
list-style: none;
padding: 0 1em;
margin: 0;
display: block;
max-height: 100vh;
> li {
padding: 0;
margin: 1em;
font-size: 24px;
display: block;
> a {
position: relative;
display: inline;
cursor: pointer;
transition: color $anim-duration ease;
&:hover {
color: $hover-color;
&:after {
width: 100%;
}
}
&:after {
content: "";
position: absolute;
z-index: 1;
bottom: -0.15em;
left: 0;
width: 0;
height: $hover-line-height;
background: $hover-color;
transition: width $anim-duration ease;
}
}
}
}
}
}
}
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment