Last change
on this file since 357 was 84, checked in by Kris Deugau, 14 years ago |
/trunk
Finally find a clean workspace to commit a (mostly) complete collapsible
group tree adapted from http://www.thecssninja.com/css/css-tree-menu.
Works in Opera, Firefox, Safari, probably works in recent Konqueror,
as coded it will provide a gracefully degraded always-open tree in IE 8
(and probably 7, but I don't have that handy). It will likely fail
horribly in IE6 as is since IE6 apparently does not support the
special <! if [IE] > tags in the <head> section. Feh.
Due to this IE limitation, I may switch to detecting the browser in the
script, and fiddling the header to include one group tree file or the other.
|
File size:
1.4 KB
|
Line | |
---|
1 | /*
|
---|
2 | Pure CSS collapseable tree for groups, for all browsers but IE
|
---|
3 | Adapted (mostly trimmed down) from http://www.thecssninja.com/css/css-tree-menu
|
---|
4 | Fails variously in IE < 9, may or may not work in IE 9
|
---|
5 | */
|
---|
6 |
|
---|
7 | ul.grptree {
|
---|
8 | padding-left: 40px; /* hack pthui */
|
---|
9 | }
|
---|
10 | li.hassub {
|
---|
11 | position: relative;
|
---|
12 | margin: 0 0 0 -40px;
|
---|
13 | padding: 0;
|
---|
14 | list-style: none;
|
---|
15 | background: none; /* hack pthui */
|
---|
16 | }
|
---|
17 | li.leaf {
|
---|
18 | margin: 0;
|
---|
19 | padding: 0 0 0 15px; /* in px since this is to adjust for a fixed-size image */
|
---|
20 | }
|
---|
21 | li.hassub input {
|
---|
22 | position: absolute;
|
---|
23 | left: 0;
|
---|
24 | margin: 0;
|
---|
25 | opacity: 0;
|
---|
26 | filter:alpha(opacity=0); /* IE > 6, maybe */
|
---|
27 | z-index: 2;
|
---|
28 | cursor: pointer;
|
---|
29 | height: 1em;
|
---|
30 | width: 1em;
|
---|
31 | top: 0;
|
---|
32 | }
|
---|
33 | li.hassub input + ul {
|
---|
34 | background: url('../images/tree_closed.png') 0px -2px no-repeat;
|
---|
35 | margin-top: -0.95em; /* esplain to me, why this not 1em? O_o */
|
---|
36 | padding-top: 0.1em;
|
---|
37 | padding-left: 2.25em; /* ah-HA! use this to adjust the indent! watch for neg margin from li.hassub */
|
---|
38 | xdisplay: block;
|
---|
39 | height: 1em;
|
---|
40 | }
|
---|
41 | li.hassub input + ul > li {
|
---|
42 | height: 0;
|
---|
43 | overflow: hidden;
|
---|
44 | margin-left: -14px !important;
|
---|
45 | }
|
---|
46 | li.hassub label {
|
---|
47 | cursor: pointer;
|
---|
48 | display: block;
|
---|
49 | padding-left: 15px; /* in px as it ajusts for fixed-size image */
|
---|
50 | }
|
---|
51 | li.hassub input:checked + ul {
|
---|
52 | background: url('../images/tree_open.png') 0px 0px no-repeat;
|
---|
53 | margin-top: -1.2em;
|
---|
54 | padding-top: 1.1em;
|
---|
55 | height: auto;
|
---|
56 | }
|
---|
57 | li.hassub input:checked + ul > li {
|
---|
58 | height: auto;
|
---|
59 | }
|
---|
Note:
See
TracBrowser
for help on using the repository browser.