Skip to content

Commit

Permalink
Reworked sideNav to be able to be used on full widths
Browse files Browse the repository at this point in the history
  • Loading branch information
@acburst
acburst committed Dec 22, 2014
1 parent 84f5062 commit b3356b6
Show file tree
Hide file tree
Showing 9 changed files with 243 additions and 77 deletions.
43 changes: 27 additions & 16 deletions bin/materialize.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5115,12 +5115,8 @@ small {
padding: 16px;
position: absolute;
background-color: #FFF;
top: 100%;
height: 100%;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
Expand Down Expand Up @@ -5983,10 +5979,6 @@ input[type=range]::-webkit-slider-thumb {
-ms-transition: 0.3s;
transition: 0.3s; }

.range-field.active input[type=range]::-webkit-slider-thumb {
height: 0;
width: 0; }

input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc; }

Expand Down Expand Up @@ -6101,17 +6093,36 @@ ul.table-of-contents a {
background-color: #ddd; }
ul.side-nav a {
color: #444; }
}

#front-page-nav ul.side-nav li {
ul.side-nav.full {
position: fixed;
width: 240px;
left: -250px;
top: 0;
height: 120%;
margin: 0;
background-color: #FFF;
z-index: 999;
-webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
will-change: left; }
ul.side-nav.full li {
float: none;
padding: 0 15px; }
#front-page-nav ul.side-nav li:hover {
line-height: 64px;
padding: 0 15px;
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s; }
ul.side-nav.full li:hover, ul.side-nav.full li.active {
background-color: #ddd; }
#front-page-nav ul.side-nav li .active {
background-color: transparent; }
#front-page-nav ul.side-nav a {
ul.side-nav.full a {
display: block;
padding: 0 15px;
color: #444; }
}

#sidenav-overlay {
position: fixed;
Expand Down
55 changes: 39 additions & 16 deletions css/ghpages-materialize.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5115,12 +5115,8 @@ small {
padding: 16px;
position: absolute;
background-color: #FFF;
top: 100%;
height: 100%;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
Expand Down Expand Up @@ -5983,10 +5979,6 @@ input[type=range]::-webkit-slider-thumb {
-ms-transition: 0.3s;
transition: 0.3s; }

.range-field.active input[type=range]::-webkit-slider-thumb {
height: 0;
width: 0; }

input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc; }

Expand Down Expand Up @@ -6101,17 +6093,36 @@ ul.table-of-contents a {
background-color: #ddd; }
ul.side-nav a {
color: #444; }
}

#front-page-nav ul.side-nav li {
ul.side-nav.full {
position: fixed;
width: 240px;
left: -250px;
top: 0;
height: 120%;
margin: 0;
background-color: #FFF;
z-index: 999;
-webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
will-change: left; }
ul.side-nav.full li {
float: none;
padding: 0 15px; }
#front-page-nav ul.side-nav li:hover {
line-height: 64px;
padding: 0 15px;
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s; }
ul.side-nav.full li:hover, ul.side-nav.full li.active {
background-color: #ddd; }
#front-page-nav ul.side-nav li .active {
background-color: transparent; }
#front-page-nav ul.side-nav a {
ul.side-nav.full a {
display: block;
padding: 0 15px;
color: #444; }
}

#sidenav-overlay {
position: fixed;
Expand Down Expand Up @@ -7272,6 +7283,18 @@ nav ul li:hover, nav ul li.active {
height: 100%;
pointer-events: none; }

@media only screen and (max-width: 992px) {
#front-page-nav ul.side-nav li {
float: none;
padding: 0 15px; }
#front-page-nav ul.side-nav li:hover {
background-color: #ddd; }
#front-page-nav ul.side-nav li .active {
background-color: transparent; }
#front-page-nav ul.side-nav a {
color: #444; }
}

#responsive-img {
width: 80%;
display: block;
Expand Down
5 changes: 3 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ <h4 class ="header col s12 light center">A modern responsive front-end framework
<div class="row center">
<a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light">Get Started</a>
</div>
<div class="row center"><a class="red-text lighten-4" href="https://github.com/Dogfalo/materialize">alpha release v0.93.1</a></div>
<div class="row center"><a class="red-text lighten-4" href="https://github.com/Dogfalo/materialize">alpha release v0.93.0</a></div>

