Skip to content

Instantly share code, notes, and snippets.

@byrney

byrney/topdrawer.html

Created April 1, 2017 12:48
Show Gist options
  • Save byrney/d7832667cf29e0dba6de3988db3a2402 to your computer and use it in GitHub Desktop.
Save byrney/d7832667cf29e0dba6de3988db3a2402 to your computer and use it in GitHub Desktop.
Download ZIP
Hiding a settings page behind the main screen
Raw
topdrawer.html
<html>
<head>
<style>
#overlay {
}
.transform-delay {
-webkit-transition-duration: 1.25s;
transition-duration: 1.25s;
}
.open {
transform: translate3d(0, 64px, 0);
-webkit-transform: translate3d(0, 64px, 0);
-webkit-box-shadow: -5px 0px 14px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -5px 0px 14px 0px rgba(0,0,0,0.75);
box-shadow: -5px 0px 14px 0px rgba(0,0,0,0.75);
}
</style>
</head>
<body>
<div id='content' style='position:absolute;top:0;left:0;right:0;bottom:0;background:grey;'>
<div id='background' style='position:absolute;width:100%;height:100%;background:green' >
<input placeholder='background'/>
</div>
<div id='overlay' class='transform-delay' style='position:absolute;background:red;height:100%;width:100%' >
<h1> overlay </h1>
<button id='open-button'>Open</button>
</div>
</div>
<script>
var button = document.getElementById('open-button')
button.onclick = function(e) {
var overlay = document.getElementById('overlay');
var cl = overlay.classList;
if (cl.contains('open')) {
cl.remove('open');
button.value = "open";
} else {
cl.add('open');
button.value = "close";
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment