Instantly share code, notes, and snippets.
Created
August 29, 2020 13:29
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save sundlee/0b957bbb0b1665b72d4b6c9b6dfe73e8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<style> | |
/* Base styles */ | |
body { | |
margin: 0; | |
padding: 0; | |
background: #232323; | |
color: #cdcdcd; | |
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji | |
} | |
#menuToggle { | |
display: block; | |
position: relative; | |
top: 50px; | |
left: 50px; | |
z-index: 1; | |
user-select: none; | |
} | |
#menuToggle a { | |
text-decoration: none; | |
color: #232323; | |
transition: color 0.3s ease; | |
} | |
#menuToggle a:hover { | |
color: #4f7794; | |
} | |
/* The hamburger button hidden inside an input element */ | |
#menuToggle input { | |
display: block; | |
width: 30px; | |
height: 30px; | |
position: absolute; | |
top: -7px; | |
left: -5px; | |
padding: 0; | |
cursor: pointer; | |
opacity: 0; /* hide this */ | |
z-index: 2; /* and place it over the hamburger */ | |
} | |
#menuToggle label { | |
position: relative; | |
display: block; | |
width: 30px; | |
height: 30px; | |
} | |
#menuToggle label span { | |
display: none; | |
} | |
/* | |
* Hamburger | |
*/ | |
#menuToggle label div { | |
display: block; | |
width: 30px; | |
height: 2px; | |
margin-bottom: 6px; | |
position: relative; | |
background: #cdcdcd; | |
border-radius: 3px; | |
z-index: 1; | |
transform-origin: 4px 0px; | |
transition: all 0.3s ease; | |
} | |
#menuToggle label div:first-child { | |
transform-origin: 0% 100%; | |
} | |
#menuToggle label div:nth-child(2) { | |
transform-origin: 0% 0%; | |
} | |
/* | |
* Change the color of the hamburger when toggled | |
*/ | |
#menuToggle input:checked + label div { | |
background: #232323; | |
} | |
/* | |
* Use absolute positioning to place the menu off-screen | |
*/ | |
#menu { | |
position: absolute; | |
width: 300px; | |
margin: -100px 0 0 -50px; | |
padding: 50px; | |
padding-top: 125px; | |
background: #ededed; | |
list-style-type: none; | |
/* Hide the menu off-screen to the left */ | |
left: -100%; | |
transition: left 0.3s ease; | |
} | |
#menu li { | |
padding: 10px 0; | |
font-size: 22px; | |
} | |
/* | |
* Slide the menu in from left when the input is checked | |
*/ | |
#menuToggle input:checked ~ ul { | |
left: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<nav role="navigation"> | |
<div id="menuToggle"> | |
<!-- | |
hidden checkbox is used as click reciever, | |
so you can use the :checked selector on it. | |
--> | |
<input name="toggle" type="checkbox" /> | |
<label for="toggle"> | |
<span>menu</span> | |
<!-- | |
divs to be styled as a hamburger button | |
--> | |
<div></div> | |
<div></div> | |
<div></div> | |
</label> | |
<!-- | |
the menu that will slide in from the left | |
--> | |
<ul id="menu"> | |
<a href="#"> | |
<li>Home</li> | |
</a> | |
<a href="#"> | |
<li>About</li> | |
</a> | |
<a href="#"> | |
<li>Contact</li> | |
</a> | |
</ul> | |
</div> | |
</nav> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment