/
index.html
267 lines (237 loc) · 9.34 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie9 ie8 ie7 ie6" lang="en"><![endif]-->
<!--[if IE 7]><html class="ie9 ie8 ie7" lang="en"><![endif]-->
<!--[if IE 8]><html class="ie9 ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if gt IE 9]><!--><html lang="en"><!--<![endif]-->
<head>
<title>BaseDemo - HorizontalNav</title>
<link rel="stylesheet" href="bd.styles.css">
<!-- CSS Test Zone -->
<style>
/**
* Base styles for horizontal navigation
*/
.horizontal-nav {
background: #efefef;
border-radius: 6px;
}
.horizontal-nav ul {
background: #128F9A;
float: left;
text-align: center;
border-radius: 6px;
border: 1px solid #0e7079;
}
.horizontal-nav ul li {
float: left;
border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
border-left: 0 none;
}
.horizontal-nav ul li a {
display: block;
padding: 10px 20px;
color: #fff;
border-top: 1px solid rgba(255,255,255, 0.25);
border-left: 1px solid rgba(255,255,255, 0.25);
}
.horizontal-nav ul li:first-child a {
border-left: 0 none;
}
.horizontal-nav ul li a:hover {
background: #12808a;
}
.horizontal-nav ul li:first-child a {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="page">
<nav class="nav">
<ul>
<li><a href="http://sebnitu.com">About the Author</a></li>
<li><a href="https://github.com/sebnitu/HorizontalNav">Documentation</a></li>
<li class="download"><a href="https://github.com/sebnitu/HorizontalNav/zipball/master"><img src="bd.download.png" alt=""> Download</a></li>
</ul>
</nav>
<header class="header">
<h1>HorizontalNav</h1>
<p>HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it's container. If you've ever had to create this effect on a project, you'll know it's pretty annoying to do. But this plugin makes it easy and adds support for IE7.<p>
<div class="custom-nav"></div>
</header>
<div class="sep"><span class="left-arrow arrow"></span><span class="right-arrow arrow"></span></div>
<div class="demo" id="demo-one">
<div class="description">
<h2>Example One</h2>
<p>This is an example so you can see the difference between a horizontal navigation with no fixed widths and then with a navigation that has the plugin applied to it. There are no requirements to how you style the navigation and adding padding, margins or borders to any of the elements won’t break the effect.</p>
</div><!-- .description -->
<nav class="subnav tabs">
<ul>
<li class="active"><a href="#panel-1">Demo</a></li>
<li><a href="#panel-2">JavaScript</a></li>
<li><a href="#panel-3">HTML</a></li>
<li><a href="#panel-4">CSS</a></li>
</ul>
</nav>
<div class="panels">
<div class="panel clearfix" id="panel-1">
<p>Navigation with horizontalNav disabled</p>
<nav class="horizontal-nav clearfix">
<ul>
<li><a href="#">Navigation Item</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<br>
<p>Navigation with horizontalNav enabled</p>
<nav class="horizontal-nav full-width">
<ul>
<li><a href="#">Navigation Item</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div><!-- .panel -->
<div class="panel" id="panel-2">
<pre>// When document is ready...
$(document).ready(function() {
// Call horizontalNav on the navigations wrapping element
$('.full-width').horizontalNav({});
});</pre>
</div><!-- .panel -->
<div class="panel" id="panel-3">
<pre><nav class="horizontal-nav full-width horizontalNav-notprocessed">
<ul>
<li><a href="#">Navigation Item</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav></pre>
</div><!-- .panel -->
<div class="panel" id="panel-4">
<pre>// There is no required CSS for this plugin to work properly
// but here is what is being used to style this demo
.horizontal-nav {
background: #efefef;
border-radius: 6px;
}
.horizontal-nav ul {
background: #128F9A;
float: left;
text-align: center;
border-radius: 6px;
border: 1px solid #0e7079;
}
.horizontal-nav ul li {
float: left;
border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
border-left: 0 none;
}
.horizontal-nav ul li a {
display: block;
padding: 10px 20px;
color: #fff;
border-top: 1px solid rgba(255,255,255, 0.25);
border-left: 1px solid rgba(255,255,255, 0.25);
}
.horizontal-nav ul li:first-child a {
border-left: 0 none;
}
.horizontal-nav ul li a:hover {
background: #12808a;
}
.horizontal-nav ul li:first-child a {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}</pre>
</div><!-- .panel -->
</div><!-- .panels -->
</div><!-- .demo -->
<div class="sep"><span class="left-arrow arrow"></span><span class="right-arrow arrow"></span></div>
<div class="options">
<div class="description clearfix">
<h2>Available Options</h2>
</div><!-- .description -->
<div class="table-wrap">
<table width="100%" class="options-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="20%">Key</th>
<th width="18%">Default value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>responsive</code></td>
<td><code>true</code></td>
<td>This option will allow the navigation to auto adjust when the window is resized.</td>
</tr>
<tr>
<td><code>responsiveDelay</code></td>
<td><code>100</code></td>
<td>The amount of time to wait before re-adjusting the navigation on window resize. Value is set in milliseconds.</td>
</tr>
<tr>
<td><code>tableDisplay</code></td>
<td><code>true</code></td>
<td>Enables modern browsers to use <code>display: table</code> or set to <code>false</code> to manually calculate the widths of list items.</td>
</tr>
<tr>
<td><code>minimumItems</code></td>
<td><code>0</code></td>
<td>The minimum number of menu items required before auto adjusting the widths. 0 = always. Useful to prevent one or two items being huge.</td>
</tr>
</tbody>
</table>
</div><!-- .table-wrap -->
</div><!-- .options -->
<div class="sep"><span class="left-arrow arrow"></span><span class="right-arrow arrow"></span></div>
<div class="fallback">
<div class="description clearfix">
<h2>Fallback</h2>
<p>If you add the <code>horizontalNav-notprocessed</code> class to your HTML menu then this class will be removed when HorizontalNav runs and a <code>horizontalNav-processed</code> class will be added.</p>
<p>This provides an excellent fallback if HorizontalNav does not run either because of JavaScript being disabled or <code>minimumItems</code> being set and allows you to style your menu items manually under these conditions using the <code>horizontalNav-notprocessed</code> class.</p>
</div><!-- .description -->
</div><!-- .fallback -->
</div><!-- .page -->
<footer class="footer">
<p>HorizontalNav is built and maintained by <a href="http://sebnitu.com">Sebastian Nitu</a> and is licensed under the MIT License (MIT). Follow me on <a href="http://twitter.com/sebnitu">Twitter</a>, <a href="https://github.com/sebnitu">GitHub</a> and <a href="http://dribbble.com/sebnitu">Dribbble</a>.</p>
</footer>
</div><!-- .wrapper -->
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="bd.jquery.min.js"%3E%3C/script%3E'))</script>
<!-- JavaScript -->
<script src="bd.ui.js"></script>
<script src="jquery.horizontalNav.js"></script>
<!-- JavaScript Test Zone -->
<script>
$(document).ready(function() {
$('.full-width').horizontalNav();
});
</script>
</body>
</html>