Skip to content

Commit

Permalink
Side nav docs scrollspy fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@acburst
acburst committed Dec 2, 2015
1 parent 8e69992 commit 8f03338
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 171 deletions.
164 changes: 78 additions & 86 deletions jade/page-contents/sideNav_content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,10 @@

<div class="col s12 m9 l10">

<div id="introduction" class="section scrollspy">
<div id="structure" class="section scrollspy">
<h4>Introduction</h4>
<p class="caption">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.</p>
</div>


<div id="structure" class="section scrollspy">
<h4>HTML Structure</h4>
<pre><code class="language-markup col s12">
&lt;nav>
Expand All @@ -24,6 +21,7 @@ <h4>HTML Structure</h4>
&lt;a href="#" data-activates="slide-out" class="button-collapse">&lt;i class="mdi-navigation-menu">&lt;/i>&lt;/a>
&lt;/nav>
</code></pre>
</div>

<div id="initialization" class="section scrollspy">
<h4>jQuery Plugin Initialization</h4>
Expand All @@ -46,96 +44,91 @@ <h4>Options</h4>
closeOnClick: true // Closes side-nav on &lt;a> clicks, useful for Angular/Meteor
}
);
</code></pre>
</div>

<div id="method" class="section scrollspy">
<h4>jQuery Plugin Methods</h4>
<p>We have methods to show and hide your sidebar you can use to programmatically control your sidebar.</p>
<pre><code class="language-javascript col s12">
// Show sideNav
$('.button-collapse').sideNav('show');
// Hide sideNav
$('.button-collapse').sideNav('hide');
</code></pre>
</div>
</code></pre>
</div>

<div id="method" class="section scrollspy">
<h4>jQuery Plugin Methods</h4>
<p>We have methods to show and hide your sidebar you can use to programmatically control your sidebar.</p>
<pre><code class="language-javascript col s12">
// Show sideNav
$('.button-collapse').sideNav('show');
// Hide sideNav
$('.button-collapse').sideNav('hide');
</code></pre>
</div>

<div id="variations" class="scrollspy section">
<h2 class="header">Variations</h2>
<h4>Dropdown HTML Structure</h4>
<pre><code class="language-markup col s12">
&lt;ul id="slide-out" class="side-nav">
&lt;li>&lt;a href="#!">First Sidebar Link&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Second Sidebar Link&lt;/a>&lt;/li>
&lt;li class="no-padding">
&lt;ul class="collapsible collapsible-accordion">
&lt;li>
&lt;a class="collapsible-header">Dropdown&lt;i class="mdi-navigation-arrow-drop-down">&lt;/i>&lt;/a>
&lt;div class="collapsible-body">
&lt;ul>
&lt;li>&lt;a href="#!">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Fourth&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/li>
<div id="variations" class="scrollspy section">
<h2 class="header">Variations</h2>
<h4>Dropdown HTML Structure</h4>
<pre><code class="language-markup col s12">
&lt;ul id="slide-out" class="side-nav">
&lt;li>&lt;a href="#!">First Sidebar Link&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Second Sidebar Link&lt;/a>&lt;/li>
&lt;li class="no-padding">
&lt;ul class="collapsible collapsible-accordion">
&lt;li>
&lt;a class="collapsible-header">Dropdown&lt;i class="mdi-navigation-arrow-drop-down">&lt;/i>&lt;/a>
&lt;div class="collapsible-body">
&lt;ul>
&lt;li>&lt;a href="#!">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Fourth&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;ul class="right hide-on-med-and-down">
&lt;li>&lt;a href="#!">First Sidebar Link&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Second Sidebar Link&lt;/a>&lt;/li>
&lt;li>&lt;a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown&lt;i class="mdi-navigation-arrow-drop-down right">&lt;/i>&lt;/a>&lt;/li>
&lt;ul id='dropdown1' class='dropdown-content'>
&lt;li>&lt;a href="#!">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Fourth&lt;/a>&lt;/li>
&lt;/ul>
&lt;/li>
&lt;/ul>
&lt;ul class="right hide-on-med-and-down">
&lt;li>&lt;a href="#!">First Sidebar Link&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Second Sidebar Link&lt;/a>&lt;/li>
&lt;li>&lt;a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown&lt;i class="mdi-navigation-arrow-drop-down right">&lt;/i>&lt;/a>&lt;/li>
&lt;ul id='dropdown1' class='dropdown-content'>
&lt;li>&lt;a href="#!">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Fourth&lt;/a>&lt;/li>
&lt;/ul>
&lt;/ul>
&lt;a href="#" data-activates="slide-out" class="button-collapse">&lt;i class="mdi-navigation-menu">&lt;/i>&lt;/a>
</code></pre>
&lt;a href="#" data-activates="slide-out" class="button-collapse">&lt;i class="mdi-navigation-menu">&lt;/i>&lt;/a>
</code></pre>

