Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 254 lines (234 sloc) 11.061 kb
5c4bf9b @mhayes added navigation test file
mhayes authored
1 <!DOCTYPE html>
2 <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
3 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
4 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
5 <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
6 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
7 <head>
8 <meta charset="utf-8" />
9
10 <!-- Set the viewport width to device width for mobile -->
11 <meta name="viewport" content="width=device-width" />
12
b6bec5e @mhayes added sub-nav to navigation page
mhayes authored
13 <title>Foundation Navigation Testing</title>
5c4bf9b @mhayes added navigation test file
mhayes authored
14
15 <!-- Included CSS Files -->
bbc1b90 @mhayes compile stylesheets into stylesheets directory
mhayes authored
16 <link rel="stylesheet" href="stylesheets/styles.css">
5c4bf9b @mhayes added navigation test file
mhayes authored
17
18 <script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
19
20 <!-- IE Fix for HTML5 Tags -->
21 <!--[if lt IE 9]>
22 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
23 <![endif]-->
24 </head>
25 <body>
5954b49 updated fieldset styling, it was being overridden
zurbchris authored
26
5c4bf9b @mhayes added navigation test file
mhayes authored
27 <div class="row">
b6bec5e @mhayes added sub-nav to navigation page
mhayes authored
28 <div class="twelve columns">
29 <p><a href="index.html">&laquo; Back</a></p>
30 <h2>Foundation Navigation Testing</h2>
31 <hr />
32 <dl class="sub-nav">
33 <dt>Go to:</dt>
34 <dd><a href="#nav-bar">Nav Bar</a></dd>
35 <dd><a href="#vertical-nav">Vertical Nav</a></dd>
36 <dd><a href="#side-nav">Side Nav</a></dd>
37 <dd><a href="#sub-nav">Sub Nav</a></dd>
38 <dd><a href="#pagination">Pagination</a></dd>
39 </dl>
40 </div>
41 </div>
5c4bf9b @mhayes added navigation test file
mhayes authored
42
43 <!-- Test Foundation Components Here -->
44 <div class="row">
45 <div class="twelve columns">
46 <h3>Navigation</h3>
47 <h4 class="subheader">Direct users around in style. There are navigation options for a number of situations, and everything is designed to work cross-device.</h4>
b6bec5e @mhayes added sub-nav to navigation page
mhayes authored
48
e930f90 refactor navigation.html
zurbchris authored
49 <br>
50
51 <div class="row">
52 <div class="four columns">
53 <a name="nav-bar"></a>
54 <h4>Nav Bar</h4>
55 <p>The default top nav bar for Foundation includes the main nav options as well as hover dropdowns that support either a list of anchors or arbitrary content (even Grid content).</p>
56 </div>
57 <div class="eight columns">
58 <ul class="nav-bar">
59 <li class="active"><a href="#">Nav Item 1</a></li>
60 <li class="has-flyout">
61 <a href="#">Nav Item 2</a>
62 <a href="#" class="flyout-toggle"><span> </span></a>
63 <ul class="flyout">
f984e51 @mrsweaters Fix hover state in Firefox for nav bar inputs.
mrsweaters authored
64 <li>
65 <form action="#" method="post">
66 <fieldset class="textbox">
67 <label>
68 <span>Username or email</span>
69 <input type="text" name="username" autocomplete="on">
70 </label>
71 <label>
72 <span>Password</span>
73 <input class="js-password-field" type="password" value="" name="password">
74 </label>
75 <label>
76 <input type="checkbox" value="1" name="remember_me">
77 <span>Remember me</span>
78 </label>
79 <button type="submit" class="nice button" style="margin-bottom: 10px;">Sign in</button>
80 </fieldset>
81 </form>
82 </li>
e930f90 refactor navigation.html
zurbchris authored
83 </ul>
84 </li>
85 <li class="has-flyout">
86 <a href="#">Nav Item 3</a>
87 <a href="#" class="flyout-toggle"><span> </span></a>
88 <div class="flyout">
89 <h5>Regular Dropdown</h5>
90 <div class="row">
91 <div class="six columns">
92 <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
93 </div>
94 <div class="six columns">
95 <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
96 </div>
97 </div>
5c4bf9b @mhayes added navigation test file
mhayes authored
98 </div>
e930f90 refactor navigation.html
zurbchris authored
99 </li>
100 <li class="has-flyout">
101 <a href="#">Nav Item 4</a>
102 <a href="#" class="flyout-toggle"><span> </span></a>
103 <div class="flyout large right">
104 <h5>Large Dropdown</h5>
105 <div class="row">
106 <div class="four columns">
107 <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
108 <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
109 </div>
110 <div class="four columns">
111 <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
112 <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
113 </div>
114 <div class="four columns">
115 <img src="http://placehold.it/200x250" />
116 </div>
117 </div>
5c4bf9b @mhayes added navigation test file
mhayes authored
118 </div>
e930f90 refactor navigation.html
zurbchris authored
119 </li>
120 </ul>
121 </div>
122 </div>
123
124 <br><br>
125
126 <div class="row">
127 <div class="four columns">
128 <a name="vertical-nav"></a>
129 <h4>Vertical Nav</h4>
130 <p>The same nav bar seen above, with the same structure, can be made a vertical nav bar that still supports flyout content by adding a class of <code>.vertical</code> to the element.</p>
131 </div>
132 <br>
133 <div class="five columns end">
134 <ul class="nav-bar vertical">
5c4bf9b @mhayes added navigation test file
mhayes authored
135 <li class="active"><a href="#">Nav Item 1</a></li>
136 <li class="has-flyout">
137 <a href="#">Nav Item 2</a>
138 <a href="#" class="flyout-toggle"><span> </span></a>
139 <ul class="flyout">
140 <li><a href="#">Sub Nav Item 1</a></li>
141 <li><a href="#">Sub Nav Item 2</a></li>
142 <li><a href="#">Sub Nav 3</a></li>
143 <li><a href="#">Sub Nav 4</a></li>
144 <li><a href="#">Sub Nav Item 5</a></li>
145 </ul>
146 </li>
147 <li class="has-flyout">
148 <a href="#">Nav Item 3</a>
149 <a href="#" class="flyout-toggle"><span> </span></a>
150 <div class="flyout">
151 <h5>Regular Dropdown</h5>
152 <div class="row">
153 <div class="six columns">
154 <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
155 </div>
156 <div class="six columns">
157 <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
158 </div>
159 </div>
160 </div>
161 </li>
162 <li>
163 <a href="#">Nav Item 4</a>
164 </li>
165 </ul>
e930f90 refactor navigation.html
zurbchris authored
166 </div>
167 </div>
b6bec5e @mhayes added sub-nav to navigation page
mhayes authored
168
e930f90 refactor navigation.html
zurbchris authored
169 <br>
170
171 <div class="row">
172 <div class="four columns">
173 <a name="side-nav"></a>
174 <h4>Side Nav</h4>
175 <p>Side nav, like you'll see on the Foundation main site, is useful for sections either of a site or of the page.</p>
176 </div>
177 <div class="four columns end">
178 <ul class="side-nav">
179 <li class="active"><a href="#">Link 1</a></li>
180 <li><a href="#">Link 2</a></li>
181 <li class="divider"></li>
182 <li><a href="#">Link 3</a></li>
183 <li><a href="#">Link 4</a></li>
184 </ul>
185 </div>
186 </div>
b6bec5e @mhayes added sub-nav to navigation page
mhayes authored
187
e930f90 refactor navigation.html
zurbchris authored
188 <br>
189
190 <div class="row">
191 <div class="four columns">
192 <a name="sub-nav"></a>
193 <h4>Sub Nav</h4>
194 <p>This simple subnav is great for moving between different states of a page.</p>
195 </div>
196 <br>
197 <div class="eight columns">
198 <dl class="sub-nav">
199 <dt>Filter:</dt>
200 <dd class="active"><a href="#">All</a></dd>
201 <dd><a href="#">Active</a></dd>
202 <dd><a href="#">Pending</a></dd>
203 <dd><a href="#">Suspended</a></dd>
204 </dl>
205 </div>
206 </div>
b6bec5e @mhayes added sub-nav to navigation page
mhayes authored
207
e930f90 refactor navigation.html
zurbchris authored
208 <br>
209
210 <div class="row">
211 <div class="four columns">
212 <a name="pagination"></a>
213 <h4>Pagination</h4>
214 <p>Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long repetitive listings or content.</p>
215 </div>
216 <br>
217 <div class="eight columns">
218 <ul class="pagination">
219 <li class="arrow unavailable"><a href="">&laquo;</a></li>
220 <li class="current"><a href="">1</a></li>
221 <li><a href="">2</a></li>
222 <li><a href="">3</a></li>
223 <li><a href="">4</a></li>
224 <li class="unavailable"><a href="">&hellip;</a></li>
225 <li><a href="">12</a></li>
226 <li><a href="">13</a></li>
227 <li class="arrow"><a href="">&raquo;</a></li>
228 </ul>
229 </div>
230 </div>
5c4bf9b @mhayes added navigation test file
mhayes authored
231
232 </div>
233 </div>
234
235 <!-- Included JS Files -->
236 <script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
237 <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
238 <script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
239 <script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
240 <script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
241 <script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
242 <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
243 <script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
244 <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
245 <script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
246 <script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
247 <script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
248 <script src="../vendor/assets/javascripts/foundation/app.js"></script>
249 <script type="text/javascript">
250 // Page-Specific JavaScript Goes Here
251 </script>
252 </body>
253 </html>
Something went wrong with that request. Please try again.