Skip to content

Commit 4e5804e

Browse files
acburstacburst
committedAug 6, 2016
Tweaked styles and added documentation for tabs in navbar
1 parent 8be8783 commit 4e5804e

File tree

10 files changed

+239
-39
lines changed

10 files changed

+239
-39
lines changed
 

‎bin/materialize.css

+13-5
Original file line numberDiff line numberDiff line change
@@ -4084,7 +4084,7 @@ nav i,
40844084
nav [class^="mdi-"], nav [class*="mdi-"],
40854085
nav i.material-icons {
40864086
display: block;
4087-
font-size: 2rem;
4087+
font-size: 24px;
40884088
height: 56px;
40894089
line-height: 56px;
40904090
}
@@ -4105,10 +4105,10 @@ nav .button-collapse {
41054105
position: relative;
41064106
z-index: 1;
41074107
height: 56px;
4108+
margin: 0 18px;
41084109
}
41094110

41104111
nav .button-collapse i {
4111-
font-size: 2.7rem;
41124112
height: 56px;
41134113
line-height: 56px;
41144114
}
@@ -4845,9 +4845,6 @@ small {
48454845
padding: 0;
48464846
margin: 0;
48474847
text-transform: uppercase;
4848-
text-overflow: ellipsis;
4849-
overflow: hidden;
4850-
letter-spacing: .8px;
48514848
}
48524849

