바이블가든

슬라이드메뉴 (스크립트)

2005-04-05 (화) 07:15 조회:1716

<html>
<head>

<style>
.skin0{ position:absolute; width:200px; border:2px solid black; background-color:menu;
font-family:Verdana; line-height:20px; cursor:default; visibility:hidden; }

.skin1{cursor: default; font: menutext; position: absolute; width: 165px;
background-color: menu; border: 1 solid buttonface; visibility:hidden;
border: 2 outset buttonhighlight; }

.menuitems{padding-left:15px; padding-right:10px;}
</style>

<script language="JavaScript">
//메뉴의 형태를 선택하고자 하는 옵션(0 또는 1)
var menuskin=0

//0으로 설정할시 링크의 주소가 상태바에 나타나지 않는다.
var display_url=0

// 마우스의 클릭에 따른 메뉴의 위치지정
function showmenu(){
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY
// 메뉴의 수평위치 및 길이
if (rightedge<ie5menu.offsetWidth)
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
else
ie5menu.style.left=document.body.scrollLeft+event.clientX
// 메뉴의 수직위치 및 거리
if (bottomedge<ie5menu.offsetHeight)
ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
else
ie5menu.style.top=document.body.scrollTop+event.clientY

ie5menu.style.visibility="visible"
return false
}
// 메뉴를 안보이게 함
function hidemenu(){
ie5menu.style.visibility="hidden"
}
// 메뉴에 대해 마우스가 오버될시의 색상변화
function highlight_menu(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="highlight"
event.srcElement.style.color="white"
if (display_url==1)// 상태바에 대한 주소창 표시여부
window.status=event.srcElement.url
}
}
// 마우스 아웃시의 색상 변화
function lowlight_menu(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="black"
window.status=''
}
}
// 메뉴선택시 실제 링크주소 이동
function jumpto_url(){
if (event.srcElement.className=="menuitems"){
if (event.srcElement.getAttribute("target")!=null)
window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
else
window.location=event.srcElement.url
}
}
</script></head>
<body>
<div id="ie5menu" class="skin0" onMouseover="highlight_menu()"
onMouseout="lowlight_menu()" onClick="jumpto_url()">
<div class="menuitems" url="http://www.youngjin.com">YoungJin.com</div>
<div class="menuitems" url="#" target="_blank">공지사항</div><hr>
<div class="menuitems" url="#">새로운 논쟁?</div>
<div class="menuitems" url="#">프로필</div>
<div class="menuitems" url="#">질문사항</div>
<div class="menuitems" url="#">전송!!!</div><hr>
<div class="menuitems" url="mailto:baekgom@dinno.biz?subject=반갑습니다&body=^^">이메일을..</div>
</div>

<script language="JavaScript">
if (document.all&&window.print){
if (menuskin==0)
ie5menu.className="skin0"
else
ie5menu.className="skin1"
document.oncontextmenu=showmenu
document.body.onclick=hidemenu
}
</script>
</body>
</html>