853trena468ralat779
New Member
I am using the Pure CSS Collapsible Tree Navigation featured on: http://www.thecssninja.com/css/css-tree-menu. I would like to add some simple jquery to the nav to give it a smooth transition when collapsing open/closed, but not sure how. My code is as follows:\[code\]<ul class="tree"> <li> <label for="folder1" class="menu_first">Treatment Options</label> <input type="checkbox" id="folder1" /> <ul> <li class="file"><a href="">- File 1</a></li> <li class="file"><a href="">- File 1</a></li> <li class="file"><a href="">- File 1</a></li> <li class="file"><a href="">- File 1</a></li> </ul> </li> <li> <label for="folder2" class="menu_first">Benefits & Risks</label> <input type="checkbox" id="folder2" /> <ul> <li class="file"><a href="">- Benefits</a></li> <li class="file"><a href="">- Life & Death</a></li> <li class="file"><a href="">- Complications</a></li> <li class="file"><a href="">- Psychological Risks</a></li> <li class="file"><a href="">- Lifestyle Changes</a></li> </ul> </li> <li> <label for="folder3" class="menu_first">Donation: Step-by-Step</label> <input type="checkbox" id="folder3" /> <ul> <li class="file"><a href="">- File 1</a></li> <li class="file"><a href="">- File 1</a></li> <li class="file"><a href="">- File 1</a></li> <li class="file"><a href="">- File 1</a></li> </ul> </li></li></ul> ul.tree{ padding:10px 5px 0 20px; width: 230px; background-color:#eaeaea; margin-top:0px; font-family:"FutConM",Arial,Helvetica,sans-serif; font-size:28px; } li{ position: relative; margin-left: -15px; list-style: none; color:#666; } li.file{ margin-left: -1px !important; } li.file a{ background:; color:#666; text-decoration: none; display: block; margin-left:-63px; line-height:25px; } li.file a[href *= '.pdf']{ background: url(document.png) 0 0 no-repeat; } li.file a[href *= '.html']{ background: url(document.png) 0 0 no-repeat; } li.file a[href $= '.css']{ background: url(document.png) 0 0 no-repeat; } li.file a[href $= '.js']{ background: url(document.png) 0 0 no-repeat; } li input{ position: absolute; left: 0; margin-left: 0; opacity: 0; z-index: 2; cursor: pointer; height: 1em; width: 1em; top: 0; } li input + ul{ background: url("/images/navtree/toggle-small-expand.png") no-repeat scroll 0 0; height: 17px; margin-left: -2px; margin-top: -17px; } li input + ul > li{ display: none; margin-left: -14px !important; padding-left: 1px; } li label{ background:; cursor: pointer; display: block; padding-left: 15px; border-top:1px solid #999; } li label.menu_first:hover{ background-color:#F63; } li label.menu_first:active{ background-color:#F63; } li label.menu_first:visited{ background-color:#F63; } li input:checked + ul{ background: url("/images/navtree/toggle-small.png") 0px 0px no-repeat; margin-left: -2px; margin-top: -17px; /* 20px */ padding: 1.563em 0 0 80px; height: auto; } li input:checked + ul > li{ display: block; margin: 0 0 0.125em; /* 2px */ } li input:checked + ul > li:last-child{ margin: 0 0 0.063em; /* 1px */ }\[/code\]