From 3d99a4c15e0661df630dbaf7dddb5228cf044fe6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 16:40:39 -0700 Subject: move to examples dir --- examples/offcanvas/index.html | 116 +++++++++++++++++++++++++++++++++++++++ examples/offcanvas/offcanvas.css | 48 ++++++++++++++++ examples/offcanvas/offcanvas.js | 5 ++ 3 files changed, 169 insertions(+) create mode 100644 examples/offcanvas/index.html create mode 100644 examples/offcanvas/offcanvas.css create mode 100644 examples/offcanvas/offcanvas.js (limited to 'examples/offcanvas') diff --git a/examples/offcanvas/index.html b/examples/offcanvas/index.html new file mode 100644 index 000000000..1092f2c1a --- /dev/null +++ b/examples/offcanvas/index.html @@ -0,0 +1,116 @@ + + + + + + + + + Off Canvas Template for Bootstrap + + + + + + + + + + + +
+ +
+
+

+ +

+
+

Hello, world!

+

This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.

+
+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+
+ +
+ +
+ +
+

© Company 2013

+
+ +
+ + + + + + + \ No newline at end of file diff --git a/examples/offcanvas/offcanvas.css b/examples/offcanvas/offcanvas.css new file mode 100644 index 000000000..27a075d76 --- /dev/null +++ b/examples/offcanvas/offcanvas.css @@ -0,0 +1,48 @@ +/* + * Style twaks + * -------------------------------------------------- + */ +body { + padding-top: 70px; +} +footer { + padding-left: 15px; + padding-right: 15px; +} + +/* + * Off Canvas + * -------------------------------------------------- + */ +@media screen and (max-width: 768px) { + .row-offcanvas { + position: relative; + overflow: hidden // Needed for Internet Explorer + -webkit-transition: all 0.25s ease-out; + -moz-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; + } + + .row-offcanvas-right + .sidebar-offcanvas { + right: -58.333333333333336%; // 6 columns + } + + .row-offcanvas-left + .sidebar-offcanvas { + left: -58.333333333333336%; // 6 columns + } + + .row-offcanvas-right.active { + right: 58.333333333333336%; // 6 columns + } + + .row-offcanvas-left.active { + left: 58.333333333333336%; // 6 columns + } + + .sidebar-offcanvas { + position: absolute; + width: 58.333333333333336%; // 6 columns + } +} \ No newline at end of file diff --git a/examples/offcanvas/offcanvas.js b/examples/offcanvas/offcanvas.js new file mode 100644 index 000000000..12f2dff51 --- /dev/null +++ b/examples/offcanvas/offcanvas.js @@ -0,0 +1,5 @@ +$(document).ready(function() { + $('[data-toggle=offcanvas]').click(function() { + $('.row-offcanvas').toggleClass('active'); + }); +}); \ No newline at end of file -- cgit v1.2.3