Skip to content

Instantly share code, notes, and snippets.

@dhcole

dhcole/index.html

Last active December 16, 2015 03:19
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save dhcole/5368613 to your computer and use it in GitHub Desktop.
Save dhcole/5368613 to your computer and use it in GitHub Desktop.
Download ZIP
Layout for CSS-only slide-out mobile menu.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<style>
body {
margin: 0;
}
body.menu #menu {
opacity: 1;
-webkit-transition: opacity 0 0;
-moz-transition: opacity 0 0;
-ms-transition: opacity 0 0;
-o-transition: opacity 0 0;
transition: opacity 0 0;
}
body.menu #main {
-webkit-transform: translateX(66%);
-moz-transform: translateX(66%);
-ms-transform: translateX(66%);
-o-transform: translateX(66%);
transform: translateX(66%);
}
#wrapper {
position: relative;
overflow-x: hidden;
}
#menu {
position:absolute;
top: 0;
left: 0;
width: 66%;
bottom: 0px;
background: #369;
color: white;
opacity: 0;
-webkit-transition: opacity 0 0.2s;
-moz-transition: opacity 0 0.2s;
-ms-transition: opacity 0 0.2s;
-o-transition: opacity 0 0.2s;
transition: opacity 0 0.2s;
}
#main {
position: relative;
min-height: 100%;
background: #eee;
box-shadow: -4px 0px 5px rgba(0,0,0,0.5);
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-ms-transition: -ms-transform 0.2s;
-o-transition: -o-transform 0.2s;
transition: transform 0.2s;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
#content { padding: 20px; }
#bar {
height: 20px;
padding: 10px;
background: #333;
}
#bar a { color: white; }
</style>
</head>
<body><div id="wrapper">
<div id="menu">
<ul>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
</div>
<div id="main">
<div id="bar">
<a id="show" href="#">Menu</a>
</div>
<div id="content">
<h1>A great header</h1>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
<p>With some content below it that is long enough to wrap around a few lines or so.</p>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$('#show').click(function(e) {
$('body').toggleClass('menu');
return false;
});
</script>
</div></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment