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

<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 : 1157
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
UI 자바스크립트 모바일 웹디자인 모바일 BIP iPhone 문서 로고디자인 현대화 프로세스 동기부여 빅데이터 JQuery GNB 디자인 현업 웹사이트 홈페이지 아이콘 개발자 로고 CIP 온라인 광고 왕은실 iOS 무료 다운로드 HTML5 타이포그래피 카메라 온라인 이카다로그 웹퍼블리셔 폰트 실행 프라이버시 분석 스타일시트