diff --git a/jade/page-contents/sideNav_content.html b/jade/page-contents/sideNav_content.html index e1db6e09c4..ae6673dddd 100644 --- a/jade/page-contents/sideNav_content.html +++ b/jade/page-contents/sideNav_content.html @@ -3,13 +3,10 @@
-
+

Introduction

This is a slide out menu. You can add a dropdown to your sidebar by using our collapsible component. If you want to see a demo, our sidebar will use this on smaller screens. To use this in conjunction with a fullscreen navigation, you have to use two copies of the same UL.

-
- -

HTML Structure


 <nav>
@@ -24,6 +21,7 @@ 
HTML Structure

   <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
 </nav>
+

jQuery Plugin Initialization

@@ -46,96 +44,91 @@

Options

closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor } ); - -
- -
-

jQuery Plugin Methods

-

We have methods to show and hide your sidebar you can use to programmatically control your sidebar.

- 

-// Show sideNav
-$('.button-collapse').sideNav('show');
-// Hide sideNav
-$('.button-collapse').sideNav('hide');
-
-
+ +
+
+

jQuery Plugin Methods

+

We have methods to show and hide your sidebar you can use to programmatically control your sidebar.

+ 

+  // Show sideNav
+  $('.button-collapse').sideNav('show');
+  // Hide sideNav
+  $('.button-collapse').sideNav('hide');
+
+
-
-

Variations

-

Dropdown HTML Structure

- 

-  <ul id="slide-out" class="side-nav">
-    <li><a href="#!">First Sidebar Link</a></li>
-    <li><a href="#!">Second Sidebar Link</a></li>
-    <li class="no-padding">
-      <ul class="collapsible collapsible-accordion">
-        <li>
-          <a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
-          <div class="collapsible-body">
-            <ul>
-              <li><a href="#!">First</a></li>
-              <li><a href="#!">Second</a></li>
-              <li><a href="#!">Third</a></li>
-              <li><a href="#!">Fourth</a></li>
-            </ul>
-          </div>
-        </li>
+      

+        
Variations

+        
Dropdown HTML Structure

+          

+    <ul id="slide-out" class="side-nav">
+      <li><a href="#!">First Sidebar Link</a></li>
+      <li><a href="#!">Second Sidebar Link</a></li>
+      <li class="no-padding">
+        <ul class="collapsible collapsible-accordion">
+          <li>
+            <a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
+            <div class="collapsible-body">
+              <ul>
+                <li><a href="#!">First</a></li>
+                <li><a href="#!">Second</a></li>
+                <li><a href="#!">Third</a></li>
+                <li><a href="#!">Fourth</a></li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <ul class="right hide-on-med-and-down">
+      <li><a href="#!">First Sidebar Link</a></li>
+      <li><a href="#!">Second Sidebar Link</a></li>
+      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
+      <ul id='dropdown1' class='dropdown-content'>
+        <li><a href="#!">First</a></li>
+        <li><a href="#!">Second</a></li>
+        <li><a href="#!">Third</a></li>
+        <li><a href="#!">Fourth</a></li>
       </ul>
-    </li>
-  </ul>
-  <ul class="right hide-on-med-and-down">
-    <li><a href="#!">First Sidebar Link</a></li>
-    <li><a href="#!">Second Sidebar Link</a></li>
-    <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
-    <ul id='dropdown1' class='dropdown-content'>
-      <li><a href="#!">First</a></li>
-      <li><a href="#!">Second</a></li>
-      <li><a href="#!">Third</a></li>
-      <li><a href="#!">Fourth</a></li>
     </ul>
-  </ul>
-  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
-        

+    <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
+
-

Fullscreen HTML Structure

-

If you want the menu to be accessible on all screensizes you just have to add a simple helper class show-on-large to the .button-collapse.

+

Fullscreen HTML Structure

+

If you want the menu to be accessible on all screensizes you just have to add a simple helper class show-on-large to the .button-collapse.

- 

-  <ul id="slide-out" class="side-nav">
-    <li><a href="#!">First Sidebar Link</a></li>
-    <li><a href="#!">Second Sidebar Link</a></li>
-  </ul>
-  <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a>
-
- -

Fixed HTML Structure

-

Add the class fixed to have the sideNav be fixed and open on large screens and hides to the regular functionality on smaller screens. Our sideNav on the left is an example of this.

- 

-  <ul id="slide-out" class="side-nav fixed">
-    <li><a href="#!">First Sidebar Link</a></li>
-    <li><a href="#!">Second Sidebar Link</a></li>
-  </ul>
-  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
-
-

If you are planning on using this you will have to offset your content by the width of the side menu. Place the padding on where the offset content will be, which in our case is in header, main and footer.

- 

-  header, main, footer {
-    padding-left: 240px;
-  }
-
-  @media only screen and (max-width : 992px) {
+          

+    <ul id="slide-out" class="side-nav">
+      <li><a href="#!">First Sidebar Link</a></li>
+      <li><a href="#!">Second Sidebar Link</a></li>
+    </ul>
+    <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a>
+          

+
+          
Fixed HTML Structure

+          
Add the class fixed to have the sideNav be fixed and open on large screens and hides to the regular functionality on smaller screens. Our sideNav on the left is an example of this.

+          

+    <ul id="slide-out" class="side-nav fixed">
+      <li><a href="#!">First Sidebar Link</a></li>
+      <li><a href="#!">Second Sidebar Link</a></li>
+    </ul>
+    <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
+          

+          
If you are planning on using this you will have to offset your content by the width of the side menu. Place the padding on where the offset content will be, which in our case is in header, main and footer.

+          

     header, main, footer {
-      padding-left: 0;
+      padding-left: 240px;
     }
-  }
-        

-
-
- - - + @media only screen and (max-width : 992px) { + header, main, footer { + padding-left: 0; + } + } + + +
@@ -146,7 +139,6 @@

Fixed HTML Structure

+ @media only screen and (max-width : 992px) { + header, main, footer { + padding-left: 0; + } + } + + +
@@ -256,7 +249,6 @@

Fixed HTML Structure