웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX





GUESTROOM
Practical Use Tip
HOME GUESTROOM Practical use Tip
트랜잭션 셀렉트메뉴
Posted by kimdirector | 2004.03.22 | Hit : 1183
목록보기이전보기
셀렉트 메뉴도 이렇게 뒬 수 있습니다.

<html>
<head>
<title>
</title>
<style type="text/css">
div,span,td{font-family:lucida console;font-size:9pt;}
#headbox{border:#D6D3CE 2 inset}
.item{padding-left:3px;filter:blendTrans(duration=1);background:white;color:black;}
</style>
<script>

//메뉴 스크립트 시작------------------------------------------------------
function call_select(){
if(bodybox.style.display=="none"){
bodybox.style.display="block";
header.style.background="white";
header.style.color="black";
}else{
bodybox.style.display="none";
header.style.background="activecaption";
header.style.color="white";
}
}
function callTrans(){
event.srcElement.filters(0).apply();
event.srcElement.style.background="activecaption";
event.srcElement.style.color="white";
event.srcElement.filters(0).play();
}
function callTrans2(){
event.srcElement.filters(0).apply();
event.srcElement.style.background="white";
event.srcElement.style.color="black";
event.srcElement.filters(0).play();
}
function callText(){
header.filters(0).apply();
header.innerText=event.srcElement.innerText;
bodybox.style.display="none";
header.style.background="activecaption";
header.style.color="white";
header.filters(0).play();
}
//메뉴 스크립트 끝------------------------------------------------------

</script>
</head>

<body>
<!-- select메뉴 시작----------------------------->
<div id=container style="position:absolute;left:100;top:100;width:120;height:300;">
<!-- //메뉴의 위치변경은 container의 left와 top를 변경하면됩니다 -->
<div id=headbox style="position:absolute;left:0;top:0;width:120;height:23px;">

<span id=header style="cursor:default;position:absolute;left:0;top:0;width:100;padding-left:3px;padding-top:2px;height:20px;filter:revealTrans(duration=1,transition=6);">
option Menu
</span>
<span id=arrow style="cursor:default;position:absolute;left:99;top:0;width:15px;font-size:8pt;background:buttonface;height:18px;padding-left:2px;padding-top:2px;border-top:buttonhighlight 2 solid;border-left:buttonhighlight 2 solid;border-right:buttonshadow 2 solid;border-bottom:buttonshadow 2 solid;"
onclick="call_select()">

</span>

</div>
<span id=bodybox style="display:none;position:absolute;left:0;top:24;width:120;border:black 1 solid;">
<table width="100%" cellspacing=0 style="cursor:default">
<tr><td class=item onmouseover="callTrans()" onmouseout="callTrans2()" onclick="callText()">JavaScript</td></tr>
<tr><td class=item onmouseover="callTrans()" onmouseout="callTrans2()" onclick="callText()">DHTML</td></tr>
<tr><td class=item onmouseover="callTrans()" onmouseout="callTrans2()" onclick="callText()">VML</td></tr>
<tr><td class=item onmouseover="callTrans()" onmouseout="callTrans2()" onclick="callText()">XML</td></tr>
<tr><td class=item onmouseover="callTrans()" onmouseout="callTrans2()" onclick="callText()">WML</td></tr>
<!-- 메뉴 추가는 tr ~ /tr까지 복사하고 셀내용만 바꾸면 됩니다 -->
</table>
</span>
</div>
<!-- select메뉴 끝------------------------------->

<input style="font-family:lucida console;font-size:9pt" type=button value="소스보기" onclick='window.location = "view-source:" + window.location.href'>
</body>
</html>
Posted by kimdirector | 2004.03.22 | Hit : 1183
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=WebdesignTip&no=73

COMMENT
목록보기 이전보기
GUESTROOM
Leaders Story
Download Review
Practical Use Tip
IT Information & News
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile Work IT Information Web Identity Work Everyday Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
무료 디자인 WEB 유네스코 기업 창의력 포탈 홈페이지 kit digital 사용자 경험 HI 디자인 UI 웹기획 구글 메일폼 프리에이전트 디자이너 아바타 Dashel 메시지 스마트워치 웹 사이트 북유럽 안드로이드 엑셀 아이콘 CIP 조직 UX IT 아이콘 Adobe 기업 웹 사이트 브랜드 데이터 윈도우 아이패드 독창성