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도 늘려야 한다.
피드 구독하기:
댓글 (Atom)
댓글 없음:
댓글 쓰기