Skip to content
Newer
Older
100755 665 lines (564 sloc) 18.4 KB
035e3ca @DerOperator PIE archive
authored Mar 12, 2013
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5
6 <head>
7
8
9
10 <title>Deluxe CSS Dropdowns and Flyouts - Expanded demo</title>
11
12
13 <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
14 <meta name="keywords" content="demo,test,big john,big,john,position is everything,position,css,html,bug,bugs,bug fix" />
15 <meta name="description" content="Make a pure CSS dropdown/flyout combo nav." />
16 <meta name="distribution" content="global" />
17 <meta name="resource-type" content="document" />
18 <meta http-equiv="Content-Language" content="en-us" />
19 <meta name="robots" content="all" />
20 <meta name="mssmarttagspreventparsing" content="true" />
21 <meta http-equiv="imagetoolbar" content="no" />
22 <meta http-equiv="MSThemeCompatible" content="no" />
23 <meta name="Rating" content="General" />
24 <meta name="revisit-after" content="10 Days" />
25 <meta name="doc-class" content="Living Document" />
26
27 <link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon" />
28
29 <script type="text/javascript">if (window.self != window.top) window.top.location = window.self.location; </script>
30
31 <!--[if gt IE 6]>
32 <style type="text/css">
33
34 .button .dropdown li, .nav a {{zoom: 1;}
35
36 </style>
37 <![endif]-->
38 <!-- This CC feeds a modified Holly hack to IE7 and up. The old star-html hack is
39 ignored by IE7, and IE7 correctly obeys the "height: 1%" layout-triggering fix, so
40 use a targeted CC and change the fix to "zoom: 1;" to achieve the same layout fix. -->
41
42 <style type="text/css">
43
44 /*XXXXXXXXXX Generic page styling rules XXXXXXXXXX*/
45
46 html, body, ul, li { padding: 0; margin: 0; list-style: none;}
47
48 body {
49 margin: 20px 0;
50 text-align: center;
51 font-family: arial, sans-serif;
52 font-size: 100.01%;
53 }
54
55 #wrapper {
56 margin: 0 auto;
57 padding: 79px 0 0;
58 width: 760px;
59 border: 1px solid #888;
60 text-align: left;
61 background: #fffaee url(images/flyoutbanner.gif) no-repeat;
62 }
63
64 /* Box model hack \*/
65 * html #wrapper {
66 width: 762px;
67 w\idth: 760px;
68 }
69 /* */
70
71 .textbox {
72 padding: 1px 1em;
73 font-size: .9em;
74 }
75
76 .textbox a {color: #000;}
77
78 .back {text-align: right; padding: 10px 10px 0 0;}
79
80 .alignright {margin: 0 30px 20px 0; text-align: right;}
81
82 .small {font-size: .8em;}
83
84 h1 {position: absolute; left: -3000px;}
85
86 h2 {font-size: 1em;}
87
88 p {margin-left: 30px;}
89
90
91 /*XXXXXXXXXXXX Primary top nav rules XXXXXXXXXXX*/
92
93 .nav {
94 position: relative;
95 background: #def;
96 border: 1px solid #888; /* borders the bottom of the top nav */
97 border-width: 1px 0;
98 width: 100%;
99 }
100
101 .button {
102 width: 190px;
103 float: left;
104 }
105
106 .parent {position: relative;}
107 /* this parent div does not provide "sticky hovering", but instead fixes a
108 strange bug in Op7. When an element serves as a hovered popup "parent" element,
109 that element must not also be floated or all heck breaks loose in Opera 7.
110 To prevent this, we have floated the top level list items, while nesting
111 hoverable parent divs inside that are then hovered to generate the dropdowns.
112 Thus the ugly (but interesting) Op7 bug is defeated. */
113
114 .floatfix {margin-right: -3px;}
115 /* this fixes the IE 3px bug that is common in this type of float arrangement */
116
117
118 /*XXXXXXXXXXXX Primary dropdown/flyout rules XXXXXXXXXXX*/
119
120 .dropdown { /* rules for dropdown div */
121 width: 250px;
122 position: absolute;
123 left: -3000px;
124 top: auto; /* puts dropdowns directly under top nav */
125 text-align: left; /* needed because IE misapplies text centering to boxes */
126 background: url(images/bgfix.gif);
127 }
128
129 .dropdown div {
130 width: 220px;
131 position: absolute;
132 left: -3000px;
133 top: 0;
134 background: url(images/bgfix.gif);
135 text-align: left; /* needed because IE misapplies text centering to boxes */
136 }
137
138 /* The margins on the UL's replace the div paddings to create "sticky hovering"
139 zones, and the margins should "fill" the divs, making the IE BG fix unnecessary.
140 Unfortunately the BG fix is still needed, altho this method does eliminate
141 possible box model problems */
142
143 .dropdown ul {
144 width: 189px; /* tweaked so that dropdowns appear to "line up" with top links */
145 margin: 0 30px 30px 30px; /* creates "sticky hovering" zones for dropdowns */
146 border: 1px solid #888;
147 border-width: 1px 1px 0;
148 } /* borders sides and top of the dropdowns and flyouts; links provide the bottom border */
149
150 .dropdown div ul {margin: 30px 30px 30px 0;} /* creates "sticky hovering" zones for flyouts */
151
152 .four .dropdown ul {width: 190px;} /* modifies width for rightmost "visible" dropdown (tweak) */
153
154 .four .dropdown div ul {margin: 30px 0 30px 30px; position: relative;} /* rule reversal for "visible" right drop flyouts */
155
156 .nav li {text-align: center;}
157
158 .nav a {
159 display: block;
160 color: #800;
161 font-weight: bold;
162 font-size: .9em;
163 text-decoration: none;
164 padding: 6px 0 5px;
165 border-right: 1px solid #888; /* makes the dividers between the top nav links */
166 }
167
168 .four a {border-right: 0;} /* kills right border on last top link */
169
170 .nav ul ul a {
171 color: #fff;
172 border-right: 0; /* negates right border for dropdowns and flyouts */
173 border-bottom: 1px solid #888; /* borders the bottoms of the dropdown and flyout links */
174 }
175
176 .dropdown li {
177 position: relative;
178 vertical-align: bottom; /* IE5/win bugfix */
179 }
180
181 .parent:hover {background-image: url(images/bgfix.gif);}
182 /* this hover calls a transparent GIF only to defeat the IE failed hover bug. Any
183 background change on hovering div.parent will make IE obey and display the dropdown.
184 While the call itself will fix the bug, make sure you actually call a real image
185 file so that your site error logs will not fill with failed image calls. */
186
187 .parent:hover div.dropdown {left: -31px;} /* hover rule for dropdowns */
188 /* extra pixel makes dropdowns "line up" with top links */
189
190 .dropdown li:hover div { /* hover rule for flyouts */
191 left: 180px; /* this value controls the amount of flyout "overlap" */
192 top: -26px; /* this value controls the amount of flyout vertical offset */
193 }
194
195 .four li:hover div { /* reversed flyout rules for rightmost drop flyouts */
196 left: -210px;
197 top: -26px;
198 }
199
200 .nav div.mini-zone { /* special hover zone that covers the "danger corner" */
201 padding: 0;
202 width: 15px;
203 height: 15px;
204 font-size: 1px;
205 left: -3000px;
206 bottom: -15px;
207 top: auto;
208 background: url(images/bgfix.gif);
209 }
210
211 .nav .dropdown li:hover div.mini-zone { /* hover rule for mini-zones */
212 left: auto;
213 right: 8px;
214 top: auto;
215 }
216
217 .nav .four li:hover div.mini-zone { /* reversed hover rule for rightmost drop mini-zones */
218 left: 8px;
219 }
220
221 .dropdown li:hover {background: #235;} /* hover color effect on dropdown links */
222
223 .dropdown div li:hover {background: #ff7;} /* hover color effect on flyout links */
224
225
226 /*XXXXXXXXXXX Primary dropdown backgrounds XXXXXXXXXX*/
227
228 .one ul {background: #d79b00;}
229 .two ul {background: #459;}
230 .three ul {background: #4a3;}
231 .four ul {background: #790000;}
232 .dropdown div ul {background: #eda;} /* colors BG of flyouts */
233 .dropdown div ul a {color: #400;} /* colors text of flyouts */
234
235
236 /*XXXXXXXXXX z-index rules for top nav XXXXXXXXXXX*/
237
238 .one {z-index: 10;}
239 .two {z-index: 20;}
240 .three {z-index: 30;}
241 .four {z-index: 40;}
242 .four:hover {z-index: 20;}
243 /* this last is a special trick that reverses the stacking order of the rightmost
244 top link when it or its children are hovered. This, and the previous rules work
245 together so that when a user is on the top link of any flyout, they can move
246 vertically to the top link directly above and not have the sticky hoivering zone
247 on the flyout get in the way of hovering that top link. */
248
249
250 /*XXXXXXXXXXX Special fixes XXXXXXXXXXX*/
251
252 /* This is to hide the following from IE/Mac. \*/
253 * html .button .dropdown li {
254 height: 1%;
255 margin-left: -16px;
256 mar\gin-left: 0;
257 }
258 /* */
259
260 * html .nav a
261 {height: 1%;}
262
263 /* The first 2 rules above fix "bullet region" problems in IE5.x/win,
264 and the 2nd is to make all links fully clickable. */
265
266 .brclear { /* Use a break with this class to clear float containers */
267 clear:both;
268 height:0;
269 margin:0;
270 font-size: 1px;
271 line-height: 0;
272 }
273
274
275 .nav .dropdown, .nav .dropdown div {width: 189px; background: none;}
276 .nav .button .dropdown ul {margin: 0px;}
277 .nav .dropdown, .nav .dropdown div {position: static;}
278 .nav .dropdown ul {border: 0;}
279 .mini-zone {display: none;}
280 /* The above block is normally shown only to IEmac, but has been revealed for this test page */
281
282 </style>
283
284
285 <!--[if lte IE 6]>
286 <style type="text/css">
287 body {behavior: url(sidepages/csshover.htc);}
288 </style>
289
290 <noscript>
291 <style type="text/css">
292
293 .nav .dropdown, .nav .dropdown div {width: 189px;}
294 .nav .button .dropdown ul {margin: 0px;}
295 .nav .dropdown, .nav .dropdown div {position: static;}
296 .nav .dropdown ul {border: 0;}
297 .mini-zone {display: none;}
298
299 </style>
300 </noscript>
301 <![endif]-->
302 <!-- The above block calls the special .htc script that forces compliance in IE6
303 and lower, and also "dumbs down" the nav when IE is set not to allow scripting.
304 Only IE6 and lower can read this block. -->
305
3cf48db @DerOperator jQuery
authored Mar 13, 2013
306 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
b89428d @DerOperator Github Ribbon
authored Mar 13, 2013
307 <script type="text/javascript" src="/scripts/init.js"></script>
035e3ca @DerOperator PIE archive
authored Mar 12, 2013
308 </head>
309
310 <body>
311
312 <div id="wrapper">
313
314 <h1>Deluxe CSS Dropdowns and Flyouts - Expanded demo</h1>
315
316 <div class="nav">
317
318 <ul>
319
320 <li class="button"><div class="parent one"><a href="#">First Link</a>
321 <div class="dropdown">
322 <ul>
323 <li style="z-index: 10;">
324 <a href="#">Sublink One</a>
325 <div class="mini-zone"></div>
326 <div>
327 <ul>
328 <li><a href="#">One.One</a></li>
329 <li><a href="#">One.Two</a></li>
330 <li><a href="#">One.Three</a></li>
331 <li><a href="#">One.Four</a></li>
332 <li><a href="#">One.Five</a></li>
333 </ul>
334 </div>
335 </li>
336 <li style="z-index: 9;">
337 <a href="#">Sublink Two</a>
338 <div class="mini-zone"></div>
339 <div>
340 <ul>
341 <li><a href="#">Two.One</a></li>
342 <li><a href="#">Two.Two</a></li>
343 <li><a href="#">Two.Three</a></li>
344 <li><a href="#">Two.Four</a></li>
345 <li><a href="#">Two.Five</a></li>
346 </ul>
347 </div>
348 </li>
349 <li style="z-index: 8;">
350 <a href="#">Sublink Three</a>
351 <div class="mini-zone"></div>
352 <div>
353 <ul>
354 <li><a href="#">Three.One</a></li>
355 <li><a href="#">Three.Two</a></li>
356 <li><a href="#">Three.Three</a></li>
357 <li><a href="#">Three.Four</a></li>
358 <li><a href="#">Three.Five</a></li>
359 </ul>
360 </div>
361 </li>
362 <li style="z-index: 7;">
363 <a href="#">Sublink Four</a>
364 <div class="mini-zone"></div>
365 <div>
366 <ul>
367 <li><a href="#">Four.One</a></li>
368 <li><a href="#">Four.Two</a></li>
369 <li><a href="#">Four.Three</a></li>
370 <li><a href="#">Four.Four</a></li>
371 <li><a href="#">Four.Five</a></li>
372 </ul>
373 </div>
374 </li>
375 <li style="z-index: 6;">
376 <a href="#">Sublink Five</a>
377 <div class="mini-zone"></div>
378 <div>
379 <ul>
380 <li><a href="#">Five.One</a></li>
381 <li><a href="#">Five.Two</a></li>
382 <li><a href="#">Five.Three</a></li>
383 <li><a href="#">Five.Four</a></li>
384 <li><a href="#">Five.Five</a></li>
385 </ul>
386 </div>
387 </li>
388 </ul>
389 </div></div>
390 </li>
391
392 <li class="button"><div class="parent two"><a href="#">Second Link</a>
393 <div class="dropdown">
394 <ul>
395 <li style="z-index: 10;">
396 <a href="#">Sublink One</a>
397 <div class="mini-zone"></div>
398 <div>
399 <ul>
400 <li><a href="#">One.One</a></li>
401 <li><a href="#">One.Two</a></li>
402 <li><a href="#">One.Three</a></li>
403 <li><a href="#">One.Four</a></li>
404 <li><a href="#">One.Five</a></li>
405 </ul>
406 </div>
407 </li>
408 <li style="z-index: 9;">
409 <a href="#">Sublink Two</a>
410 <div class="mini-zone"></div>
411 <div>
412 <ul>
413 <li><a href="#">Two.One</a></li>
414 <li><a href="#">Two.Two</a></li>
415 <li><a href="#">Two.Three</a></li>
416 <li><a href="#">Two.Four</a></li>
417 <li><a href="#">Two.Five</a></li>
418 </ul>
419 </div>
420 </li>
421 <li style="z-index: 8;">
422 <a href="#">Sublink Three</a>
423 <div class="mini-zone"></div>
424 <div>
425 <ul>
426 <li><a href="#">Three.One</a></li>
427 <li><a href="#">Three.Two</a></li>
428 <li><a href="#">Three.Three</a></li>
429 <li><a href="#">Three.Four</a></li>
430 <li><a href="#">Three.Five</a></li>
431 </ul>
432 </div>
433 </li>
434 <li style="z-index: 7;">
435 <a href="#">Sublink Four</a>
436 <div class="mini-zone"></div>
437 <div>
438 <ul>
439 <li><a href="#">Four.One</a></li>
440 <li><a href="#">Four.Two</a></li>
441 <li><a href="#">Four.Three</a></li>
442 <li><a href="#">Four.Four</a></li>
443 <li><a href="#">Four.Five</a></li>
444 </ul>
445 </div>
446 </li>
447 <li style="z-index: 6;">
448 <a href="#">Sublink Five</a>
449 <div class="mini-zone"></div>
450 <div>
451 <ul>
452 <li><a href="#">Five.One</a></li>
453 <li><a href="#">Five.Two</a></li>
454 <li><a href="#">Five.Three</a></li>
455 <li><a href="#">Five.Four</a></li>
456 <li><a href="#">Five.Five</a></li>
457 </ul>
458 </div>
459 </li>
460 </ul>
461 </div></div>
462 </li>
463
464 <li class="button"><div class="parent three"><a href="#">Third Link</a>
465 <div class="dropdown">
466 <ul>
467 <li style="z-index: 10;">
468 <a href="#">Sublink One</a>
469 <div class="mini-zone"></div>
470 <div>
471 <ul>
472 <li><a href="#">One.One</a></li>
473 <li><a href="#">One.Two</a></li>
474 <li><a href="#">One.Three</a></li>
475 <li><a href="#">One.Four</a></li>
476 <li><a href="#">One.Five</a></li>
477 </ul>
478 </div>
479 </li>
480 <li style="z-index: 9;">
481 <a href="#">Sublink Two</a>
482 <div class="mini-zone"></div>
483 <div>
484 <ul>
485 <li><a href="#">Two.One</a></li>
486 <li><a href="#">Two.Two</a></li>
487 <li><a href="#">Two.Three</a></li>
488 <li><a href="#">Two.Four</a></li>
489 <li><a href="#">Two.Five</a></li>
490 </ul>
491 </div>
492 </li>
493 <li style="z-index: 8;">
494 <a href="#">Sublink Three</a>
495 <div class="mini-zone"></div>
496 <div>
497 <ul>
498 <li><a href="#">Three.One</a></li>
499 <li><a href="#">Three.Two</a></li>
500 <li><a href="#">Three.Three</a></li>
501 <li><a href="#">Three.Four</a></li>
502 <li><a href="#">Three.Five</a></li>
503 </ul>
504 </div>
505 </li>
506 <li style="z-index: 7;">
507 <a href="#">Sublink Four</a>
508 <div class="mini-zone"></div>
509 <div>
510 <ul>
511 <li><a href="#">Four.One</a></li>
512 <li><a href="#">Four.Two</a></li>
513 <li><a href="#">Four.Three</a></li>
514 <li><a href="#">Four.Four</a></li>
515 <li><a href="#">Four.Five</a></li>
516 </ul>
517 </div>
518 </li>
519 <li style="z-index: 6;">
520 <a href="#">Sublink Five</a>
521 <div class="mini-zone"></div>
522 <div>
523 <ul>
524 <li><a href="#">Five.One</a></li>
525 <li><a href="#">Five.Two</a></li>
526 <li><a href="#">Five.Three</a></li>
527 <li><a href="#">Five.Four</a></li>
528 <li><a href="#">Five.Five</a></li>
529 </ul>
530 </div>
531 </li>
532 </ul>
533 </div></div>
534 </li>
535
536 <li class="button floatfix"><div class="parent four"><a href="#">Fourth Link</a>
537 <div class="dropdown">
538 <ul>
539 <li style="z-index: 10;">
540 <a href="#">Sublink One</a>
541 <div class="mini-zone"></div>
542 <div>
543 <ul>
544 <li><a href="#">One.One</a></li>
545 <li><a href="#">One.Two</a></li>
546 <li><a href="#">One.Three</a></li>
547 <li><a href="#">One.Four</a></li>
548 <li><a href="#">One.Five</a></li>
549 </ul>
550 </div>
551 </li>
552 <li style="z-index: 9;">
553 <a href="#">Sublink Two</a>
554 <div class="mini-zone"></div>
555 <div>
556 <ul>
557 <li><a href="#">Two.One</a></li>
558 <li><a href="#">Two.Two</a></li>
559 <li><a href="#">Two.Three</a></li>
560 <li><a href="#">Two.Four</a></li>
561 <li><a href="#">Two.Five</a></li>
562 </ul>
563 </div>
564 </li>
565 <li style="z-index: 8;">
566 <a href="#">Sublink Three</a>
567 <div class="mini-zone"></div>
568 <div>
569 <ul>
570 <li><a href="#">Three.One</a></li>
571 <li><a href="#">Three.Two</a></li>
572 <li><a href="#">Three.Three</a></li>
573 <li><a href="#">Three.Four</a></li>
574 <li><a href="#">Three.Five</a></li>
575 </ul>
576 </div>
577 </li>
578 <li style="z-index: 7;">
579 <a href="#">Sublink Four</a>
580 <div class="mini-zone"></div>
581 <div>
582 <ul>
583 <li><a href="#">Four.One</a></li>
584 <li><a href="#">Four.Two</a></li>
585 <li><a href="#">Four.Three</a></li>
586 <li><a href="#">Four.Four</a></li>
587 <li><a href="#">Four.Five</a></li>
588 </ul>
589 </div>
590 </li>
591 <li style="z-index: 6;">
592 <a href="#">Sublink Five</a>
593 <div class="mini-zone"></div>
594 <div>
595 <ul>
596 <li><a href="#">Five.One</a></li>
597 <li><a href="#">Five.Two</a></li>
598 <li><a href="#">Five.Three</a></li>
599 <li><a href="#">Five.Four</a></li>
600 <li><a href="#">Five.Five</a></li>
601 </ul>
602 </div>
603 </li>
604 </ul>
605 </div></div>
606 </li>
607
608 </ul>
609 <br class="brclear" />
610
611 </div> <!--// close nav -->
612
613 <div class="textbox">
614
615 <div class="back">
616 <a href="index-2.html"><strong>Return to PIE</strong></a><br />
617 <a href="css-dropdowns.html"><strong>Back to CSS Dropdowns</strong></a>
618 </div>
619
620 <h2>Expanded Nav Demo</h2>
621
622 <p>
623 This may not be very pretty, but you can see that the entire nav is usable. We are
624 waiting on some scripting that will allow a keypress to manually expand the nav
625 so that tabbing is easy, after which another keypress will collapse the nav again.
626 </p>
627
628 <p>
629 A first attempt has been made at the keypress script, but it is not clean in all
630 modern browsers, so we will stay on the hunt for such a solution.
631 </p>
632
633
634 <br />
635 <p class="small alignright">
636 <a href="design/index.html"
637 title=" Big John's Advanced CSS Design "><strong>Big John Design</strong></a>
638 &nbsp;
e57388c @DerOperator Removed dud email address => github issues
authored Mar 13, 2013
639 <a href="https://github.com/DerOperator/PositionIsEverything/issues">Contact Us</a>
035e3ca @DerOperator PIE archive
authored Mar 12, 2013
640 &copy;positioniseverything.net<br />
641 Last updated: October 23, 2006<br />
642 Created April 6, 2005
643 </p>
644
645 </div>
646
647 <img style="position: absolute; left: -3000px;" href="images/bgfix.gif" />
648
649 </div>
650
38d492d @DerOperator GoogleAnalytics
authored Mar 12, 2013
651 <script type="text/javascript">
652 var _gaq = _gaq || [];
653 _gaq.push(['_setAccount', 'UA-39235363-1']);
654 _gaq.push(['_trackPageview']);
655
656 (function() {
657 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
658 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
659 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
660 })();
661 </script>
035e3ca @DerOperator PIE archive
authored Mar 12, 2013
662 </body>
663
664
665 </html>
Something went wrong with that request. Please try again.