Off-Canvas

Developer
Pongstr
Size
5,427 Kb
Views
12,144
  1. Off-Canvas Previews
  2. Off-Canvas HTML Codes
  3. Off-Canvas CSS Codes
  4. Off-Canvas JS Codes

How do I make an off-canvas?

Simple off-canvas method for bootstrap v3+. What is a off-canvas? How do you make a off-canvas? This script and codes were developed by Pongstr on 21 September 2022, Wednesday.

Off-Canvas Previews
IQ Test

Off-Canvas - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Off-Canvas</title> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div data-off-canvas="true"> <div class="off-canvas-menu"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> <div id="off-body" class="container-fluid"> <div class="container-inner"> <div class="container-content"> <button type="button" class="btn btn-primary btn-sm" data-toggle="off-canvas" data-target="#off-body"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <h1 class="page-header"> <i class="glyphicon"></i> Simple Off-Canvas </h1> <p class="lead"> a really simple off-canvas implementation. </p>
<pre class="prettyprint" style="width: 60%; margin: 10px auto; text-align: left;">
&lt;body data-off-canvas="true"&gt; &lt;!-- Off Canvas Menu --&gt; &lt;div class="off-canvas-menu"&gt; ... &lt;/div&gt; &lt;!-- Main Content --&gt; &lt;div id="off-body" class="container-fluid"&gt; &lt;!-- Toggle Off Canvas --&gt; &lt;button type="button" class="btn btn-primary btn-sm" data-toggle="off-canvas" data-target="#off-body"&gt;Button&lt;/button&gt; ... &lt;/div&gt;
&lt;/body&gt;
</pre> </div> </div> </div>
</div> <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Off-Canvas - Script Codes CSS Codes

@import "https://fonts.googleapis.com/css?family=Bitter|Open+Sans:400,300";
@import "https://getbootstrap.com/assets/css/docs.min.css";
html,
body { *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF84E489', endColorstr='#FF05BB0E'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg0ZTQ4OSIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjMzdjZDNlIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDViYjBlIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-radial-gradient(center, ellipse cover, #84e489 0%, #37cd3e 40%, #05bb0e 100%); background-image: -webkit-radial-gradient(center, ellipse cover, #84e489 0%, #37cd3e 40%, #05bb0e 100%); background-image: radial-gradient(ellipse cover at center, #84e489 0%, #37cd3e 40%, #05bb0e 100%); height: 100%; font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif; color: #fff; background-color: #84e489;
}
[data-off-canvas="true"],
.container-fluid,
.container-inner,
.container-info { height: 100%;
}
.container-inner { display: table; width: 90%; margin-left: auto; margin-right: auto;
}
.container-content { display: table-cell; vertical-align: middle; text-align: center;
}
.page-header { font-family: "Bitter"; font-weight: bold; font-size: 64px; letter-spacing: -1px; border-bottom: 0 none; text-shadow: 0 2px 8px #04890a;
}
p.lead { font-weight: 300;
}
*:focus { outline: 0 none !important;
}
[data-off-canvas="true"] { height: 100%;
}
[data-off-canvas="true"].active { overflow-x: hidden;
}
.col-xs-12 > .btn { margin-top: 15px; padding-left: 8px; padding-right: 8px;
}
.icon-bar { display: block; clear: both; width: 23px; height: 4px; margin-top: 2px; margin-bottom: 2px; background-color: #fff;
}
.off-canvas-menu { -moz-transition: left 0.1s linear; -o-transition: left 0.1s linear; -webkit-transition: left 0.1s linear; transition: left 0.1s linear; position: fixed; top: 0; z-index: 100; left: -250px; width: 250px; height: 100%; padding: 10px; box-shadow: -1px 0 1px 0 #313131 inset; border-right: 1px solid #000; background-color: #191919;
}
.off-canvas-menu.active { -moz-transition: left 0.1s ease; -o-transition: left 0.1s ease; -webkit-transition: left 0.1s ease; transition: left 0.1s ease; left: 0;
}
.off-canvas-target { -moz-transition: -moz-transform 150ms ease; -o-transition: -o-transform 150ms ease; -webkit-transition: -webkit-transform 150ms ease; transition: transform 150ms ease; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
.off-canvas-target.active { -moz-transition: -moz-transform 150ms ease; -o-transition: -o-transform 150ms ease; -webkit-transition: -webkit-transform 150ms ease; transition: transform 150ms ease; -moz-transform: translate(250px, 0); -ms-transform: translate(250px, 0); -webkit-transform: translate(250px, 0); transform: translate(250px, 0);
}
.str,
.atv { color: #D14;
}
.pun,
.opn,
.clo { color: #93a1a1;
}
.kwd,
.prettyprint
.tag { color: #1e347b;
}
.typ,
.atn,
.dec,
.var { color: teal;
}
.lit { color: #195f91;
}
.fun { color: #dc322f;
}
.pln { color: #48484c;
}
.com { font-style: italic; color: #93a1a1;
}
.prettyprint { margin-bottom: 40px; padding: 10px; font-size: 12px; background-color: #fefefe; border: 1px solid #05840b;
}
.prettyprint.linenums { -moz-box-shadow: inset 45px 0 0 #fafafa; -webkit-box-shadow: inset 45px 0 0 #fafafa; box-shadow: inset 45px 0 0 #fafafa;
}
.prettyprint ol.linenums { margin: 0; margin-left: -5px;
}
.prettyprint ol.linenums > li { padding-left: 12px; color: #bebec5; line-height: 1.6;
}
.lt-ie9 .prettyprint ol.linenums { margin: 0; margin-left: 33px;
}

Off-Canvas - Script Codes JS Codes

+function ($) { 'use strict'; var OffCanvas = function (element, options) { this.element = (element) ? element : '[data-toggle="off-canvas"]'; this.options = (options) ? options : this.defaults; return this; }; OffCanvas.defaults = {}; OffCanvas.prototype.engage = function () { var $target = $($(this.element).data('target')); $target.addClass('off-canvas-target'); $(this.element).on('click', function (event) { var offCanvas = '[data-off-canvas=true]', slideTarget = $(this).data('target'), slideMenubar = '.off-canvas-menu'; event.preventDefault(); $(offCanvas).toggleClass('active'); $(slideTarget).toggleClass('active'); $(slideMenubar).toggleClass('active'); }); }; // Off Canvas Plugin Definition // ============================ /*! Plugin mode currently doesn't work for now, * will get this to work very soon though I * just really need to finish the project I'm * working on right now :D */ $.fn.offcanvas = function (option) { var options = $.extend({}, OffCanvas.defaults, option); return this.each(function () { var offcanvas = new OffCanvas; offcanvas.engage($(this)[0], options); }); }; window.offcanvas = new OffCanvas; window.prettyPrint && prettyPrint(); $(document).on('load', offcanvas.engage());
}(window.jQuery);
Off-Canvas - Script Codes
Off-Canvas - Script Codes
Home Page Home
Developer Pongstr
Username pongstr
Uploaded September 21, 2022
Rating 4.5
Size 5,427 Kb
Views 12,144
Do you need developer help for Off-Canvas?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pongstr (pongstr) Script Codes
Name
Work in progress
Code Snippets Icon
A Pen by Pongstr
Github Commit List
Email Form
User List
Spinner
Flexbox
A Pen by Pongstr
Bootstrap Blank State
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!