1

I have this folder tree on one site, that I try to make interactive only by CSS (opening and closing folders etc.).

The way I did it it works flawlessly in Firefox, but doesn't work in any webkit-based browser (Chrome, Safari). When I tried to debug it, it changed display property in debugger correctly, but to see expected effect I had to switch the display property off ant then on again.

CSS:

ul.tree
{
   text-align: left;
}

ul.tree li
{
   position: relative;  
   list-style: none;
}

li.file
{
   background: url(images/icons/default_document.png) 0 0 no-repeat;
   background-size: 1.5em 1.5em;
}

li.file a
{
   display: block;
   text-decoration: none;
}

ul.tree li input
{   
   position: absolute;
   top: 0;
   left: 0;

   cursor: pointer; 

   opacity: 0;
   z-index: 2;
}

ul.tree li input + label + ul
{   
   margin: 1em 0 1em 2em;
}

ul.tree li input + label + ul > li
{
   display: none;
}

ul.tree li label
{   
   background: url(images/icons/Closed_32x32x32.png) 0 0 no-repeat;
   background-size: 1.3em 1.3em; 

   cursor: pointer;

   display: block;
}

ul.tree li input:checked + label
{
   background-image: url(images/icons/Open_32x32x32.png);
}

ul.tree li input:checked + label + ul
{
   margin: 0 0 0 3em;
}

ul.tree li input[type=checkbox]:checked + label + ul > li.file
{
   display: list-item;

   margin: 0;
}

HTML:

<ul class="tree">
   <li>
      <input type="checkbox" id="subfolder1" /><label for="subfolder1">Some Label</label>
      <ul>
         <li class="file"><a href="path/to/file1">file1</a></li>
         <li class="file"><a href="path/to/file2">file2</a></li>
      </ul>
   </li>
</ul>

If you need to see complete site (I omitted unimportant CSS properties etc.) it's available at http://perpartes.cz/novy_PPC/publikace ... just write some fake e-mail to the form there.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
hujon
  • 11
  • 2
  • 1
    WebKit-based browsers seem to have trouble with sibling selectors and the `:checked` pseudo-class (see [this other question](http://stackoverflow.com/questions/11160213/changing-color-on-a-inside-div-when-radio-button-is-checked) I answered just yesterday). In fact, WebKit seems to be very broken when it comes to sibling selectors in general. – BoltClock Jun 23 '12 at 19:32
  • Here is a great example for kind of tree menu u are looking for & works fine in chrome safari. – SVS Jun 23 '12 at 19:40

0 Answers0