Skip to content

Instantly share code, notes, and snippets.

@ff6347

ff6347/index.html

Created April 3, 2020 05:06
Show Gist options
  • Save ff6347/d53d2ad25f9dcd02780a27e443711a3f to your computer and use it in GitHub Desktop.
Save ff6347/d53d2ad25f9dcd02780a27e443711a3f to your computer and use it in GitHub Desktop.
Download ZIP
burger menu with html and css #css #html
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<style>
/**
* Based on
* https://codepen.io/erikterwan/pen/EVzeRP
* Made by Erik Terwan
* MIT License
*/
.is-hidden {
display: none;
}
.navbar-burger {
display: block;
position: relative;
top: 10px;
left: 10px;
z-index: 1;
}
.navbar-burger span {
display: block;
width: 33px;
height: 1px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 0px;
z-index: 1;
transform-origin: 0px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.navbar-burger-toggle {
cursor: pointer;
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/* Fix hamburger button position. */
/* Hamburger/X animation (1/3). */
.navbar-burger-toggle:checked + .navbar-burger span {
opacity: 1;
transform: rotate(45deg) translate(-9px, -8px);
background: #232323;
}
/* Hamburger/X animation (1/3). */
.navbar-burger-toggle:checked + .navbar-burger span:nth-child(1) {
transform-origin: 0% 0%;
}
/* Hamburger/X animation (2/3). */
.navbar-burger-toggle:checked + .navbar-burger span:nth-child(2) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/* Hamburger/X animation (3/3). */
.navbar-burger-toggle:checked + .navbar-burger span:nth-child(3) {
transform-origin: 0% 100%;
transform: rotate(-45deg) translate(0, -1px);
}
/* Display menu when it's checked. */
.navbar-burger-toggle:checked ~ .navbar-menu {
display: block;
opacity: 1;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: opacity 0.75s ease, transform 0.5s;
}
.navbar-menu {
opacity: 0;
/*display: none;*/
transform: translate(-100%, 0);
transition: opacity 0.75s ease, transform 0.5s;
}
nav {
position: absolute;
/*background: red;*/
}
</style>
</head>
<body>
<nav>
<input type="checkbox" role='button'
aria-label='menu'
aria-expanded='false'
class='navbar-burger-toggle is-hidden' id="navbar-burger-toggle">
<label for="navbar-burger-toggle" class="navbar-burger">
<span></span>
<span></span>
<span></span>
</label>
<div class="navbar-menu">
<a class="navbar-item"> one</a>
<a class="navbar-item"> two</a>
<a class="navbar-item"> three</a>
</div>
</nav>
</body>
</html>
Raw
package.json
{
"name": "burger-menu",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "reload -p 3000 -b",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"reload": "^3.0.4"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment