Created
April 25, 2015 12:13
-
-
Save kurtisdunn/6bf5a5857d96c32c6aaf to your computer and use it in GitHub Desktop.
Bootstrap Off Screen Right.
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> | |
| <head> | |
| <!-- Meta --> | |
| <meta charset="utf-8"> | |
| <title>Off Canvas Menus Demo</title> | |
| <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"> | |
| <!-- Favicon --> | |
| <!-- Styles --> | |
| <link href= | |
| "//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= | |
| "stylesheet"> | |
| <link href= | |
| "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel= | |
| "stylesheet"> | |
| <style> | |
| #site-wrapper { | |
| position: relative; | |
| overflow: hidden; | |
| width: 100%; | |
| height: 5000px; /* Temp: Simulates a tall page. */ | |
| } | |
| #site-canvas { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| -moz-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| -o-transform: translateX(0); | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| -moz-transform: translateZ(0) translateX(0); | |
| -ms-transform: translateZ(0) translateX(0); | |
| -o-transform: translateZ(0) translateX(0); | |
| -webkit-transform: translateZ(0) translateX(0); | |
| transform: translateZ(0) translateX(0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| -ms-transform: translate3d(0, 0, 0); | |
| -o-transform: translate3d(0, 0, 0); | |
| -webkit-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); | |
| -moz-transition: 300ms ease all; | |
| -ms-transition: 300ms ease all; | |
| -o-transition: 300ms ease all; | |
| -webkit-transition: 300ms ease all; | |
| transition: 300ms ease all; | |
| -moz-backface-visibility: hidden; | |
| -ms-backface-visibility: hidden; | |
| -o-backface-visibility: hidden; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| padding: 5% 0; /* Temp: Just spacing. */ | |
| } | |
| #site-menu { | |
| width: 300px; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: -300px; | |
| background: #428bca; | |
| padding: 15px; | |
| } | |
| #site-wrapper.show-nav #site-canvas { | |
| -webkit-transform: translateX(300px); | |
| transform: translateX(300px); | |
| } | |
| .show-nav #site-canvas { | |
| -moz-transform: translateX(300px); | |
| -ms-transform: translateX(300px); | |
| -o-transform: translateX(300px); | |
| -webkit-transform: translateX(300px); | |
| transform: translateX(300px); | |
| -moz-transform: translateZ(0) translateX(300px); | |
| -ms-transform: translateZ(0) translateX(300px); | |
| -o-transform: translateZ(0) translateX(300px); | |
| -webkit-transform: translateZ(0) translateX(300px); | |
| transform: translateZ(0) translateX(300px); | |
| -moz-transform: translate3d(300px, 0, 0); | |
| -ms-transform: translate3d(300px, 0, 0); | |
| -o-transform: translate3d(300px, 0, 0); | |
| -webkit-transform: translate3d(300px, 0, 0); | |
| transform: translate3d(300px, 0, 0); | |
| } | |
| navbar-toggle{ | |
| border | |
| } | |
| .navbar-toggle .icon-bar { | |
| display: block; | |
| width: 22px; | |
| height: 2px; | |
| border-radius: 1px; | |
| border: 1px solid #414141; | |
| } | |
| .navbar-toggle { | |
| background-color: #fff; | |
| z-index: 1; | |
| position: absolute!important; | |
| right: 10px; | |
| } | |
| </style> | |
| <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> | |
| </head> | |
| <body> | |
| <div id="site-wrapper"> | |
| <div id="site-canvas"> | |
| <div id="site-menu"> | |
| <a class="toggle-nav fa fa-times" href="#" style= | |
| "color: pink; font-size: 20px; font-style: italic"></a> | |
| <h2>My Menu</h2> | |
| <p class="lead">Put any HTML you want here.</p> | |
| <p>Style it however you want.</p> | |
| <ul> | |
| <li>Free to scroll up and down</li> | |
| <li>But not left and write</li> | |
| </ul> | |
| </div><button class="navbar-toggle collapsed toggle-nav" | |
| data-target="nav" data-toggle="offcanvas" type= | |
| "button"><span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> <span class="icon-bar"></span> | |
| <span class="icon-bar"></span></button> | |
| <h1 class="text-center">Off Canvas Menu Tutorial</h1> | |
| <p class="lead text-center">Basic demo showing how to easily | |
| implement an Off Canvas Menu by <a href= | |
| "https://scotch.io">scotch.io</a>.</p> | |
| </div><!-- #site-canvas --> | |
| </div><!-- #site-wrapper> --> | |
| <!-- Scripts --> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> | |
| $(function() { | |
| $('.toggle-nav').click(function() { | |
| // Calling a function in case you want to expand upon this. | |
| toggleNav(); | |
| }); | |
| }); | |
| function toggleNav() { | |
| if ($('#site-wrapper').hasClass('show-nav')) { | |
| // Do things on Nav Close | |
| $('#site-wrapper').removeClass('show-nav'); | |
| } else { | |
| // Do things on Nav Open | |
| $('#site-wrapper').addClass('show-nav'); | |
| } | |
| //$('#site-wrapper').toggleClass('show-nav'); | |
| } | |
| $(document).keyup(function(e) { | |
| if (e.keyCode == 27) { | |
| if ($('#site-wrapper').hasClass('show-nav')) { | |
| // Assuming you used the function I made from the demo | |
| toggleNav(); | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment