Last active
December 19, 2015 13:08
-
-
Save justincarroll/5959412 to your computer and use it in GitHub Desktop.
This is a quick pattern for doing off-canvas panel type functionality with Bootstrap. The panel really isn't structured with Bootstrap per say, it's given its own width, but this is how I'd approach a solution.
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 charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Off-Canvas Bootstrap Template</title> | |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="icon" type="image/png" href="favicon.png"> | |
| <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| <script src="http://code.jquery.com/jquery.js"></script> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <script src="script.js"></script> | |
| </head> | |
| <body> | |
| <!-- Wrapped site --> | |
| <div id="wrapper"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="span8 offset2"> | |
| <a id="toggle-panel" href="#" class="pull-right"><i class="fa-bars"></i></a> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare. Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi a ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio, tempor in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl. Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare. Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi a ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio, tempor in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl. Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare. Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi a ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio, tempor in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl. Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare. Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi a ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio, tempor in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl. Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare. Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi a ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio, tempor in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl. Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare. Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi a ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio, tempor in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl. Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare. Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi a ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio, tempor in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl. Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare. Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi a ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio, tempor in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl. Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare. Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi a ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio, tempor in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl. Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare. Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi a ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio, tempor in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl. Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Off-canvas panel --> | |
| <div id="panel"> | |
| <div class="wrap"> | |
| <a id="close-panel" href="#" class="pull-right"><i class="icon-remove"></i></a> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare. Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi a ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio, tempor in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl. Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis nisi et dui placerat ornare. Maecenas molestie lacus lobortis libero lacinia sed scelerisque lectus congue. Mauris dignissim nisi a ante laoreet et ullamcorper ligula ullamcorper. In hac habitasse platea dictumst. In nisi odio, tempor in viverra vitae, mollis ac tortor. Sed a rhoncus leo. Maecenas ac dui elit, tristique dapibus nisl. Suspendisse feugiat porta ligula, auctor posuere lorem vulputate et.</p> | |
| </div> | |
| </div> | |
| </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
| jQuery( document ).ready( function() { | |
| // Toggles the off-canvas panel | |
| jQuery( '#toggle-panel, #close-panel' ).click( function() { | |
| if ( jQuery( 'body' ).hasClass( 'off-canvas' ) ) { | |
| jQuery('body').removeClass('off-canvas'); | |
| } else { | |
| jQuery('body').addClass('off-canvas'); | |
| } | |
| }); | |
| // Matches the panel height to the document height if necessary | |
| // Then triggers resize so nothing looks weird | |
| jQuery( window ).bind( 'resize', function() { | |
| if ( jQuery( '#panel' ).height() < jQuery( document ).height() ) jQuery( '#panel' ).height( jQuery( document ).height() ); | |
| }).trigger('resize'); | |
| // Hides the off-canvas panel automatically if the user has scrolled past its content | |
| jQuery( window ).bind( 'scroll', function(){ | |
| if ( jQuery(window).scrollTop() >= jQuery('#panel .wrap').outerHeight() ) jQuery('body').removeClass('off-canvas'); | |
| }); | |
| }); |
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
| body { overflow-x: hidden; } | |
| /* Wrapped site, Panel */ | |
| #wrapper, #panel { | |
| -webkit-transition: left 0.4s ease-out, right 0.4s ease-out; | |
| -moz-transition: left 0.4s ease-out, right 0.4s ease-out; | |
| -o-transition: left 0.4s ease-out, right 0.4s ease-out; | |
| transition: left 0.4s ease-out, right 0.4s ease-out; | |
| } | |
| /* Wrapped site */ | |
| #wrapper { | |
| left: 0; | |
| padding: 40px 0; | |
| position: relative; | |
| top: 0; | |
| } | |
| body.off-canvas #wrapper { left: -260px; } | |
| /* Panel */ | |
| #panel { | |
| background: black; | |
| color: #666; | |
| position: absolute; | |
| right: -260px; | |
| top: 0; | |
| width: 260px; | |
| } | |
| body.off-canvas #panel { right: 0; } | |
| #panel .wrap { padding: 40px 30px; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment