Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Instead of Off Canvas, what about OnCanvas? Sliding menus with no DOM acrobatics! Semantic markup, light JavaScript, highly flexible.
<section id='main' role='main'>
<header>
<a href='#menu' id='show-menu'>Menu</a>
<h1 id='logo'>Hello!</h1>
</header>
content goes here
<footer></footer>
</section>
<div id='menu'>
<ul>
<li>this thing</li>
<li>this thing</li>
<li>this thing</li>
</ul>
</div>

OnCanvas

Note: this demo is a work in progress. It's ugly and is only intended to show the most basic functionality of this technique

Instead of Off Canvas, what about OnCanvas? Sliding menus with no DOM acrobatics! Semantic markup, light JavaScript, highly flexible.

View and edit it live on Codepen.

$('#show-menu').on('click', function(e){
e.preventDefault();
$('body').toggleClass('show-menu');
});
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
html{
width: 100%;
height: 100%;
}
body{
margin: 0;
width: 100%;
height: 100%;
background-color: #333;
}
#main{
background-color: white;
width: 100%;
height: 100%;
padding: .5em;
z-index: 10;
position: relative;
}
#menu{
position: absolute;
top: 0;
right: 0;
z-index: 20;
}
#menu ul{
margin: 0;
padding: 0;
}
#menu ul li{
list-style-type: none;
float: left;
padding: .5em;
}
#show-menu{
position: absolute;
top: 0;
right: 0;
display: none;
padding: .5em;
}
@media screen and (max-width: 600px){
#show-menu{
display: block;
}
#menu{
z-index: 5;
height: 100%;
width: 50%;
background-color: blue;
}
#menu li{
clear: both;
margin-left: 10%;
}
body.show-menu #main{
margin-left: -50%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment