웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 : 1165
목록보기이전보기
셀렉트 메뉴도 이렇게 뒬 수 있습니다.

<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 : 1165
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 UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
기업 창의력 디자인 프로젝트 모바일 파트너 Adobe 가트너 아이콘 홈페이지 로고디자인 웹사이트 리더 대쉬보드 메인화면 이벤트 솔루션 홈페이지 어학 브라우저 포트폴리오 템플릿 로고 클라이언트 디테일 UX 디자인 서체 설득 포토샵 CIP 기획서 HTML 웹기획 Template 웹표준 플래시 퍼블리셔 업로드 애플리케이션