48534850
.tabs .tab a {
@@ -4882,6 +4879,17 @@ small {
48824879
}
48834880

48844881
@media only screen and (max-width: 992px) {
4882+
.tabs {
4883+
display: -webkit-flex;
4884+
display: -ms-flexbox;
4885+
display: flex;
4886+
}
4887+
.tabs .tab {
4888+
-webkit-box-flex: 1;
4889+
-webkit-flex-grow: 1;
4890+
-ms-flex-positive: 1;
4891+
flex-grow: 1;
4892+
}
48854893
.tabs .tab a {
48864894
padding: 0 12px;
48874895
}

‎css/ghpages-materialize.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jade/page-contents/navbar_content.html

+68
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,73 @@ <h2 class="header">Active Items</h2>
124124
</code></pre>
125125
</div>
126126

127+
<div id="navbar-tabs" class="section scrollspy">
128+
129+
<h2 class="header">Extended Navbar with Tabs</h2>
130+
<p>
131+
To add extended components to the navbar, add the class <code class="language-markup">extended-nav</code> to the outer <span class="language-markup">nav</span> tag. This will allow your navbar height to be variable. Then you can just include a tabs component inside the <span class="language-markup">nav-wrapper</span>.
132+
</p>
133+
134+
<nav class="nav-extended">
135+
<div class="nav-wrapper">
136+
<a href="#" class="brand-logo">Logo</a>
137+
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
138+
<ul id="nav-mobile" class="right hide-on-med-and-down">
139+
<li><a href="sass.html">Sass</a></li>
140+
<li><a href="badges.html">Components</a></li>
141+
<li><a href="collapsible.html">JavaScript</a></li>
142+
</ul>
143+
<ul class="side-nav" id="mobile-demo">
144+
<li><a href="sass.html">Sass</a></li>
145+
<li><a href="badges.html">Components</a></li>
146+
<li><a href="collapsible.html">JavaScript</a></li>
147+
</ul>
148+
149+
<ul class="tabs tabs-transparent">
150+
<li class="tab"><a href="#test1">Test 1</a></li>
151+
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
152+
<li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
153+
<li class="tab"><a href="#test4">Test 4</a></li>
154+
</ul>
155+
</div>
156+
</nav>
157+
<br>
158+
<div id="test1" class="col s12">Test 1</div>
159+
<div id="test2" class="col s12">Test 2</div>
160+
<div id="test3" class="col s12">Test 3</div>
161+
<div id="test4" class="col s12">Test 4</div>
162+
<br>
163+
<pre><code class="language-markup">
164+
&lt;nav class="nav-extended">
165+
&lt;div class="nav-wrapper">
166+
&lt;a href="#" class="brand-logo">Logo&lt;/a>
167+
&lt;a href="#" data-activates="mobile-demo" class="button-collapse">&lt;i class="material-icons">menu&lt;/i>&lt;/a>
168+
&lt;ul id="nav-mobile" class="right hide-on-med-and-down">
169+
&lt;li>&lt;a href="sass.html">Sass&lt;/a>&lt;/li>
170+
&lt;li>&lt;a href="badges.html">Components&lt;/a>&lt;/li>
171+
&lt;li>&lt;a href="collapsible.html">JavaScript&lt;/a>&lt;/li>
172+
&lt;/ul>
173+
&lt;ul class="side-nav" id="mobile-demo">
174+
&lt;li>&lt;a href="sass.html">Sass&lt;/a>&lt;/li>
175+
&lt;li>&lt;a href="badges.html">Components&lt;/a>&lt;/li>
176+
&lt;li>&lt;a href="collapsible.html">JavaScript&lt;/a>&lt;/li>
177+
&lt;/ul>
178+
179+
&lt;ul class="tabs tabs-transparent">
180+
&lt;li class="tab">&lt;a href="#test1">Test 1&lt;/a>&lt;/li>
181+
&lt;li class="tab">&lt;a class="active" href="#test2">Test 2&lt;/a>&lt;/li>
182+
&lt;li class="tab disabled">&lt;a href="#test3">Disabled Tab&lt;/a>&lt;/li>
183+
&lt;li class="tab">&lt;a href="#test4">Test 4&lt;/a>&lt;/li>
184+
&lt;/ul>
185+
&lt;/div>
186+
&lt;/nav>
187+
&lt;div id="test1" class="col s12">Test 1&lt;/div>
188+
&lt;div id="test2" class="col s12">Test 2&lt;/div>
189+
&lt;div id="test3" class="col s12">Test 3&lt;/div>
190+
&lt;div id="test4" class="col s12">Test 4&lt;/div>
191+
</code></pre>
192+
</div>
193+
127194
<div id="navbar-fixed" class="section scrollspy">
128195

129196
<h2 class="header">Fixed Navbar</h2>
@@ -398,6 +465,7 @@ <h4>Initialization</h4>
398465
<li><a href="#left">Left Aligned</a></li>
399466
<li><a href="#center">Center Logo</a></li>
400467
<li><a href="#active-label">Active Items</a></li>
468+
<li><a href="#navbar-tabs">Navbar with Tabs</a></li>
401469
<li><a href="#navbar-fixed">Fixed Navbar</a></li>
402470
<li><a href="#navbar-dropdown">Dropdown Menu</a></li>
403471
<li><a href="#icons">Icon Links</a></li>

‎jade/page-contents/tabs_content.html

+25-10
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,21 @@
77
<h4>Introduction</h4>
88
<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. You can add the class <code class="language-markup">.disabled</code> to make a tab inaccessible. </p>
99

10+
<br>
11+
<h5>Variable Width Tabs<span>Default</span></h5>
12+
<ul class="tabs tab-demo z-depth-1">
13+
<li class="tab"><a href="#test16">Test 1</a></li>
14+
<li class="tab"><a class="active" href="#test17">Test 2</a></li>
15+
<li class="tab"><a href="#test18">Test 3</a></li>
16+
<li class="tab"><a href="#test19">Test 4</a></li>
17+
</ul>
18+
<div id="test16" class="col s12"><p>Test 1</p></div>
19+
<div id="test17" class="col s12"><p>Test 2</p></div>
20+
<div id="test18" class="col s12"><p>Test 3</p></div>
21+
<div id="test19" class="col s12"><p>Test 4</p></div>
22+
23+
<br>
24+
<h5>Fixed Width Tabs<span>Add the <code class="language-markup">.tabs-fixed-width</code> class</span></h5>
1025
<ul class="tabs tabs-fixed-width tab-demo z-depth-1">
1126
<li class="tab"><a href="#test1">Test 1</a></li>
1227
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
@@ -21,17 +36,17 @@ <h4>Introduction</h4>
2136
<div id="test0" class="col s12"><p>Test 5</p></div>
2237

2338
<br>
24-
<h5>Scrollable tabs</h5>
39+
<h5>Scrollable Tabs <span>Tabs automatically become scrollable</span></h5>
2540
<ul class="tabs tab-demo z-depth-1">
26-
<li class="tab col s3"><a href="#test5">Test 1</a></li>
27-
<li class="tab col s3"><a class="active" href="#test6">Test 2</a></li>
28-
<li class="tab col s3"><a href="#test7">Test 4</a></li>
29-
<li class="tab col s3"><a href="#test8">Test 1</a></li>
30-
<li class="tab col s3"><a class="active" href="#test9">Test 2</a></li>
31-
<li class="tab col s3 disabled"><a href="#test10">Disabled Tab</a></li>
32-
<li class="tab col s3"><a href="#test11">Test 4</a></li>
33-
<li class="tab col s3"><a href="#test12">Test 1</a></li>
34-
<li class="tab col s3"><a class="active" href="#test13">Test 2</a></li>
41+
<li class="tab"><a href="#test5">Test 1</a></li>
42+
<li class="tab"><a class="active" href="#test6">Test 2</a></li>
43+
<li class="tab"><a href="#test7">Test 4</a></li>
44+
<li class="tab"><a href="#test8">Test 1</a></li>
45+
<li class="tab"><a class="active" href="#test9">Test 2</a></li>
46+
<li class="tab disabled"><a href="#test10">Disabled Tab</a></li>
47+
<li class="tab"><a href="#test11">Test 4</a></li>
48+
<li class="tab"><a href="#test12">Test 1</a></li>
49+
<li class="tab"><a class="active" href="#test13">Test 2</a></li>
3550
<li class="tab col s3 disabled"><a href="#test14">Disabled Tab</a></li>
3651
<li class="tab col s3"><a href="#test15">Test 4</a></li>
3752
</ul>

‎navbar.html

+68
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,73 @@ <h2 class="header">Active Items</h2>
235235
</code></pre>
236236
</div>
237237

238+
<div id="navbar-tabs" class="section scrollspy">
239+
240+
<h2 class="header">Extended Navbar with Tabs</h2>
241+
<p>
242+
To add extended components to the navbar, add the class <code class="language-markup">extended-nav</code> to the outer <span class="language-markup">nav</span> tag. This will allow your navbar height to be variable. Then you can just include a tabs component inside the <span class="language-markup">nav-wrapper</span>.
243+
</p>
244+
245+
<nav class="nav-extended">
246+
<div class="nav-wrapper">
247+
<a href="#" class="brand-logo">Logo</a>
248+
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
249+
<ul id="nav-mobile" class="right hide-on-med-and-down">
250+
<li><a href="sass.html">Sass</a></li>
251+
<li><a href="badges.html">Components</a></li>
252+
<li><a href="collapsible.html">JavaScript</a></li>
253+
</ul>
254+
<ul class="side-nav" id="mobile-demo">
255+
<li><a href="sass.html">Sass</a></li>
256+
<li><a href="badges.html">Components</a></li>
257+
<li><a href="collapsible.html">JavaScript</a></li>
258+
</ul>
259+
260+
<ul class="tabs tabs-transparent">
261+
<li class="tab"><a href="#test1">Test 1</a></li>
262+
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
263+
<li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
264+
<li class="tab"><a href="#test4">Test 4</a></li>
265+
</ul>
266+
</div>
267+
</nav>
268+
<br>
269+
<div id="test1" class="col s12">Test 1</div>
270+
<div id="test2" class="col s12">Test 2</div>
271+
<div id="test3" class="col s12">Test 3</div>
272+
<div id="test4" class="col s12">Test 4</div>
273+
<br>
274+
<pre><code class="language-markup">
275+
&lt;nav class="nav-extended">
276+
&lt;div class="nav-wrapper">
277+
&lt;a href="#" class="brand-logo">Logo&lt;/a>
278+
&lt;a href="#" data-activates="mobile-demo" class="button-collapse">&lt;i class="material-icons">menu&lt;/i>&lt;/a>
279+
&lt;ul id="nav-mobile" class="right hide-on-med-and-down">
280+
&lt;li>&lt;a href="sass.html">Sass&lt;/a>&lt;/li>
281+
&lt;li>&lt;a href="badges.html">Components&lt;/a>&lt;/li>
282+
&lt;li>&lt;a href="collapsible.html">JavaScript&lt;/a>&lt;/li>
283+
&lt;/ul>
284+
&lt;ul class="side-nav" id="mobile-demo">
285+
&lt;li>&lt;a href="sass.html">Sass&lt;/a>&lt;/li>
286+
&lt;li>&lt;a href="badges.html">Components&lt;/a>&lt;/li>
287+
&lt;li>&lt;a href="collapsible.html">JavaScript&lt;/a>&lt;/li>
288+
&lt;/ul>
289+
290+
&lt;ul class="tabs tabs-transparent">
291+
&lt;li class="tab">&lt;a href="#test1">Test 1&lt;/a>&lt;/li>
292+
&lt;li class="tab">&lt;a class="active" href="#test2">Test 2&lt;/a>&lt;/li>
293+
&lt;li class="tab disabled">&lt;a href="#test3">Disabled Tab&lt;/a>&lt;/li>
294+
&lt;li class="tab">&lt;a href="#test4">Test 4&lt;/a>&lt;/li>
295+
&lt;/ul>
296+
&lt;/div>
297+
&lt;/nav>
298+
&lt;div id="test1" class="col s12">Test 1&lt;/div>
299+
&lt;div id="test2" class="col s12">Test 2&lt;/div>
300+
&lt;div id="test3" class="col s12">Test 3&lt;/div>
301+
&lt;div id="test4" class="col s12">Test 4&lt;/div>
302+
</code></pre>
303+
</div>
304+
238305
<div id="navbar-fixed" class="section scrollspy">
239306

240307
<h2 class="header">Fixed Navbar</h2>
@@ -509,6 +576,7 @@ <h4>Initialization</h4>
509576
<li><a href="#left">Left Aligned</a></li>
510577
<li><a href="#center">Center Logo</a></li>
511578
<li><a href="#active-label">Active Items</a></li>
579+
<li><a href="#navbar-tabs">Navbar with Tabs</a></li>
512580
<li><a href="#navbar-fixed">Fixed Navbar</a></li>
513581
<li><a href="#navbar-dropdown">Dropdown Menu</a></li>
514582
<li><a href="#icons">Icon Links</a></li>

‎sass/components/_navbar.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ nav {
2020
[class^="mdi-"], [class*="mdi-"],
2121
i.material-icons {
2222
display: block;
23-
font-size: 2rem;
23+
font-size: 24px;
2424
height: $navbar-height-mobile;
2525
line-height: $navbar-height-mobile;
2626
}
@@ -41,9 +41,9 @@ nav {
4141
position: relative;
4242
z-index: 1;
4343
height: $navbar-height-mobile;
44+
margin: 0 18px;
4445

4546
i {
46-
font-size: 2.7rem;
4747
height: $navbar-height-mobile;
4848
line-height: $navbar-height-mobile;
4949
}

‎sass/components/_tabs.scss

+11-5
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,6 @@
4646
padding: 0;
4747
margin: 0;
4848
text-transform: uppercase;
49-
text-overflow: ellipsis;
50-
overflow: hidden;
51-
letter-spacing: .8px;
5249

5350
a {
5451
&:hover,
@@ -86,8 +83,17 @@
8683
// Fixed sideNav hide on smaller
8784
@media #{$medium-and-down} {
8885
.tabs {
89-
.tab a {
90-
padding: 0 12px;
86+
display: flex;
87+
88+
.tab {
89+
-webkit-box-flex: 1;
90+
-webkit-flex-grow: 1;
91+
-ms-flex-positive: 1;
92+
flex-grow: 1;
93+
94+
a {
95+
padding: 0 12px;
96+
}
9197
}
9298
}
9399
}

‎sass/style.scss

+11
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ h1,h2,h3,h4,h5,h6 {
1818
-webkit-font-smoothing: antialiased;
1919
}
2020

21+
h5 > span {
22+
font-size: 14px;
23+
margin-left: 15px;
24+
color: #777;
25+
}
26+
2127
nav {
2228
// background-color: color("materialize-red", "lighten-2");
2329

@@ -62,6 +68,11 @@ footer.example {
6268
header, main, footer {
6369
padding-left: 0;
6470
}
71+
h5 > span {
72+
display: block;
73+
margin: 0 0 15px 0;
74+
}
75+
6576
}
6677

6778
/********************

‎tabs.html

+26-11
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,22 @@
118118
<h4>Introduction</h4>
119119
<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. You can add the class <code class="language-markup">.disabled</code> to make a tab inaccessible. </p>
120120

121-
<ul class="tabs fixed-width tab-demo z-depth-1">
121+
<br>
122+
<h5>Variable Width Tabs<span>Default</span></h5>
123+
<ul class="tabs tab-demo z-depth-1">
124+
<li class="tab"><a href="#test16">Test 1</a></li>
125+
<li class="tab"><a class="active" href="#test17">Test 2</a></li>
126+
<li class="tab"><a href="#test18">Test 3</a></li>
127+
<li class="tab"><a href="#test19">Test 4</a></li>
128+
</ul>
129+
<div id="test16" class="col s12"><p>Test 1</p></div>
130+
<div id="test17" class="col s12"><p>Test 2</p></div>
131+
<div id="test18" class="col s12"><p>Test 3</p></div>
132+
<div id="test19" class="col s12"><p>Test 4</p></div>
133+
134+
<br>
135+
<h5>Fixed Width Tabs<span>Add the <code class="language-markup">.tabs-fixed-width</code> class</span></h5>
136+
<ul class="tabs tabs-fixed-width tab-demo z-depth-1">
122137
<li class="tab"><a href="#test1">Test 1</a></li>
123138
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
124139
<li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
@@ -132,17 +147,17 @@ <h4>Introduction</h4>
132147
<div id="test0" class="col s12"><p>Test 5</p></div>
133148

134149
<br>
135-
<h5>Scrollable tabs</h5>
150+
<h5>Scrollable Tabs <span>Tabs automatically become scrollable</span></h5>
136151
<ul class="tabs tab-demo z-depth-1">
137-
<li class="tab col s3"><a href="#test5">Test 1</a></li>
138-
<li class="tab col s3"><a class="active" href="#test6">Test 2</a></li>
139-
<li class="tab col s3"><a href="#test7">Test 4</a></li>
140-
<li class="tab col s3"><a href="#test8">Test 1</a></li>
141-
<li class="tab col s3"><a class="active" href="#test9">Test 2</a></li>
142-
<li class="tab col s3 disabled"><a href="#test10">Disabled Tab</a></li>
143-
<li class="tab col s3"><a href="#test11">Test 4</a></li>
144-
<li class="tab col s3"><a href="#test12">Test 1</a></li>
145-
<li class="tab col s3"><a class="active" href="#test13">Test 2</a></li>
152+
<li class="tab"><a href="#test5">Test 1</a></li>
153+
<li class="tab"><a class="active" href="#test6">Test 2</a></li>
154+
<li class="tab"><a href="#test7">Test 4</a></li>
155+
<li class="tab"><a href="#test8">Test 1</a></li>
156+
<li class="tab"><a class="active" href="#test9">Test 2</a></li>
157+
<li class="tab disabled"><a href="#test10">Disabled Tab</a></li>
158+
<li class="tab"><a href="#test11">Test 4</a></li>
159+
<li class="tab"><a href="#test12">Test 1</a></li>
160+
<li class="tab"><a class="active" href="#test13">Test 2</a></li>
146161
<li class="tab col s3 disabled"><a href="#test14">Disabled Tab</a></li>
147162
<li class="tab col s3"><a href="#test15">Test 4</a></li>
148163
</ul>

‎test/html/tabs.html

+13-4
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ <h3>Variable Width</h3>
3131
<li class="tab"><a href="#test1">Test 1</a></li>
3232
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
3333
<li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
34-
<li class="tab"><a href="#test4">Test 4</a></li>
34+
<li class="tab"><a href="#test3">Test 4</a></li>
3535
<li class="tab"><a href="#test4">Test 5</a></li>
3636
<li class="tab"><a target="_self" href="http://materializecss.com">Link in same window</a></li>
3737
<li class="tab"><a target="_blank" href="http://materializecss.com">Link in new window</a></li>
@@ -69,11 +69,18 @@ <h3>Navbar in nav-extended</h3>
6969
<nav class="nav-extended">
7070
<div class="nav-wrapper">
7171
<a href="#" class="brand-logo">Logo</a>
72+
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
7273
<ul id="nav-mobile" class="right hide-on-med-and-down">
7374
<li><a href="sass.html">Sass</a></li>
7475
<li><a href="badges.html">Components</a></li>
7576
<li><a href="collapsible.html">JavaScript</a></li>
7677
</ul>
78+
<ul class="side-nav" id="mobile-demo">
79+
<li><a href="sass.html">Sass</a></li>
80+
<li><a href="badges.html">Components</a></li>
81+
<li><a href="collapsible.html">JavaScript</a></li>
82+
</ul>
83+
7784
<ul class="tabs tabs-transparent">
7885
<li class="tab"><a href="#test9">Test 1</a></li>
7986
<li class="tab"><a class="active" href="#test10">Test 2</a></li>
@@ -93,9 +100,11 @@ <h3>Navbar in nav-extended</h3>
93100
<script src="../../../bin/materialize.js"></script>
94101
<!-- <script src="js/velocity.min.js"></script>-->
95102
<!-- <script src="js/leanModal.js"></script>-->
96-
97-
<script>
98-
</script>
103+
<script type="text/javascript">
104+
$( document ).ready(function() {
105+
$('.button-collapse').sideNav();
106+
});
107+
</script>
99108

100109
</body>
101110
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.