웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 : 969
목록보기이전보기
메뉴에 생명력을 넣어주세여. 입체감있는 라이트 메뉴

<html>
<head>
<title>Ex - 입체감있는 라이트 메뉴</title>
<style type="text/css">
.mnuTD{font-family:lucida console;font-size:10pt;filter:blendTrans(duration=1) Light();text-align:center;color:white;
border-top:buttonhighlight 3 solid;border-left:buttonhighlight 3 solid;border-right:buttonshadow 3 solid;border-bottom:buttonshadow 3 solid;
cursor:hand;font-weight:bolder;}
</style>
<script>

//--------사용자 설정부분 시작 -----------------------------
var color1=new Array("#CC99FF","#CC9999","#FFCC66","#66CCCC","#66FF99"); //연한색 마우스올리기전

var light1R=new Array(204,204,255,102,102);
var light1G=new Array(153,153,204,204,255);
var light1B=new Array(255,153,102,204,153);

var color2=new Array("#CC33FF","#CC6666","#FF9933","#6699CC","#66CC99"); //진한색 마우스 올림

var light2R=new Array(204,204,255,102,102);
var light2G=new Array(51,102,153,153,204);
var light2B=new Array(255,102,51,204,153);

var menu=new Array("About","Board","Data","Source","Program"); // 메뉴텍스트
var menuLink=new Array("http://www.yahoo.co.kr","http://www.daum.net","http://www.netian.com","http://www.ggame.net","http://www.naver.com"); //메뉴링크
var linkTarget="toIframe"; //링크타겟(아이프레임으로걸때 toIframe,새창으로 띄울때 toWindow,프레임으로 걸때 toFrame),

var menuWidth=80; //메뉴폭
var menuHeight=50; //메뉴높이
//--------사용자 설정부분 끝 -------------------------------




var containerWidth=parseInt(menuWidth) * parseInt(menu.length);

window.onload=fnInit;
function fnInit(){
  for(i=0;i<menu.length;i++){
   oDiv.rows(0).cells(i).filters.light.addCone(2,2,15,80,50,light2R[i],light2G[i],light2B[i],10,120);
  }
}


function trans1(idx){
with(event.srcElement){
filters(0).apply();
//filters.light.changeColor(0,light1R[idx],light1G[idx],light1B[idx],true);
filters.light.changeStrength(0,30,true);
//style.background=color2[idx];
style.color='black';
style.borderTop="#333333 3 solid";
style.borderLeft="#333333 3 solid";
style.borderBottom=color2[idx] +" 3 solid";
style.borderRight=color2[idx] +" 3 solid";
filters(0).play();
}
}
function trans2(idx){
with(event.srcElement){
filters(0).apply();
//filters.light.changeColor(0,light2R[idx],light2G[idx],light2B[idx],true);
filters.light.changeStrength(0,10,true);
//style.background=color1[idx];
style.color='white';
style.borderTop="buttonhighlight 3 solid";
style.borderLeft="buttonhighlight 3 solid";
style.borderBottom="buttonshadow 3 solid";
style.borderRight="buttonshadow 3 solid";
filters(0).play();
}
}
function goLink(idx){
if(linkTarget=="toIframe"){
ifr.location.href=menuLink[idx];
}
if(linkTarget=="toWindow"){
window.open(menuLink[idx],"mywin","");
}
if(linkTarget=="toFrame"){
parent.frameName.location.href=menuLink[idx];
}

}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" style="font-family:lucida console;font-size:9pt;">
입체감 있는 Light메뉴 예제입니다.
설명은 소스 주석에 되어있습니다.<br>
메뉴에 마우스를 올려보세요, 클릭하시면 일단 아이프레임으로 링크가 걸려있습니다. 링크를 걸 타겟은
소스에 보시면 변수 linkTarget부분에서 새창으로 링크걸려면 toWindow로 프레임문서중 다른프레임으로
링크를 거실려면 toFrame 으로 바꾸어주시면 됩니다<br>
<input style="font-family:lucida console;font-size:9pt" type=button value="소스보기" onclick='window.location = "view-source:" + window.location.href'>
<br><br><br>

<script>
//--- 메뉴 바디 스크립트 시작
document.write("<table id='oDiv' width='"+ containerWidth +"' border='0' cellspacing='0' cellpadding='0' style='border:black 1 solid'>");
document.write("<tr>");
for(i=0;i<menu.length;i++){
   document.write("<td  onclick='goLink("+ i +")'  class='mnuTD' height="+ menuHeight +" width="+ menuWidth +" bgcolor='"+ color1[i] +"' onmouseover='trans1("+ i +")' onmouseout='trans2("+ i +")'>"+  menu[i] +"</td>");
}
document.write("</tr>");
document.write("</table>");
//--- 메뉴 바디 스크립트 끝
</script>
<br>
<iframe name="ifr" src="about:blank" width=500 height=300>
</iframe>


</body>
</html>
Posted by kimdirector | 2004.03.22 | Hit : 969
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=WebdesignTip&no=76

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
기획안 로고디자인 구글 드라이브 라이트박스 개발자 UX 타이포그래피 애니메이션 HTML5 UI 폰트 스타일 애플 트위터 무료이미지 백터 소셜 마케팅 BIP 로고 디자인 일러스트 한글 프리젠테이션 홈페이지 디자인서적 UX 리더 모바일 회의 인터페이스 트렌드 웹사이트 패키지디자인 문화 UI iOS 코딩 서비스 typewonder CIO 인포그래픽