Created
April 18, 2014 23:02
-
-
Save landru247/11067832 to your computer and use it in GitHub Desktop.
CSS: Off stage menu - Simple slide in off-stage menu Credit:
Pushy - v0.9.1 - 2013-9-16 | Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
https://github.com/christophery/pushy | by Christopher Yee
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> | |
| <html class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Pushy - Off-Canvas Navigation Menu</title> | |
| <meta name="description" content="Pushy is an off-canvas navigation menu for your website."> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | |
| <link rel="stylesheet" href="css/normalize.css"> | |
| <link rel="stylesheet" href="css/demo.css"> | |
| <!-- Pushy CSS --> | |
| <link rel="stylesheet" href="css/pushy.css"> | |
| <!-- jQuery --> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> | |
| <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script> | |
| <!-- Modernizr --> | |
| <script src="js/vendor/modernizr.custom.71422.js"></script> | |
| </head> | |
| <body> | |
| <!-- Pushy Menu --> | |
| <nav class="pushy pushy-left"> | |
| <ul> | |
| <li><a href="#">Item 1</a></li> | |
| <li><a href="#">Item 2</a></li> | |
| <li><a href="#">Item 3</a></li> | |
| <li><a href="#">Item 4</a></li> | |
| <li><a href="#">Item 5</a></li> | |
| <li><a href="#">Item 6</a></li> | |
| </ul> | |
| </nav> | |
| <!-- Site Overlay --> | |
| <div class="site-overlay"></div> | |
| <!-- Your Content --> | |
| <div id="container"> | |
| <!-- Menu Button --> | |
| <div class="menu-btn">☰ Menu</div> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra neque a diam cursus pulvinar. Suspendisse faucibus mi id accumsan lobortis. Pellentesque consectetur varius turpis, nec viverra justo pellentesque sit amet. Vestibulum convallis leo non purus vehicula, non faucibus libero rhoncus. Morbi aliquam tincidunt facilisis. Aenean sodales nulla ac semper consectetur. Vivamus commodo massa convallis justo posuere vestibulum. Aenean congue non mauris ac auctor. Ut suscipit et eros nec suscipit. Nulla congue, mauris nec bibendum sagittis, urna orci tincidunt massa, in vulputate velit nulla vitae nunc. Etiam urna justo, imperdiet nec orci sollicitudin, tempus feugiat erat. Vivamus id lectus nulla. Vestibulum sagittis cursus metus vel ultricies. Suspendisse viverra interdum metus eu placerat. Quisque tristique velit nisi, scelerisque consectetur tortor vehicula ut. Donec id fermentum mi, nec venenatis felis.</p> | |
| <p>Praesent id metus imperdiet, congue leo sed, eleifend purus. Donec congue scelerisque tempus. Maecenas eget nunc pharetra, laoreet enim sed, dictum odio. Sed non mollis purus. Aliquam aliquet, risus eget dictum commodo, neque mi dapibus ipsum, tempus iaculis elit lorem pharetra mauris. Vivamus pulvinar scelerisque lectus a congue. Sed vitae odio massa. Pellentesque condimentum sit amet arcu in convallis.</p> | |
| <p>Etiam dapibus nisl nibh, et commodo nisi euismod vehicula. In consectetur eleifend felis, eget iaculis lectus scelerisque vel. Mauris non nibh nec sem consequat dapibus sed at tellus. Nunc egestas ac diam sed pretium. Praesent ultrices malesuada nisi at ornare. Aliquam arcu eros, pellentesque vitae fringilla ac, rhoncus id urna. Curabitur sit amet tortor eu neque sollicitudin congue. Proin mattis, diam quis ullamcorper iaculis, metus lectus vulputate tellus, id imperdiet nibh ante vel risus. Nam ut mi libero. Suspendisse auctor neque at pulvinar vestibulum. Suspendisse potenti. Cras molestie eros at feugiat gravida.</p> | |
| </div> | |
| <!-- Pushy JS --> | |
| <script src="js/pushy.min.js"></script> | |
| </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
| /*! Pushy - v0.9.1 - 2013-9-16 | |
| * Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. | |
| * https://github.com/christophery/pushy/ | |
| * by Christopher Yee */$(function(){function h(){t.toggleClass(o);e.toggleClass(s);n.toggleClass(u);r.toggleClass(a)}function p(){t.addClass(o);e.animate({left:"0px"},l);n.animate({left:c},l);r.animate({left:c},l)}function d(){t.removeClass(o);e.animate({left:"-"+c},l);n.animate({left:"0px"},l);r.animate({left:"0px"},l)}var e=$(".pushy"),t=$("body"),n=$("#container"),r=$(".push"),i=$(".site-overlay"),s="pushy-left pushy-open",o="pushy-active",u="container-push",a="push-push",f=$(".menu-btn, .pushy a"),l=200,c=e.width()+"px";if(Modernizr.csstransforms3d){f.click(function(){h()});i.click(function(){h()})}else{e.css({left:"-"+c});n.css({"overflow-x":"hidden"});var v=!0;f.click(function(){if(v){p();v=!1}else{d();v=!0}});i.click(function(){if(v){p();v=!1}else{d();v=!0}})}}); |
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
| /*! Pushy - v0.9.1 - 2013-9-16 | |
| * Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. | |
| * https://github.com/christophery/pushy/ | |
| * by Christopher Yee */ | |
| /* Menu Appearance */ | |
| .pushy{ | |
| position: fixed; | |
| width: 200px; | |
| height: 100%; | |
| top: 0; | |
| z-index: 9999; | |
| background: #333332; | |
| font-size: 0.9em; | |
| font-weight: bold; | |
| -webkit-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7); | |
| -moz-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7); | |
| box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7); | |
| overflow: auto; | |
| -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */ | |
| } | |
| .pushy a{ | |
| display: block; | |
| color: #b3b3b1; | |
| padding: 15px 30px; | |
| border-bottom: 1px solid rgba(0, 0, 0, .1); | |
| border-top: 1px solid rgba(255, 255, 255, .1); | |
| text-decoration: none; | |
| } | |
| .pushy a:hover{ | |
| background: #00b4ff; | |
| color: #FFF; | |
| } | |
| /* Menu Movement */ | |
| .pushy-left{ | |
| -webkit-transform: translate3d(-200px,0,0); | |
| -moz-transform: translate3d(-200px,0,0); | |
| -ms-transform: translate3d(-200px,0,0); | |
| -o-transform: translate3d(-200px,0,0); | |
| transform: translate3d(-200px,0,0); | |
| } | |
| .pushy-open{ | |
| -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); | |
| } | |
| .container-push, .push-push{ | |
| -webkit-transform: translate3d(200px,0,0); | |
| -moz-transform: translate3d(200px,0,0); | |
| -ms-transform: translate3d(200px,0,0); | |
| -o-transform: translate3d(200px,0,0); | |
| transform: translate3d(200px,0,0); | |
| } | |
| /* Menu Transitions */ | |
| .pushy, #container, .push{ | |
| -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99); | |
| -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99); | |
| -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99); | |
| transition: transform .2s cubic-bezier(.16, .68, .43, .99); | |
| /* improves performance issues on mobile*/ | |
| -webkit-backface-visibility: hidden; | |
| -webkit-perspective: 1000; | |
| } | |
| /* Site Overlay */ | |
| .site-overlay{ | |
| display: none; | |
| } | |
| .pushy-active .site-overlay{ | |
| display: block; | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 200px; | |
| z-index: 9999; | |
| } | |
| /* Example Media Query */ | |
| @media screen and (max-width: 768px){ | |
| .pushy{ | |
| font-size: 1.0em; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment