source: branches/stable/templates/grouptree.css@ 837

Last change on this file since 837 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
7ul.grptree {
8 padding-left: 40px; /* hack pthui */
9}
10li.hassub {
11 position: relative;
12 margin: 0 0 0 -40px;
13 padding: 0;
14 list-style: none;
15 background: none; /* hack pthui */
16}
17li.leaf {
18 margin: 0;
19 padding: 0 0 0 15px; /* in px since this is to adjust for a fixed-size image */
20}
21li.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}
33li.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}
41li.hassub input + ul > li {
42 height: 0;
43 overflow: hidden;
44 margin-left: -14px !important;
45}
46li.hassub label {
47 cursor: pointer;
48 display: block;
49 padding-left: 15px; /* in px as it ajusts for fixed-size image */
50}
51li.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}
57li.hassub input:checked + ul > li {
58 height: auto;
59}
Note: See TracBrowser for help on using the repository browser.