레이어를 이용한 JavaScript 메뉴구성

Menu,Navigation/메뉴 2008. 7. 23. 21:53

/* Tistory_336_ads01 */ /* Tistory_336_ads01 */

<html>
<head>
<title>연변88닷컴</title>

<script language="JavaScript">
<!--
function InitMenu() {
    var bar = menubar.children;     
        for(var i = 0; i < bar.length; i++) {
    var menu = eval(bar[i].menu);
        menu.style.visibility = "hidden";
        bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")");
    var Items = menu.children;
        for(var j = 0; j < Items.length; j++) {
    var Item = eval(Items[j].id);
        if (Item.menu != null) FindSubMenu(Item.menu);
        if (Item.url != null) Item.onclick = new Function("SiteGo("+Item.id+")");
            Item.onmouseover = new Function("highlight("+Items[j].id+",true)");
            Item.onmouseout = new Function("highlight("+Items[j].id+",false)");
        }    
    }  
}
  
function FindSubMenu(subMenu) {
    var menu = eval(subMenu);
    var Items = menu.children;
        for (var j = 0; j < Items.length; j++) {
            menu.style.visibility = "hidden";
    var Item = eval(Items[j].id);
        if (Item.menu !=  null) FindSubMenu(Item.menu);
        if (Item.url != null) Item.onclick = new Function("SiteGo("+Item.id+")");
            Item.onmouseover = new Function("highlight("+Items[j].id+",true)");
            Item.onmouseout = new Function("highlight("+Items[j].id+",false)");
        }  
    } 

function ShowMenu(obj) {
    HideMenu(menubar);
    var menu = eval(obj.menu);
    var bar = eval(obj.id);
    bar.className="barOver";
    menu.style.visibility = "visible";
    menu.style.pixelTop =  obj.getBoundingClientRect().top + obj.offsetHeight + mbd.scrollTop;
    menu.style.pixelLeft = obj.getBoundingClientRect().left + mbd.scrollLeft;
}
   
function highlight(obj,mouse) {
    if (!mouse) 
        obj.className = "Item";
    else 
        obj.className = "ItemMouseOver";
        window.status = '▒ ' + event.srcElement.innerText + ' ▒';
        ShowSubMenu(obj);
}
  
function SiteGo(obj) {
    if (event.srcElement.getAttribute("target") != null)
        window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
    else
        window.location = event.srcElement.url;
}
   
function HideMenu(obj) {
    if (obj.hasChildNodes() == true) {  
        var child = obj.children;     
    for (var j = 0; j < child.length; j++) {
    if (child[j].className == "barOver") {
        var bar = eval(child[j].id);
        bar.className = "bar";
      }

    if (child[j].menu != null) {
        var childMenu = eval(child[j].menu);
    if (childMenu.hasChildNodes() == true) 
    HideMenu(childMenu);
    childMenu.style.visibility = "hidden"; 
            }
        }
    }
}
   
function ShowSubMenu(obj) {
    PMenu = eval(obj.parentElement.id);
    HideMenu(PMenu);
    if (obj.menu != null) {
    var menu = eval(obj.menu);
        menu.style.visibility = "visible";
        menu.style.pixelTop = obj.getBoundingClientRect().top + mbd.scrollTop;
        menu.style.pixelLeft = obj.getBoundingClientRect().right + mbd.scrollLeft;
    if (menu.getBoundingClientRect().right > window.screen.availWidth)
        menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth;
    }
}
//-->
</script>


<style type="text/css">
<!--
.bar, .barOver {
position: relative; float: left; width: 150px; cursor: hand; text-align: center;
font-family: verdana, arial, sans-serif; font-size: 12px; font-weight: bold;
background-color: menu; border: buttonface 2px solid
}
.barOver {border: buttonhighlight 2px outset}
.sm {
position: absolute; visibilty: hidden; width: 150px;
background-color: menu; border: buttonhighlight 2px outset;
font-family: verdana, arial, sans-serif; font-size: 12px
}
.Item, .ItemMouseOver {
padding-left: 10px; width: 100%; cursor: hand; border-bottom: gray 1px solid
}
.ItemMouseOver {color: white; background-color: highlight}
-->
</style>


</head>
<body onLoad="InitMenu()" onClick="HideMenu(menubar)" id="mbd">

<div Id="menubar">
  <div Id="bar1" class="bar" menu="menu1">YB88</div>
  <div Id="bar2" class="bar" menu="menu2">YB88</div>
  <div Id="bar3" class="bar" menu="menu3">YB88</div>
  <div Id="bar4" class="bar" menu="menu4">YB88</div>
</div>

