네이버 UI - 셀렉트박스 함수, selectbox, css, div > php

<style>
/* 셀렉트박스 UI */
.select{position:relative;z-index:1000;width:300px;font-family:'돋움',dotum;font-size:12px}
.select ul,.select li,.select dl,.select dt,.select dd,.select p{margin:0;padding:0}
.select li{list-style:none}
.select .select_label{height:12px;padding:4px 17px 3px 5px;border:1px solid #6e706f;border-right-color:#d4d5d7;border-bottom-color:#d4d5d7;background:#fff url(http://html.nhndesign.com/ui_library/src/pattern/etc/cds/select_box/img/bu_arr_label.gif) no-repeat 100% 0;line-height:12px;cursor:pointer;_cursor:hand}
.select .select_label span{display:block;overflow:hidden;width:100%;white-space:nowrap;text-overflow:ellipsis}
.select .select_layer{display:none;position:absolute;top:19px;left:0;width:100%;z-index:1000;background:#fff}
.select .select_layer ul{border:1px solid #d4d5d7;border-left-color:#6e706f;border-top:0;padding:1px 2px 2px}
.select .select_layer ul li{display:inline-block;width:100%;vertical-align:top}
.select .select_layer ul li dl dt{display:block;*display:inline-block;overflow:hidden;width:100%;margin-top:1px;color:#666;line-height:100%;cursor:pointer;_cursor:hand}
.select .select_layer ul li dl dt span{display:block;overflow:hidden;padding:4px 3px 3px;white-space:nowrap}
.select .select_layer ul li dl{position:relative}
.select .select_layer ul li dl dd{display:none;position:absolute;top:-2px;left:100%;margin-left:-5px;padding-left:14px;background:url(http://html.nhndesign.com/ui_library/src/pattern/etc/cds/select_box/img/bu_arr_tooltip.gif) no-repeat 10px -1px;color:#fff;line-height:15px}
.select .select_layer ul li dl dd p{padding:4px;border:1px solid #333;border-left:0;background:#4d4d4d;white-space:nowrap}
.select .select_layer ul li dl dd img{vertical-align:top}
.select .select_layer ul li.on dl dd{display:block}
.select .select_layer ul li.on dl dt{background:#eee;color:#000}
</style> 

<?

/*
셀렉트 박스 UI 입니다. Naver UI 오픈소스를 사용합니다.
이 함수는 다음의 인자를 넘겨 받습니다.
$name : 태그의 이름 입니다. form에 의해 넘겨질 이름 입니다.
$size : 셀렉트박스의 가로 사이즈 입니다. px 단위
$old : 이미 선택된 값입니다. 이 값이 있을 경우 동일한 값이 미리 선택된 상태로 출력됩니다. -> selected ':' 로 구분합니다. 예) 'option1:말라뮤트'
$val : 넘겨질 값과 표시될 값 입니다. ':' 로 구분합니다. 예) array('title:제목','content:내용')
$option : $val에 추가로 표시될 옵션입니다. 표시될 값 우측에 박스형태로 출력되며 img와 text 형태가 있습니다. ':'로 타입과 내용을 구분합니다. 예) array('text:허스키','img:img/temp.gif')
$N : 이는 레이어의 z-index 의 값입니다. 중복사용을 위해 서로 다른값을 입력해야 합니다.
$Default : 초기 선택값입니다. 초기 실행시 이곳에 입력된 텍스트를 셀렉트박스 안에 보여줍니다.
*/

function selectbox($name,$size=120,$old="",$val=array(),$option=array(),$N=0,$Default="선택하세요.") {
 if($old && trim($old)!=":") {
  $old_ary=explode(":",$old);
  $old_title=$old_ary[0];
  $old_val=$old_ary[1];
 }
 else {
  $old_title='';
  $old_val=$Default;
 }
 
 $Zindex=2000-$N;
 echo "<input type=hidden name='$name' id='$name' value='$old_title'>";
 echo "<div style='width:".$size."px' class='select'>";
 echo "<div id='select_label_$N' class='select_label'>";
 echo "<span>$old_val</span>";
 echo "</div>";
 echo "<div id='select_layer_$N' class='select_layer' style='z-index:$Zindex'>";
 echo "<ul>";
 for($i=0; $i<count($val); $i++) {
  $title_ary=explode(":",$val[$i]);
  $title=$title_ary[0];
  $title_val=$title_ary[1];
  
  $content_ary=explode(":",$option[$i]);
  
  if($content_ary[0]=="img") {
   $content="<img src='$content_ary[1]' align=absmiddle>";
  }
  else if($content_ary[0]=="text") {
   $content=$content_ary[1];
  }
  else {
   $content="";
  }
  
  echo "<li>";
  echo "<dl>";
  echo "<dt id='$title'>";
  echo "<span>$title_val</span>";
  echo "</dt>";

  if($content) {
   echo "<dd>";
   echo "<p style='color:#ffffff;'>$content</p>";
   echo "</dd>";
  }
  
  echo "</dl>";
  echo "</li>";
 }
 
 echo "</ul>";
 echo "</div>";
 echo "</div>";
 echo "<script>selectBoxAction($N,'$name')</script>";
}
?>

 
<script type='text/javascript'>
function selectBoxAction(N,Name) {
 var label, layer, li;
 label = document.getElementById('select_label_'+N);
 layer = document.getElementById('select_layer_'+N);
 li = layer.getElementsByTagName('LI');
 label.onclick = function() {
  layer.style.display = (layer.style.display != 'block') ? 'block' :'none';
 }
 
 for (var i=0;i<li.length;i++) {
  li[i].onmouseover = function() { this.className = 'on' }
  li[i].onmouseout = function() { this.className = '' }
  li[i].onclick = function() {
   label.getElementsByTagName('SPAN')[0].childNodes[0].nodeValue = this.getElementsByTagName('DT')[0].childNodes[0].childNodes[0].nodeValue;
   document.getElementById(Name).value=this.getElementsByTagName('DT')[0].id;
   layer.style.display = 'none';
  }
 }
}
</script>

<?
selectbox("name",$size=120,$old="",array('title:제목','content:내용'),array('text:허스키','img:img/temp.gif'),$N=0,$Default="선택하세요.");
?>