Форумы портала PHP.SU

CODE (html):
скопировать код в буфер обмена
 <!DOCTYPE HTML>
<html>
<head>
        <meta http-equiv="content-type" content="text/html" />
        <meta name="author" content="testr" />
        <title>Untitled 2</title>
    <style>
 /* контейнер просто содержит узлы.
 Узел сам будет отвечать за свой отступ */
.Container {
        padding: 0;
        margin: 0;
}
 
.Container li {
        list-style-type: none; /* убрать кружочки/точечки */
}
/* узел отодвинут от левой стенки контейнера на 18px
    благодаря этим отступам вложенные узлы формируют иерархию
 */
.Node {
    margin-left: 18px;
    zoom: 1; /* спецсвойство против багов IE6,7. Ставит hasLayout */
}
 
/* Корневой узел от родительского контейнера не отодвинут. 
   Ему же не надо демонстрировать отступом, чей он сын.
   Это правило идет после .Node, поэтому имеет более высокий приоритет 
   Так что class="Node IsRoot" дает margin-left:0
*/ 
.IsRoot {
    margin-left: 0;
}
/* иконка скрытого/раскрытого поддерева или листа
    сами иконки идут дальше, здесь общие свойства
 */
.Expand {
    width: 18px;
    height: 18px;
    /* принцип двухколоночной верстки. */
    /* float:left и width дива Expand + margin-left дива Content */
    float: left; 
}
 
/* содержание (заголовок) узла */
 .Content {
    /* чтобы не налезать на Expand */
    margin-left:18px;
    /* высота заголовка - как минимум равна Expand 
        Т.е правая колонка всегда выше или равна левой.
        Иначе нижний float будет пытаться разместиться на получившейся ступеньке
    */    
    min-height: 18px; 
}
 
 /* все правила после * html выполняет только IE6 */
* html .Content {
    height: 18px; /* аналог min-height для IE6 */
}
/* открытое поддерево */
.ExpandOpen .Expand {  
    background-image: url(minus.gif);
}
 
/* закрытое поддерево */
.ExpandClosed .Expand {
    background-image:url(plus.gif);
}
 
/* лист */
.ExpandLeaf .Expand {
    background-image: url(file:///C|/Users/Skoretskiy/Desktop/leaf.gif);
}
.Node {
    margin-left: 18px;
    zoom: 1;
    /* линия слева образуется повторяющимся фоновым рисунком */
    background-image : url(file:///C|/Users/Skoretskiy/Desktop/i.gif);
    background-position : top left;
    background-repeat : repeat-y;
}
/* это правило - ниже .Node, поэтому имеет больший приоритет */
.IsLast {
    /* добавить соединительную черточку наверх */
    background-image: url(file:///C|/Users/Skoretskiy/Desktop/i_hulf.gif);
    background-repeat : no-repeat;
}
.ExpandOpen .Container {
        display: block;
}
 
.ExpandClosed .Container {
        display: none;
}
.ExpandOpen .Expand, .ExpandClosed .Expand {
        cursor: pointer; /* иконки скрытия-раскрытия */
}
 
.ExpandLeaf .Expand {
        cursor: auto; /* листовой узел */
}
 
    
    </style>
</head>
 
<body>
 
 
<div onclick="tree_toggle(arguments[0])">
<div>Make a choice</div>
<ul class="Container">
  <li class="Node IsRoot ExpandClosed"> 
    <div class="Expand"></div>
    <div class="Content">
    
 
<form action="mail.php" method="post">
<select name=color>
<option></option></option>
<option value=1>Товар</option>
<option value=2>Договор</option>
<option value=3 >Клиент</option>
</select>
<input type=submit value="Выбрать">
</form>
 
    </div>
 
    <ul class="Container">
    
      <li class="Node ExpandClosed">
      
        <div class="Expand"></div>
        <div class="Content"><select name=color>
<option></option></option>
<option value=1>Товар</option>
<option value=2>Договор</option>
<option value=3 >Клиент</option>
</select></div>
         <ul class="Container">
    
      <li class="Node ExpandClosed">
      
        <div class="Expand"></div>
        <div class="Content">Item 1.1</div>
        <ul class="Container">
          <li class="Node ExpandLeaf IsLast">
            <div class="Expand"></div>
            <div class="Content">Item 1.1.2</div>
          </li>
        </ul>
      </li>
 
    </ul>
      </li>
 
    </ul>
  </li>
 
 
</ul>
 
</div>
 
</body>
</html>
<script type="text/javascript">
function tree_toggle(event) {
        event = event || window.event
        var clickedElem = event.target || event.srcElement
 
        if (!hasClass(clickedElem, 'Expand')) {
                return // клик не там
        }
 
        // Node, на который кликнули
        var node = clickedElem.parentNode
        if (hasClass(node, 'ExpandLeaf')) {
                return // клик на листе
        }
 
        // определить новый класс для узла
        var newClass = hasClass(node, 'ExpandOpen') ? 'ExpandClosed' : 'ExpandOpen'
        // заменить текущий класс на newClass
        // регексп находит отдельно стоящий open|close и меняет на newClass
        var re =  /(^|\s)(ExpandOpen|ExpandClosed)(\s|$)/
        node.className = node.className.replace(re, '$1'+newClass+'$3')
}
 
 
function hasClass(elem, className) {
        return new RegExp("(^|\\s)"+className+"(\\s|$)").test(elem.className)
}
</script>