<div Id="menu1" class="sm">
  <div Id="Item1_1" class="Item" menu="menu6">1-1 >></div>
  <div Id="Item1_2" class="Item" url="http://myhome.naver.com/rangs75/">1-2</div>
  <div Id="Item1_3" class="Item" url="about:blank" target="_blank">1-3</div>
</div>
<div Id="menu2" class="sm">
  <div Id="Item2_1" class="Item">2-1</div>
  <div Id="Item2_2" class="Item">2-2</div>
  <div Id="Item2_3" class="Item">2-3</div>
  <div Id="Item2_4" class="Item">2-4</div>
  <div Id="Item2_5" class="Item">2-5</div>
</div>
<div Id="menu3" class="sm">
  <div Id="Item3_1" class="Item">3-1</div>
  <div Id="Item3_2" class="Item">3-2</div>
  <div Id="Item3_3" class="Item">3-3</div>
  <div Id="Item3_4" class="Item" menu="menu5">3-4 >></div>
</div>
<div Id="menu4" class="sm">
  <div Id="Item4_1" class="Item">4-1</div>
  <div Id="Item4_2" class="Item">4-2</div>
</div>
<div id="menu5" class="sm">
  <div Id="Item5_1" class="Item">3-4-1</div>
  <div Id="Item5_2" class="Item">3-4-2</div>
  <div Id="Item5_3" class="Item">3-4-3</div>
</div>
<div id="menu6" class="sm">
  <div Id="Item6_1" class="Item">1-1-1</div>
  <div Id="Item6_2" class="Item">1-1-2</div>
  <div Id="Item6_3" class="Item" menu="menu7">1-1-3 >></div>
</div>
<div id="menu7" class="sm">
  <div Id="Item7_1" class="Item">1-1-3-1</div>
  <div Id="Item7_2" class="Item">1-1-3-2</div>
  <div Id="Item7_3" class="Item">1-1-3-3</div>
  <div Id="Item7_4" class="Item">1-1-3-4</div>
</div>


</body>
</html>

BODY 태그에서 이벤트핸들러에 의해 실행 각 디비젼 태그의 속성중에 menu의 값은 서브메뉴의 위치입니다.
즉, Main Menu1의 서브를 보면

<div Id="bar1" class="bar" menu="menu1">Main Menu1</div>

여기서 menu=menu1을 통해 디비젼태그의 id가 menu1인곳을 서브로 사용합니다.
<div Id="menu1" class="sm">
<div Id="Item1_1" class="Item" menu="menu6">1-1</div>
<div Id="Item1_2" class="Item" url="http://www.yb88.com/";>1-2</div>
<div Id="Item1_3" class="Item" url="about:blank" target="_blank">1-3</div>
</div>

다시 여기서 <div Id="Item1_1" class="Item" menu="menu6">1-1</div>
1-1은 menu=menu6을 통해 디비젼태그의 id가 menu6인곳을 서브로 사용합니다.

<div id="menu6" class="sm">
<div Id="Item6_1" class="Item">1-1-1</div>
<div Id="Item6_2" class="Item">1-1-2</div>
<div Id="Item6_3" class="Item" menu="menu7">1-1-3</div>
</div>
다시 여기서 <div Id="Item6_3" class="Item" menu="menu7">1-1-3</div>
1-1-3은 다음 서브메뉴인 menu7을 사용합니다.

'Menu,Navigation > 메뉴' 카테고리의 다른 글

java 드롭다운 메뉴를 선택하면 하단에 메뉴 설명이 나타납니다 (1)	2008.07.23
클릭하면 닫기 메뉴와 슬라이딩 체인지 되고 다시 클릭하면 나타나는 java메뉴 (0)	2008.07.23
메뉴 밑으로 바(BAR)가 플래쉬처럼 슬라이딩 되는 자바 (1)	2008.07.23
오른쪽 마우스 버튼을 클릭하면 나타나는 java메뉴 1 (1)	2008.07.23
플레쉬효과 같은 자바스크립 환상 메뉴구성 (2)	2008.07.23
셀렉트를 이용한 드롭다운 java메뉴 (선택시 바로 이동) (1)	2008.07.23
자바스크립을 이용한 드롭다운 메뉴 (1)	2008.07.23
스타일을 이용한 자바 메뉴구성 (하단에 페이드인 메뉴설명박스) (2)	2008.07.23
3D 회전 메뉴 자바스크립트 (1)	2008.07.23

Posted by 공든탑

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

연변88자바

레이어를 이용한 JavaScript 메뉴구성

'Menu,Navigation > 메뉴' 카테고리의 다른 글

카테고리

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바