|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
2 |
|
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
|
4 <head> |
|
5 <title>Filament Group Lab</title> |
|
6 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
|
7 |
|
8 <script type="text/javascript" src="jquery-1.3.2.min.js"></script> |
|
9 <script type="text/javascript" src="fg.menu.js"></script> |
|
10 |
|
11 <link type="text/css" href="fg.menu.css" media="screen" rel="stylesheet" /> |
|
12 <link type="text/css" href="theme/ui.all.css" media="screen" rel="stylesheet" /> |
|
13 |
|
14 <!-- styles for this example page only --> |
|
15 <style type="text/css"> |
|
16 body { font-size:62.5%; margin:0; padding:0; } |
|
17 #menuLog { font-size:1.4em; margin:20px; } |
|
18 .hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; } |
|
19 |
|
20 .fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; } |
|
21 .fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; } |
|
22 a.fg-button { float:left; } |
|
23 button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */ |
|
24 |
|
25 .fg-button-icon-left { padding-left: 2.1em; } |
|
26 .fg-button-icon-right { padding-right: 2.1em; } |
|
27 .fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; } |
|
28 .fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; } |
|
29 .fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; } /* solo icon buttons must have block properties for the text-indent to work */ |
|
30 |
|
31 .fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; } |
|
32 </style> |
|
33 |
|
34 <!-- style exceptions for IE 6 --> |
|
35 <!--[if IE 6]> |
|
36 <style type="text/css"> |
|
37 .fg-menu-ipod .fg-menu li { width: 95%; } |
|
38 .fg-menu-ipod .ui-widget-content { border:0; } |
|
39 </style> |
|
40 <![endif]--> |
|
41 |
|
42 <script type="text/javascript"> |
|
43 $(function(){ |
|
44 // BUTTONS |
|
45 $('.fg-button').hover( |
|
46 function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); }, |
|
47 function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); } |
|
48 ); |
|
49 |
|
50 // MENUS |
|
51 $('#flat').menu({ |
|
52 content: $('#flat').next().html(), // grab content from this page |
|
53 showSpeed: 400 |
|
54 }); |
|
55 |
|
56 $('#hierarchy').menu({ |
|
57 content: $('#hierarchy').next().html(), |
|
58 crumbDefaultText: ' ' |
|
59 }); |
|
60 |
|
61 $('#hierarchybreadcrumb').menu({ |
|
62 content: $('#hierarchybreadcrumb').next().html(), |
|
63 backLink: false |
|
64 }); |
|
65 |
|
66 // or from an external source |
|
67 $.get('menuContent.html', function(data){ // grab content from another page |
|
68 $('#flyout').menu({ content: data, flyOut: true }); |
|
69 }); |
|
70 }); |
|
71 </script> |
|
72 |
|
73 <!-- theme switcher button --> |
|
74 <script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script> |
|
75 <script type="text/javascript"> $(function(){ $('<div style="position: absolute; top: 20px; right: 300px;" />').appendTo('body').themeswitcher(); }); </script> |
|
76 </head> |
|
77 |
|
78 <body> |
|
79 |
|
80 <p id="menuLog">You chose: <span id="menuSelection"></span></p> |
|
81 |
|
82 <a tabindex="0" href="#search-engines" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flat"><span class="ui-icon ui-icon-triangle-1-s"></span>flat menu</a> |
|
83 <div id="search-engines" class="hidden"> |
|
84 <ul> |
|
85 <li><a href="#">Google</a></li> |
|
86 <li><a href="#">Yahoo</a></li> |
|
87 <li><a href="#">MSN</a></li> |
|
88 <li><a href="#">Ask</a></li> |
|
89 <li><a href="#">AOL</a></li> |
|
90 </ul> |
|
91 </div> |
|
92 |
|
93 <a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><span class="ui-icon ui-icon-triangle-1-s"></span>flyout menu</a> |
|
94 |
|
95 <a tabindex="0" href="#news-items" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchy"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu</a> |
|
96 <div id="news-items" class="hidden"> |
|
97 <ul> |
|
98 <li><a href="#">Breaking News</a> |
|
99 <ul> |
|
100 <li><a href="#">Entertainment</a></li> |
|
101 <li><a href="http://www.w3schools.com/tags/html5.asp">Politics</a></li> |
|
102 <li><a href="#">A&E</a></li> |
|
103 <li><a href="#">Sports</a> |
|
104 <ul> |
|
105 <li><a href="#">Baseball</a></li> |
|
106 <li><a href="#">Basketball</a></li> |
|
107 <li><a href="#">A really long label would wrap nicely as you can see</a></li> |
|
108 <li><a href="#">Swimming</a> |
|
109 <ul> |
|
110 <li><a href="#">High School</a></li> |
|
111 <li><a href="#">College</a></li> |
|
112 <li><a href="#">Professional</a> |
|
113 <ul> |
|
114 <li><a href="#">Mens Swimming</a> |
|
115 <ul> |
|
116 <li><a href="#">News</a></li> |
|
117 <li><a href="#">Events</a></li> |
|
118 <li><a href="#">Awards</a></li> |
|
119 <li><a href="#">Schedule</a></li> |
|
120 <li><a href="#">Team Members</a></li> |
|
121 <li><a href="#">Fan Site</a></li> |
|
122 </ul> |
|
123 </li> |
|
124 <li><a href="#">Womens Swimming</a> |
|
125 <ul> |
|
126 <li><a href="#">News</a></li> |
|
127 <li><a href="#">Events</a></li> |
|
128 <li><a href="#">Awards</a></li> |
|
129 <li><a href="#">Schedule</a></li> |
|
130 <li><a href="#">Team Members</a></li> |
|
131 <li><a href="#">Fan Site</a></li> |
|
132 </ul> |
|
133 </li> |
|
134 </ul> |
|
135 </li> |
|
136 <li><a href="#">Adult Recreational</a></li> |
|
137 <li><a href="#">Youth Recreational</a></li> |
|
138 <li><a href="#">Senior Recreational</a></li> |
|
139 </ul> |
|
140 </li> |
|
141 <li><a href="#">Tennis</a></li> |
|
142 <li><a href="#">Ice Skating</a></li> |
|
143 <li><a href="#">Javascript Programming</a></li> |
|
144 <li><a href="#">Running</a></li> |
|
145 <li><a href="#">Walking</a></li> |
|
146 </ul> |
|
147 </li> |
|
148 <li><a href="#">Local</a></li> |
|
149 <li><a href="#">Health</a></li> |
|
150 </ul> |
|
151 </li> |
|
152 <li><a href="#">Entertainment</a> |
|
153 <ul> |
|
154 <li><a href="#">Celebrity news</a></li> |
|
155 <li><a href="#">Gossip</a></li> |
|
156 <li><a href="#">Movies</a></li> |
|
157 <li><a href="#">Music</a> |
|
158 <ul> |
|
159 <li><a href="#">Alternative</a></li> |
|
160 <li><a href="#">Country</a></li> |
|
161 <li><a href="#">Dance</a></li> |
|
162 <li><a href="#">Electronica</a></li> |
|
163 <li><a href="#">Metal</a></li> |
|
164 <li><a href="#">Pop</a></li> |
|
165 <li><a href="#">Rock</a> |
|
166 <ul> |
|
167 <li><a href="#">Bands</a> |
|
168 <ul> |
|
169 <li><a href="#">Dokken</a></li> |
|
170 </ul> |
|
171 </li> |
|
172 <li><a href="#">Fan Clubs</a></li> |
|
173 <li><a href="#">Songs</a></li> |
|
174 </ul> |
|
175 </li> |
|
176 </ul> |
|
177 </li> |
|
178 <li><a href="#">Slide shows</a></li> |
|
179 <li><a href="#">Red carpet</a></li> |
|
180 </ul> |
|
181 </li> |
|
182 <li><a href="#">Finance</a> |
|
183 <ul> |
|
184 <li><a href="#">Personal</a> |
|
185 <ul> |
|
186 <li><a href="#">Loans</a></li> |
|
187 <li><a href="#">Savings</a></li> |
|
188 <li><a href="#">Mortgage</a></li> |
|
189 <li><a href="#">Debt</a></li> |
|
190 </ul> |
|
191 </li> |
|
192 <li><a href="#">Business</a></li> |
|
193 </ul> |
|
194 </li> |
|
195 <li><a href="#">Food & Cooking</a> |
|
196 <ul> |
|
197 <li><a href="#">Breakfast</a></li> |
|
198 <li><a href="#">Lunch</a></li> |
|
199 <li><a href="#">Dinner</a></li> |
|
200 <li><a href="#">Dessert</a> |
|
201 <ul> |
|
202 <li><a href="#">Dump Cake</a></li> |
|
203 <li><a href="#">Doritos</a></li> |
|
204 <li><a href="#">Both please.</a></li> |
|
205 </ul> |
|
206 </li> |
|
207 </ul> |
|
208 </li> |
|
209 <li><a href="#">Lifestyle</a></li> |
|
210 <li><a href="#">News</a></li> |
|
211 <li><a href="#">Politics</a></li> |
|
212 <li><a href="#">Sports</a> |
|
213 <ul> |
|
214 <li><a href="#">Baseball</a></li> |
|
215 <li><a href="#">Basketball</a></li> |
|
216 <li><a href="#">Swimming</a> |
|
217 <ul> |
|
218 <li><a href="#">High School</a></li> |
|
219 <li><a href="#">College</a></li> |
|
220 <li><a href="#">Professional</a> |
|
221 <ul> |
|
222 <li><a href="#">Mens Swimming</a> |
|
223 <ul> |
|
224 <li><a href="#">News</a></li> |
|
225 <li><a href="#">Events</a></li> |
|
226 <li><a href="#">Awards</a></li> |
|
227 <li><a href="#">Schedule</a></li> |
|
228 <li><a href="#">Team Members</a></li> |
|
229 <li><a href="#">Fan Site</a></li> |
|
230 </ul> |
|
231 </li> |
|
232 <li><a href="#">Womens Swimming</a> |
|
233 <ul> |
|
234 <li><a href="#">News</a></li> |
|
235 <li><a href="#">Events</a></li> |
|
236 <li><a href="#">Awards</a></li> |
|
237 <li><a href="#">Schedule</a></li> |
|
238 <li><a href="#">Team Members</a></li> |
|
239 <li><a href="#">Fan Site</a></li> |
|
240 </ul> |
|
241 </li> |
|
242 </ul> |
|
243 </li> |
|
244 <li><a href="#">Adult Recreational</a></li> |
|
245 <li><a href="#">Youth Recreational</a></li> |
|
246 <li><a href="#">Senior Recreational</a></li> |
|
247 </ul> |
|
248 </li> |
|
249 <li><a href="#">Tennis</a></li> |
|
250 <li><a href="#">Ice Skating</a></li> |
|
251 <li><a href="#">Javascript Programming</a></li> |
|
252 <li><a href="#">Running</a></li> |
|
253 <li><a href="#">Walking</a></li> |
|
254 </ul> |
|
255 </li> |
|
256 </ul> |
|
257 </div> |
|
258 |
|
259 <a tabindex="0" href="#news-items-2" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchybreadcrumb"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu w/ breadcrumb</a> |
|
260 <div id="news-items-2" class="hidden"> |
|
261 <ul> |
|
262 <li><a href="#">Breaking News</a> |
|
263 <ul> |
|
264 <li><a href="#">Entertainment</a></li> |
|
265 <li><a href="#">Politics</a></li> |
|
266 <li><a href="#">A&E</a></li> |
|
267 <li><a href="#">Sports</a> |
|
268 <ul> |
|
269 <li><a href="#">Baseball</a></li> |
|
270 <li><a href="#">Basketball</a></li> |
|
271 <li><a href="#">A really long label would wrap nicely as you can see</a></li> |
|
272 <li><a href="#">Swimming</a> |
|
273 <ul> |
|
274 <li><a href="#">High School</a></li> |
|
275 <li><a href="#">College</a></li> |
|
276 <li><a href="#">Professional</a> |
|
277 <ul> |
|
278 <li><a href="#">Mens Swimming</a> |
|
279 <ul> |
|
280 <li><a href="#">News</a></li> |
|
281 <li><a href="#">Events</a></li> |
|
282 <li><a href="#">Awards</a></li> |
|
283 <li><a href="#">Schedule</a></li> |
|
284 <li><a href="#">Team Members</a></li> |
|
285 <li><a href="#">Fan Site</a></li> |
|
286 </ul> |
|
287 </li> |
|
288 <li><a href="#">Womens Swimming</a> |
|
289 <ul> |
|
290 <li><a href="#">News</a></li> |
|
291 <li><a href="#">Events</a></li> |
|
292 <li><a href="#">Awards</a></li> |
|
293 <li><a href="#">Schedule</a></li> |
|
294 <li><a href="#">Team Members</a></li> |
|
295 <li><a href="#">Fan Site</a></li> |
|
296 </ul> |
|
297 </li> |
|
298 </ul> |
|
299 </li> |
|
300 <li><a href="#">Adult Recreational</a></li> |
|
301 <li><a href="#">Youth Recreational</a></li> |
|
302 <li><a href="#">Senior Recreational</a></li> |
|
303 </ul> |
|
304 </li> |
|
305 <li><a href="#">Tennis</a></li> |
|
306 <li><a href="#">Ice Skating</a></li> |
|
307 <li><a href="#">Javascript Programming</a></li> |
|
308 <li><a href="#">Running</a></li> |
|
309 <li><a href="#">Walking</a></li> |
|
310 </ul> |
|
311 </li> |
|
312 <li><a href="#">Local</a></li> |
|
313 <li><a href="#">Health</a></li> |
|
314 </ul> |
|
315 </li> |
|
316 <li><a href="#">Entertainment</a> |
|
317 <ul> |
|
318 <li><a href="#">Celebrity news</a></li> |
|
319 <li><a href="#">Gossip</a></li> |
|
320 <li><a href="#">Movies</a></li> |
|
321 <li><a href="#">Music</a> |
|
322 <ul> |
|
323 <li><a href="#">Alternative</a></li> |
|
324 <li><a href="#">Country</a></li> |
|
325 <li><a href="#">Dance</a></li> |
|
326 <li><a href="#">Electronica</a></li> |
|
327 <li><a href="#">Metal</a></li> |
|
328 <li><a href="#">Pop</a></li> |
|
329 <li><a href="#">Rock</a> |
|
330 <ul> |
|
331 <li><a href="#">Bands</a> |
|
332 <ul> |
|
333 <li><a href="#">Dokken</a></li> |
|
334 </ul> |
|
335 </li> |
|
336 <li><a href="#">Fan Clubs</a></li> |
|
337 <li><a href="#">Songs</a></li> |
|
338 </ul> |
|
339 </li> |
|
340 </ul> |
|
341 </li> |
|
342 <li><a href="#">Slide shows</a></li> |
|
343 <li><a href="#">Red carpet</a></li> |
|
344 </ul> |
|
345 </li> |
|
346 <li><a href="#">Finance</a> |
|
347 <ul> |
|
348 <li><a href="#">Personal</a> |
|
349 <ul> |
|
350 <li><a href="#">Loans</a></li> |
|
351 <li><a href="#">Savings</a></li> |
|
352 <li><a href="#">Mortgage</a></li> |
|
353 <li><a href="#">Debt</a></li> |
|
354 </ul> |
|
355 </li> |
|
356 <li><a href="#">Business</a></li> |
|
357 </ul> |
|
358 </li> |
|
359 <li><a href="#">Food & Cooking</a> |
|
360 <ul> |
|
361 <li><a href="#">Breakfast</a></li> |
|
362 <li><a href="#">Lunch</a></li> |
|
363 <li><a href="#">Dinner</a></li> |
|
364 <li><a href="#">Dessert</a> |
|
365 <ul> |
|
366 <li><a href="#">Dump Cake</a></li> |
|
367 <li><a href="#">Doritos</a></li> |
|
368 <li><a href="#">Both please.</a></li> |
|
369 </ul> |
|
370 </li> |
|
371 </ul> |
|
372 </li> |
|
373 <li><a href="#">Lifestyle</a></li> |
|
374 <li><a href="#">News</a></li> |
|
375 <li><a href="#">Politics</a></li> |
|
376 <li><a href="#">Sports</a> |
|
377 <ul> |
|
378 <li><a href="#">Baseball</a></li> |
|
379 <li><a href="#">Basketball</a></li> |
|
380 <li><a href="#">Swimming</a> |
|
381 <ul> |
|
382 <li><a href="#">High School</a></li> |
|
383 <li><a href="#">College</a></li> |
|
384 <li><a href="#">Professional</a> |
|
385 <ul> |
|
386 <li><a href="#">Mens Swimming</a> |
|
387 <ul> |
|
388 <li><a href="#">News</a></li> |
|
389 <li><a href="#">Events</a></li> |
|
390 <li><a href="#">Awards</a></li> |
|
391 <li><a href="#">Schedule</a></li> |
|
392 <li><a href="#">Team Members</a></li> |
|
393 <li><a href="#">Fan Site</a></li> |
|
394 </ul> |
|
395 </li> |
|
396 <li><a href="#">Womens Swimming</a> |
|
397 <ul> |
|
398 <li><a href="#">News</a></li> |
|
399 <li><a href="#">Events</a></li> |
|
400 <li><a href="#">Awards</a></li> |
|
401 <li><a href="#">Schedule</a></li> |
|
402 <li><a href="#">Team Members</a></li> |
|
403 <li><a href="#">Fan Site</a></li> |
|
404 </ul> |
|
405 </li> |
|
406 </ul> |
|
407 </li> |
|
408 <li><a href="#">Adult Recreational</a></li> |
|
409 <li><a href="#">Youth Recreational</a></li> |
|
410 <li><a href="#">Senior Recreational</a></li> |
|
411 </ul> |
|
412 </li> |
|
413 <li><a href="#">Tennis</a></li> |
|
414 <li><a href="#">Ice Skating</a></li> |
|
415 <li><a href="#">Javascript Programming</a></li> |
|
416 <li><a href="#">Running</a></li> |
|
417 <li><a href="#">Walking</a></li> |
|
418 </ul> |
|
419 </li> |
|
420 </ul> |
|
421 </div> |
|
422 |
|
423 </body> |
|
424 </html> |