<div class="row center">
<!-- BuySellAds Zone Code -->
Expand Down Expand Up @@ -132,6 +132,7 @@ <h3 class="col s12 light center header">Materialize simplifies life for develope

</div>
</div>

</main> <footer>
<div class="container">
<div class="row">
Expand Down Expand Up @@ -193,4 +194,4 @@ <h5 class="white-text">Connect</h5>
ga('send', 'pageview');
</script>
</body>
</html>
</html>
73 changes: 59 additions & 14 deletions jade/javascript/javascript_content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="container">
<ul class="tabs">
<li class="tab"><a href="#tab1">Dialogs</a></li>
<li class="tab"><a href="#tab2">Tabs</a></li>
<li class="tab"><a href="#tab2">Navigation</a></li>
<li class="tab"><a href="#tab3">Waves</a></li>
<li class="tab"><a href="#tab4">Media</a></li>
<li class="tab"><a href="#tab5">Collapsible</a></li>
Expand Down Expand Up @@ -223,27 +223,42 @@ <h4>Options</h4>
</div>


<!-- Tabs Section -->
<div id="tab2">
<div class="section">
<h2 class="header">Tabs</h2>
<p class="caption">The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.</p>
<!-- Navigation Section -->
<div id="tab2" class="row">
<div class="col hide-on-small-only m3 l2">
<div style="height: 1px;">
<ul class="section table-of-contents">
<li><a href="#tabs">Tabs</a></li>
<li><a href="#sidebar">Sidebar</a></li>
</ul>
</div>
</div>

<div class="col s12 m9 l10">
<div id="tabs" class="section scrollspy">
<h2 class="header">Navigation</h2>

<p class="caption">
Here you can learn about our different navigation options. These components can help organize and divide your content into easier to read portions.
</p>

<h4>Tabs</h4>
<p>The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.</p>

<div class="col s12">
<ul class="tabs tab-demo z-depth-1">
<li class="tab"><a href="#test1">Test 1</a></li>
<li class="tab"><a href="#test2">Test 2</a></li>
<li class="tab"><a href="#test3">Test 3</a></li>
<li class="tab"><a href="#test4">Test 4</a></li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
<div id="test1" class="col s12"><p>Test 1</p></div>
<div id="test2" class="col s12"><p>Test 2</p></div>
<div id="test3" class="col s12"><p>Test 3</p></div>
<div id="test4" class="col s12"><p>Test 4</p></div>
<br>
</div>
<div class="section">
<h4>Tabs HTML Structure</h4>
<h5>Tabs HTML Structure</h5>
<pre><code class="language-markup col s12">
&lt;div class="col s12">
&lt;ul class="tabs">
Expand All @@ -260,14 +275,44 @@ <h4>Tabs HTML Structure</h4>
</code></pre>
</div>
<div class="section">
<h4>jQuery Plugin Initialization</h4>
<h5>jQuery Plugin Initialization</h5>
<pre><code class="language-javascript col s12">
$(document).ready(function(){
$('ul.tabs').tabs();
});
</code></pre>
</div>
<div id="sidebar" class="section scrollspy">

<h4>Sidebar</h4>
<p>This is a slide out menu. If you want a sidebar that will work on all widths, just add the class <code class="language-markup">full</code> to your sidebar list.</p>
<ul id="slide-out" class="side-nav full">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
<li><a href="#!">Third Sidebar Link</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse btn">Open Sidebar</a>

</div>
<div class="section">
<h5>Tabs HTML Structure</h5>
<pre><code class="language-markup col s12">
&lt;ul id="slide-out" class="side-nav full">
&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 href="#!">Third 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>
</div>
<div class="section">
<h5>jQuery Plugin Initialization</h5>
<pre><code class="language-javascript col s12">
$(".button-collapse").sideNav();
</code></pre>
</div>
</div>
</div>


<!-- Waves Section -->
Expand Down
Loading

0 comments on commit b3356b6

Please sign in to comment.