Created
August 10, 2016 05:07
-
-
Save blivesta/a262f494ec5f01f9595e6c3975385710 to your computer and use it in GitHub Desktop.
simple-drawer
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="ja"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Document</title> | |
<meta name="viewport" content="width=device-width,initial-scale=1"> | |
<style> | |
* { | |
margin: 0; | |
position: 0; | |
box-sizing: border-box; | |
} | |
ul { | |
padding: 0; | |
} | |
main p { | |
margin-top: 300px; | |
} | |
main p:first-child { | |
margin: 0; | |
} | |
.toggle { | |
position: fixed; | |
top: 20px; | |
left: 20px; | |
z-index: 2; | |
} | |
.nav { | |
position: fixed; | |
top: 0; | |
left: -280px; | |
z-index: 1; | |
width: 280px; | |
height: 100vh; | |
background-color: rgba(0, 0, 0, .7); | |
transition: left .2s ease-out; | |
} | |
.nav ul { | |
margin: 0; | |
width: 100%; | |
height: 100%; | |
overflow-y: scroll; | |
-webkit-overflow-scrolling: touch; | |
} | |
.nav li { | |
list-style: none; | |
margin-top: 100px; | |
text-align: center; | |
color: #fff; | |
} | |
.drawer-open-body { | |
position: fixed; | |
width: 100vw; | |
height: 100vh; | |
} | |
.drawer-open-nav { | |
left: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div data-drawer> | |
<main> | |
<p>text1</p> | |
<p>text2</p> | |
<p>text3</p> | |
<p>text4</p> | |
<p>text5</p> | |
<p>text6</p> | |
<p>text7</p> | |
<p>text8</p> | |
<p>text9</p> | |
<p>text10</p> | |
</main> | |
<button data-drawer-toggle class="toggle">メニュー</button> | |
<nav class="nav" data-drawer-nav> | |
<ul> | |
<li>navigation1</li> | |
<li>navigation2</li> | |
<li>navigation3</li> | |
<li>navigation4</li> | |
<li>navigation5</li> | |
<li>navigation6</li> | |
<li>navigation7</li> | |
<li>navigation8</li> | |
<li>navigation9</li> | |
<li>navigation10</li> | |
</ul> | |
</nav> | |
</div> | |
<script> | |
var currentPosition; | |
var state = false; | |
var elBody = document.querySelector('[data-drawer]'); | |
var elToggle = document.querySelector('[data-drawer-toggle]'); | |
var elNav = document.querySelector('[data-drawer-nav]'); | |
var bodyOpenClass = 'drawer-open-body' | |
var navOpenClass = 'drawer-open-nav' | |
elToggle.addEventListener('click', toggle, false); | |
function open () { | |
currentPosition = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; | |
elBody.style.top = -currentPosition + 'px'; | |
elBody.classList.add(bodyOpenClass); | |
elNav.classList.add(navOpenClass); | |
return state = true; | |
} | |
function close () { | |
elBody.style.top = 0; | |
elBody.classList.remove(bodyOpenClass); | |
elNav.classList.remove(navOpenClass); | |
window.scrollTo(0, currentPosition); | |
return state = false; | |
} | |
function toggle () { | |
if (state === false) { | |
return open(); | |
} else { | |
return close(); | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment