[5341] | 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> |
---|