Author: | svinkle |
---|---|
Views Total: | 6,347 views |
Official Page: | Go to website |
Last Update: | June 15, 2014 |
License: | MIT |
Preview:

Description:
In this post we’re going to create a mobile app-style off-canvas menu that will slide out from the edge of your screen and push the main content to the right. No Javascript (jQuery) needed.
How to use it:
Create an off-canvas navigation menu using Html unordered list.
<nav class="site-menu"> <h2>Menu</h2> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> </nav>
Create links to open and close the off-canvas menu.
<a href="#site-canvas" class="toggle-nav">≡</a> <a href="#" class="close-canvas"></a>
Insert other contents into the Html document. The full Html should be like this.
<div class="site-wrapper"> <div class="site-canvas" id="site-canvas"> <nav class="site-menu"> <h2>Menu</h2> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> </nav> <div class="site-content"> <header class="header"> <a href="#site-canvas" class="toggle-nav">≡</a> <h1>Off-Canvas Menu with Pure CSS</h1> </header> <div class="content"> Your Main Content Goese Here </div> </div> <a href="#" class="close-canvas"></a> </div> </div>
The required CSS/CSS3 styles to enable the off-canvas menu. Tweak the CSS or add your own styles as you wish.
.site-wrapper { height: 800px; /* Temp */ overflow: hidden; position: relative; width: 100%; } .site-canvas { height: 100%; position: relative; width: 100%; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: 300ms ease all; -moz-transition: 300ms ease all; -ms-transition: 300ms ease all; -o-transition: 300ms ease all; transition: 300ms ease all; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .site-canvas--active, #site-canvas:target { -webkit-transform: translateX(300px); -moz-transform: translateX(300px); -ms-transform: translateX(300px); -o-transform: translateX(300px); transform: translateX(300px); -webkit-transform: translate3d(300px, 0, 0); -moz-transform: translate3d(300px, 0, 0); -ms-transform: translate3d(300px, 0, 0); -o-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .site-menu { background: #e74c3c; color: White; height: 100%; left: -300px; padding: 15px; position: absolute; top: 0; width: 300px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .site-content { position: relative; } .close-canvas { background-color: transparent; bottom: 0; cursor: pointer; display: none; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; } #site-canvas:target .close-canvas { display: block; } /* Extra... */ a { color: CornflowerBlue; } .header { background-color: #2c3e50; padding: 15px; position: relative; } .header a { color: White; text-decoration: none; } .toggle-nav { font-size: 2.8em; left: .3em; margin-top: -.7em; position: absolute; top: 50%; } h1 { color: White; margin: 0; padding-left: 1em; } .content { padding: 15px; }
how could I implement this in an angularjs app?
I’m having trouble understaing the mechanism. how do I check the button click withtout javascript at all?