| Last change
 on this file since 925 was             84, checked in by Kris Deugau, 15 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 | 
      
      
| Rev | Line |  | 
|---|
| [84] | 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.