2011년 9월 13일 화요일

드롭다운메뉴에 운좋게 웹표준이 적용됐다.


<style type="text/css">
#jsddm ,
#jsddm  li,
#jsddm  ul {
 list-style: none;
 margin: 0;
 padding: 0;
}


#jsddm li {float: left; list-style: none; font: 13px 돋움, dotum, Arial; vertical-align: middle; line-height: 1.3em; zoom: 1; }

#jsddm li a {
display: block;
padding: 14px 23 14px 24px;
background: #eeeeee;
text-decoration: none;
color: black;
white-space: nowrap;
display: block;

}

#jsddm li a:hover {background: #9ACD32}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
z-index:2;
}

#jsddm li ul li {

float: none;
display: block;
width: 160px;
background-color: #eeeeee;
}

#jsddm li ul li a {
width: 100%;
background: #eeeeee;
color: #24313C}

#jsddm li ul li a:hover{
background: #9ACD32}
</style>

<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout         = 500;
var closetimer    = 0;
var ddmenuitem      = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open);
   $('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
</script>
<ul id="jsddm">
        <li><a href="<?=$g4[path]?>/?pid=01_01">진흥회소개</a>
                <ul>
                        <li><a href="<?=$g4[path]?>/?pid=01_01">인사말</a></li>
                        <li><a href="<?=$g4[path]?>/?pid=01_02">설립목적 및 연혁</a></li>
                        <li><a href="<?=$g4[path]?>/?pid=01_03">주요사업</a></li>
                        <li><a href="<?=$g4[path]?>/?pid=01_04">조직도</a></li>
                        <li><a href="<?=$g4[path]?>/?pid=01_05">찾아오시는 길</a></li>
                </ul>
        </li>
        <li><a href="<?=$g4[path]?>/bbs/board.php?bo_table=board_05_01">정보자료실</a>
                <ul>
                        <li><a href="<?=$g4[path]?>/bbs/board.php?bo_table=board_05_01">화학뉴스</a></li>
                        <li><a href="<?=$g4[path]?>/?pid=02_02">화학산업관련통계</a></li>
                        <li><a href="<?=$g4[path]?>/?pid=02_03">발간자료</a></li>
                </ul>
        </li>
        <li><a href="<?=$g4[path]?>/?pid=03_01">자금지원</a>
                <ul>
                        <li><a href="<?=$g4[path]?>/?pid=03_01">특정물질사용합리화기금</a></li>
                </ul>
        </li>
        <li><a href="<?=$g4[path]?>/?pid=04_01">회원사</a>
                <ul>
                        <li><a href="<?=$g4[path]?>/?pid=04_01">회원사현황</a></li>
                        <li><a href="<?=$g4[path]?>/?pid=04_02">회원가입안내</a></li>
                </ul>
        </li>
        <li><a href="<?=$g4[path]?>/bbs/board.php?bo_table=board_02_01">공지사항</a>
                <ul>
                        <li><a href="<?=$g4[path]?>/bbs/board.php?bo_table=board_02_01">게시판</a></li>
                </ul>
        </li>
        <li><a href="<?=$g4[path]?>/?pid=06_01">제품안전정보</a>
                <ul>
                        <li><a href="<?=$g4[path]?>/?pid=06_01">사업소개</a></li>
                        <li><a href="<?=$g4[path]?>/?pid=06_02">PSDS자료</a></li>
                        <li><a href="<?=$g4[path]?>/?pid=06_03">관련정보 및 사이트</a></li>
                </ul>
        </li>
</ul>


그러나 #jsddm li ul li 에서 문자 길이가 늘어나면 width도 늘려야 한다.

댓글 없음:

댓글 쓰기