<h4>Fullscreen HTML Structure</h4>
<p>If you want the menu to be accessible on all screensizes you just have to add a simple helper class <code class="language-markup">show-on-large</code> to the <code class="language-markup">.button-collapse</code>. </p>
<h4>Fullscreen HTML Structure</h4>
<p>If you want the menu to be accessible on all screensizes you just have to add a simple helper class <code class="language-markup">show-on-large</code> to the <code class="language-markup">.button-collapse</code>. </p>

<pre><code class="language-markup col s12">
&lt;ul id="slide-out" class="side-nav">
&lt;li>&lt;a href="#!">First Sidebar Link&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Second Sidebar Link&lt;/a>&lt;/li>
&lt;/ul>
&lt;a href="#" data-activates="slide-out" class="button-collapse show-on-large">&lt;i class="mdi-navigation-menu">&lt;/i>&lt;/a>
</code></pre>

<h4>Fixed HTML Structure</h4>
<p>Add the class <code class="language-markup">fixed</code> 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.</p>
<pre><code class="language-markup col s12">
&lt;ul id="slide-out" class="side-nav fixed">
&lt;li>&lt;a href="#!">First Sidebar Link&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Second Sidebar Link&lt;/a>&lt;/li>
&lt;/ul>
&lt;a href="#" data-activates="slide-out" class="button-collapse">&lt;i class="mdi-navigation-menu">&lt;/i>&lt;/a>
</code></pre>
<p>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.</p>
<pre><code class="language-css col s12">
header, main, footer {
padding-left: 240px;
}

@media only screen and (max-width : 992px) {
<pre><code class="language-markup col s12">
&lt;ul id="slide-out" class="side-nav">
&lt;li>&lt;a href="#!">First Sidebar Link&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Second Sidebar Link&lt;/a>&lt;/li>
&lt;/ul>
&lt;a href="#" data-activates="slide-out" class="button-collapse show-on-large">&lt;i class="mdi-navigation-menu">&lt;/i>&lt;/a>
</code></pre>

<h4>Fixed HTML Structure</h4>
<p>Add the class <code class="language-markup">fixed</code> 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.</p>
<pre><code class="language-markup col s12">
&lt;ul id="slide-out" class="side-nav fixed">
&lt;li>&lt;a href="#!">First Sidebar Link&lt;/a>&lt;/li>
&lt;li>&lt;a href="#!">Second Sidebar Link&lt;/a>&lt;/li>
&lt;/ul>
&lt;a href="#" data-activates="slide-out" class="button-collapse">&lt;i class="mdi-navigation-menu">&lt;/i>&lt;/a>
</code></pre>
<p>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.</p>
<pre><code class="language-css col s12">
header, main, footer {
padding-left: 0;
padding-left: 240px;
}
}
</code></pre>
</div>
</div>


</div>

@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
</code></pre>
</div>
</div>

<!-- Table of Contents -->
<div class="col hide-on-small-only m3 l2">
Expand All @@ -146,7 +139,6 @@ <h4>Fixed HTML Structure</h4>
</div>
<div style="height: 1px;">
<ul class="section table-of-contents">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#structure">Structure</a></li>
<li><a href="#initialization">Intialization</a></li>
<li><a href="#options">Plugin Options</a></li>
Expand Down
Loading

0 comments on commit 8f03338

Please sign in to comment.