From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/experimentals/off-canvas.html | 262 +++++++++++++++++++++++++++++++++++++ 1 file changed, 262 insertions(+) create mode 100644 docs/experimentals/off-canvas.html (limited to 'docs/experimentals/off-canvas.html') diff --git a/docs/experimentals/off-canvas.html b/docs/experimentals/off-canvas.html new file mode 100644 index 0000000..e9f3f9d --- /dev/null +++ b/docs/experimentals/off-canvas.html @@ -0,0 +1,262 @@ + + + + Off-canvas - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Off-canvas

+
+
+ + + +
+
+ + +
+
+

The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.

+

+ By default, the off-canvas menu is collapsed whenever the window width is. + But you can add the off-canvas-sidebar-show class to the off-canvas to make the sidebar expanded when the window width is larger than or equal to 960px. +

+
+
+
+ +
+
+

Lorem ipsum

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

+

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

+
+
+
+
+
+

You can open the sidebar by adding the class active to off-canvas-sidebar. + And remove the active to close it. +

+ 
<div class="off-canvas">
+  <!-- off-screen toggle button -->
+  <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
+    <i class="icon icon-menu"></i>
+  </a>
+
+  <div id="sidebar-id" class="off-canvas-sidebar">
+    <!-- off-screen sidebar -->
+  </div>
+
+  <a class="off-canvas-overlay" href="#close"></a>
+
+  <div class="off-canvas-content">
+    <!-- off-screen content -->
+  </div>
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-23-gd82d