Created
March 13, 2013 10:54
-
-
Save devlint/5151068 to your computer and use it in GitHub Desktop.
Off-Canvas - Just a simple and minimal 'off-canvas' template with css3 translate3d & jQuery.
Needs: - Font Awesome for icons
- jQuery & normalize.css components
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> | |
| <!--[if lt IE 10]> <html class="lt-ie10"> <![endif]--> | |
| <!--[if gt IE 10]><!--> <html> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame --> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>OFF-CANVAS</title> | |
| <meta name="description" content=""> | |
| <meta name="author" content=""> | |
| <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="../components/normalize-css/normalize.css"> | |
| <link rel="stylesheet" href="../css/screen.css"> | |
| <!--[if lt IE 9]><script src="../components/html5shiv-dist/html5shiv.js"></script><![endif]--> | |
| </head> | |
| <body> | |
| <header data-role="navigation"> | |
| <button class="button left showPanel icon-menu-1" data-dir="left" data-cover="false"></button> | |
| <button class="button right showPanel icon-info-circle" data-dir="right" data-cover="true"></button> | |
| <span>OFF-CANVAS</span> | |
| </header> | |
| <main data-role="page"> | |
| <p><strong>Created with:</strong><br> | |
| • <a href="https://github.com/c2is/c2is-onetea">OneTea</a> by c2iS<br> | |
| • <a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a> by Dave Gandylicense | |
| </p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed mauris libero. Phasellus urna augue, sollicitudin sed tempus at, cursus id purus. Proin nisl est, venenatis at gravida ac, dignissim accumsan elit. Integer fringilla ante sit amet justo volutpat laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at dapibus felis. Praesent semper congue dolor, non feugiat nulla fermentum rutrum.</p> | |
| <p>Integer porttitor tristique lorem tincidunt scelerisque. Pellentesque malesuada nulla quis magna facilisis ultrices. Sed sed arcu sit amet leo rutrum gravida. Quisque sed lorem eget diam volutpat luctus ut eget odio. Phasellus ligula nibh, volutpat quis pulvinar id, interdum at mi. Quisque et libero lectus. Fusce dictum sem sit amet tortor ornare auctor. Duis erat arcu, adipiscing ac posuere in, porttitor nec ipsum. Nulla molestie porttitor lobortis. Nunc vitae nisi nec leo sagittis tincidunt in eget urna.</p> | |
| <p>Sed vel ante sem. In hac habitasse platea dictumst. Mauris eget enim justo, eu hendrerit leo. Donec risus justo, tristique at aliquam eget, consequat vitae tortor. Proin porttitor consectetur vestibulum. Nullam tristique sem in augue molestie ut commodo quam vulputate. Nunc porttitor faucibus elementum. Maecenas sapien magna, consectetur eu dignissim eget, ullamcorper quis erat. Donec id lectus sed quam posuere aliquam eget eget risus. Donec massa mauris, accumsan eget suscipit non, faucibus et justo. Quisque enim est, fringilla at tempus ac, convallis quis justo. Aliquam turpis ante, aliquam vitae euismod eget, semper vitae ligula. Duis mattis ornare tellus adipiscing ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras iaculis nunc quis ipsum euismod scelerisque.</p> | |
| <p>Phasellus sed dui nec enim viverra ultrices eget in leo. Vivamus erat risus, accumsan sit amet tincidunt id, pulvinar in nibh. Cras nibh nibh, auctor nec egestas vel, luctus vel dui. Sed vestibulum faucibus sem sed vestibulum. Sed quis varius lacus. Pellentesque placerat lectus ac dolor tristique ut commodo ante imperdiet. Nulla facilisi. Proin ac egestas sapien. Etiam interdum commodo urna, a posuere odio consectetur vitae. Quisque imperdiet odio diam.</p> | |
| <p>Suspendisse venenatis viverra nibh, ut eleifend metus aliquet sed. Integer facilisis odio eget nisl posuere quis consequat orci vulputate. Aenean sollicitudin ultricies neque id porta. Praesent nunc ipsum, ornare nec lacinia id, molestie ut libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam leo nibh, ultrices non egestas sit amet, luctus a enim. Maecenas pretium lacus vel tellus ultrices iaculis. Nulla tristique orci id nunc eleifend adipiscing. Donec mauris nisl, viverra nec scelerisque eu, lobortis non eros. Nullam metus erat, porta sit amet vehicula sit amet, varius eleifend nulla. Nulla facilisi.</p> | |
| </main> | |
| <aside data-role="complimentary" id="aLeft"> | |
| <ul> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| <li><a href="#_">consectetur adipiscing</a></li> | |
| </ul> | |
| </aside> | |
| <aside data-role="complimentary" id="aRight"> | |
| <p>Phasellus sed dui nec enim viverra ultrices eget in leo. Vivamus erat risus, accumsan sit amet tincidunt id, pulvinar in nibh. Cras nibh nibh, auctor nec egestas vel, luctus vel dui. Sed vestibulum faucibus sem sed vestibulum. Sed quis varius lacus. Pellentesque placerat lectus ac dolor tristique ut commodo ante imperdiet. Nulla facilisi. Proin ac egestas sapien. Etiam interdum commodo urna, a posuere odio consectetur vitae. Quisque imperdiet odio diam.</p> | |
| </aside> | |
| <footer> | |
| <button class="button icon-up-dir"></button> | |
| <div class="footerHide"> | |
| <p>Suspendisse venenatis viverra nibh, ut eleifend metus aliquet sed. Integer facilisis odio eget nisl posuere quis consequat orci vulputate. Aenean sollicitudin ultricies neque id porta. Praesent nunc ipsum, ornare nec lacinia id, molestie ut libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam leo nibh, ultrices non egestas sit amet, luctus a enim. Maecenas pretium lacus vel tellus ultrices iaculis. Nulla tristique orci id nunc eleifend adipiscing. Donec mauris nisl, viverra nec scelerisque eu, lobortis non eros. Nullam metus erat, porta sit amet vehicula sit amet, varius eleifend nulla. Nulla facilisi.</p> | |
| <p>Phasellus sed dui nec enim viverra ultrices eget in leo. Vivamus erat risus, accumsan sit amet tincidunt id, pulvinar in nibh. Cras nibh nibh, auctor nec egestas vel, luctus vel dui. Sed vestibulum faucibus sem sed vestibulum. Sed quis varius lacus. Pellentesque placerat lectus ac dolor tristique ut commodo ante imperdiet. Nulla facilisi. Proin ac egestas sapien. Etiam interdum commodo urna, a posuere odio consectetur vitae. Quisque imperdiet odio diam.</p> | |
| </div> | |
| <p><a href="https://twitter.com/webdevlint" class="icon-twitter">@webdevlint</a></p> | |
| </footer> | |
| <script src="../components/jquery/jquery.min.js"></script> | |
| <script src="../js/front.js"></script> | |
| <!-- Prompt IE 6 users to install Chrome Frame --> | |
| <!--[if lt IE 7 ]> | |
| <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script> | |
| <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script> | |
| <![endif]--> | |
| </body> | |
| </html> |
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
| $(function() { | |
| var $body = $('body'), | |
| $bt = $('.button'); | |
| $(".showPanel").click( function(){ | |
| var bDirection = $body.attr('data-direction'), | |
| bCover = $body.attr('data-cover'), | |
| isDirection = $(this).data('dir'), | |
| isCover = $(this).attr('data-cover'); | |
| if (bDirection == isDirection && bCover == isCover){ | |
| $body.attr('data-direction', '').attr('data-cover', ''); | |
| $bt.removeClass('activeBt'); | |
| }else{ | |
| $body.attr('data-direction', isDirection).attr('data-cover', isCover); | |
| $bt.removeClass('activeBt'); | |
| $(this).addClass('activeBt'); | |
| } | |
| }); | |
| $("main").click( function(){ | |
| $('body').attr('data-direction', '').attr('data-cover', ''); | |
| $("footer").find('.footerHide').toggleClass('footerShow'); | |
| }); | |
| $("footer").find('.button').click( function(){ | |
| $("footer").find('.footerHide').toggleClass('footerShow'); | |
| }); | |
| }); |
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
| // vars | |
| @widthNav: 15em; | |
| @colorBlue: #4272db; | |
| @colorWhite: #ffffff; | |
| @colorGray0: #666666; | |
| @colorGray1: #C5C5C5; | |
| @colorGray4: #d3d3d3; | |
| @colorGray2: #E5E5E5; | |
| @colorGray3: #ededed; | |
| ._transform3d(@val1, @val2, @val3) { | |
| -webkit-transform:translate3d(@val1, @val2, @val3); | |
| transform:translate3d(@val1, @val2, @val3); | |
| } | |
| ._transitionTransform(@val1, @val2){ | |
| -webkit-transition:-webkit-transform @val1 @val2; | |
| transition:transform @val1 @val2; | |
| } | |
| ._transition(@val) { | |
| -webkit-transition:@val; | |
| -moz-transition:@val; | |
| transition:@val; | |
| } | |
| ._box-sizing(@val){ | |
| -webkit-box-sizing: @val; | |
| -moz-box-sizing: @val; | |
| box-sizing: @val; | |
| } | |
| // commons | |
| @font-face { | |
| font-family: 'fontello'; | |
| src: url("../fonts/fontello.eot?56817156"); | |
| src: url("../fonts/fontello.eot?56817156#iefix") format('embedded-opentype'), url("../fonts/fontello.woff?56817156") format('woff'), url("../fonts/fontello.ttf?56817156") format('truetype'), url("../fonts/fontello.svg?56817156#fontello") format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| *{._box-sizing(padding-box);} | |
| body{background:@colorWhite;font-family: 'Roboto Condensed', sans-serif;font-size:0.95em;color:@colorGray0;overflow-x: hidden;} | |
| ul{list-style:none;margin:0;padding:0;} | |
| a{color: @colorBlue;text-decoration: none;} | |
| // buttons | |
| .button{border: 1px solid @colorGray1;border-radius: 3px;margin: 10px;padding:0;width: 39px;height: 29px;line-height: normal;/*text-indent: -999em;*/background-color: @colorGray2;font-size:18px;._transition(all 350ms ease); | |
| &:hover, &:active, &.activeBt{background-color: @colorGray4;} | |
| } | |
| .left{float: left;} | |
| .right{float: right;} | |
| [class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'fontello'; } | |
| .icon-up-dir:before { content: '\25b4'; } /* '▴' */ | |
| .icon-cog:before { content: '\2699'; } /* '⚙' */ | |
| .icon-info-circle:before { content: '\e705'; } /* '' */ | |
| .icon-twitter:before { content: '\f099'; } /* '' */ | |
| .icon-menu-1:before { content: '\f0c9'; } /* '' */ | |
| .icon-leaf:before { content: '🍂'; } /* '\1f342' */ | |
| // specific position | |
| .icon-twitter:before { position: relative;top: 1px;left: -5px;} /* '' */ | |
| // header && footer | |
| header, footer{position:fixed;background-color:@colorGray3;text-align:center;z-index: 2;} | |
| header{top:0;width:100%;height:50px;line-height:50px;font-weight: bold;border-bottom: 1px solid @colorGray1;} | |
| footer{bottom:0;width:100%;border-top: 1px solid @colorGray1;padding:10px 0; | |
| p{margin:0 1em;} | |
| .button{font-size:18px;height:20px;width:25px;padding-bottom:2px;margin:0;position: absolute;right:10px;bottom:10px; | |
| &:before{margin-top: -2px;display: block;} | |
| } | |
| .footerHide{text-align:left;height:0;overflow:hidden;._transition(all ease 350ms);background:@colorGray4; | |
| &.footerShow{height:15em;overflow: auto;padding:10px 0;margin-bottom: 10px;margin-top:-10px;} | |
| p{margin-bottom:10px;} | |
| } | |
| } | |
| // main + aside | |
| [data-role="page"]{margin:40px 0;position:relative;padding:1em; | |
| p{margin-bottom:1em;line-height:1.3em;} | |
| } | |
| [data-role="complimentary"]{position:fixed;background:#fff;top:50px;bottom:40px;width:@widthNav;overflow: auto; | |
| ul{ | |
| a{display: block;padding: .8em 1em;color: #ccc;border-bottom: 1px solid #444;._transition(all ease 350ms); | |
| &:hover{color: #fff;background-color: #222;} | |
| } | |
| &:last-child{border:0;} | |
| } | |
| p{padding:.5em 1em;} | |
| &#aRight{right:-@widthNav;} | |
| &#aLeft{left:-@widthNav;background: #333333;color: #ccc;} | |
| } | |
| [data-role="page"], [data-role="complimentary"]{ | |
| ._transform3d(0,0,0); | |
| ._transitionTransform(350ms, ease); | |
| } | |
| // if cover-effect is true | |
| [data-cover="false"],[data-cover="true"]{ | |
| &[data-direction="left"]{ | |
| #aLeft{ | |
| ._transform3d(@widthNav,0,0);box-shadow:5px 0px 5px rgba(0,0,0,.15); | |
| } | |
| } | |
| &[data-direction="right"]{ | |
| #aRight { | |
| ._transform3d(-@widthNav,0,0);box-shadow:-5px 0px 5px rgba(0,0,0,.15); | |
| } | |
| } | |
| } | |
| // if cover-effect is false | |
| [data-cover="false"]{ | |
| &[data-direction="left"]{ | |
| [data-role="page"]{ | |
| ._transform3d(@widthNav,0,0); | |
| } | |
| } | |
| &[data-direction="right"]{ | |
| [data-role="page"]{ | |
| ._transform3d(-@widthNav,0,0); | |
| } | |
| } | |
| } | |
| .lt-ie10{ | |
| [data-direction="left"]{ | |
| #aLeft{ | |
| left:0; | |
| } | |
| [data-role="page"]{left:@widthNav;} | |
| } | |
| [data-direction="right"]{ | |
| #aRight { | |
| right:0; | |
| } | |
| [data-role="page"]{right:@widthNav;} | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment