Tool Bar Menu (980712)
../

[실행하기]

사용하고 있는 브라우저의 각 메뉴에 마우스를 누르면 하부 메뉴가 나오죠? 그런것을 하는 페이지입니다. 많은 외부 링크를 가지고 있는 사이트에서 어떤 주제에 맞게 하부 페이지의 주소를 넣는 것입니다. 이렇게 하면 좀 더 생동감 있고 링크의 성격을 잘 표현할 수 있습니다.

HOME, SOURCE, LINK, DHTML의 4개의 메뉴가 있고 각 메뉴에는 여러개의 관련 링크가 있습니다.

HOMESOURCELINKDHTML
home link 1
home link 2
home link 3		 source link 1
source link 2
source link 3
source link 4		 faq link 1
faq link 2		 dhtml link 1
dhtml link 2
dhtml link 3
dhtml link 4
dhtml link 5

이 4개의 메뉴와 하부의 링크들을 브라우저의 메뉴형식으로 만듭니다. 이것들에게 style을 지정하고 mouseover 이벤트를 사용합니다. 각 메뉴에 마우스를 가져가면 하부 링크들을 보여주고 마우스를 밖으로 빼면 다시 하부 링크들을 감추어 줍니다.

각 메뉴는 mouseover 이벤트를 사용할 수 있게 css layer로 만듭니다. 그리고 각 하부 링크들에게도 자신의 링크에 왔을 때, 강조하기 위해서 링크들의 바탕색을 바꾸어 줍니다. 그래서, 각 하부의 링크들도 css layer로 만듭니다. 아래는 사용한 style입니다. 

<style>
A:link { text-decoration:none;}
A:visited { text-decoration:none; }
.cen { text-align:center; }

#D1 { position:absolute; top:100; left:0; width:100; background-color:yellow; layer-background-color:yellow; font-size:13px; border-width:2; border-style:ridge; border-color:green; color:red;}
#D2 { position:absolute; top:100; left:100; width:100; background-color:red; layer-background-color:red; font-size:13px; border-width:2; border-style:ridge; border-color:yellow; }
#D3 { position:absolute; top:100; left:200; width:100; background-color:aqua; layer-background-color:aqua; font-size:13px; border-width:2; border-style:ridge; border-color:lime; } 
#D4 { position:absolute; top:100; left:300; width:100; background-color:lime; layer-background-color:lime; font-size:13px; border-width:2; border-style:ridge; border-color:red;}

#S1 { position:absolute; top:100; left:0; width:100; background-color:yellow; layer-background-color:yellow; visibility:hidden; }
#S2 { position:absolute; top:100; left:100; width:100; background-color:red; layer-background-color:red; visibility:hidden;}
#S3 { position:absolute; top:100; left:200; width:100; background-color:aqua; layer-background-color:aqua; visibility:hidden;}
#S4 { position:absolute; top:100; left:300; width:100; background-color:lime; layer-background-color:lime; visibility:hidden;}

#s11 { position:absolute; font-size:14px; width:100; background-color:transparent; }
#s12 { position:absolute; font-size:14px; width:100; background-color:transparent;}
#s13 { position:absolute; font-size:14px; width:100; background-color:transparent; }

#s21 { position:absolute; font-size:14px; width:100; background-color:transparent; }
#s22 { position:absolute; font-size:14px; width:100; background-color:transparent; }
#s23 { position:absolute; font-size:14px; width:100; background-color:transparent; }
#s24 { position:absolute; font-size:14px; width:100; background-color:transparent; }

#s31 { position:absolute; font-size:14px; width:100; background-color:transparent; }
#s32 { position:absolute; font-size:14px; width:100; background-color:transparent; }

#s41 { position:absolute; font-size:14px; width:100; background-color:transparent; }
#s42 { position:absolute; font-size:14px; width:100; background-color:transparent; }
#s43 { position:absolute; font-size:14px; width:100; background-color:transparent; }
#s44 { position:absolute; font-size:14px; width:100; background-color:transparent; }
#s45 { position:absolute; font-size:14px; width:100; background-color:transparent; }
</style>
아래는 지정한 HTML입니다. 
<script language="javascript">
if(n4) { 
	document.write('' 
		+ '<div id=D1><font class="cen">HOME</font></div>'
		+ '<div id=D2><font class="cen">SOURCE</font></div>'
		+ '<div id=D3><font class="cen">LINK</font></div>'
		+ '<div id=D4><font class="cen">DHTML</font></div>'
	)
}
else if(e4) {
	document.write('' 
		+ '<div id=D1 align="center">HOME</div>'
		+ '<div id=D2 align="center">SOURCE</div>'
		+ '<div id=D3 align="center">LINK</div>'
		+ '<div id=D4 align="center">DHTML</div>'
	)
}
</script>

<div id=S1>
  <div id=s11 class="cen"><a href="javascript:alert('Go s11 Layer')">s11 Layer</a></div><br>
  <div id=s12 class="cen"><a href="javascript:alert('Go s12 Layer')">s12 Layer</a></div><br>
  <div id=s13 class="cen"><a href="javascript:alert('Go s13 Layer')">s13 Layer</a></div>
</div>
<div id=S2>
  <div id=s21 class="cen"><a href="javascript:alert('Go s21 Layer')">s21 Layer</a></div><br>
  <div id=s22 class="cen"><a href="javascript:alert('Go s22 Layer')">s22 Layer</a></div><br>
  <div id=s23 class="cen"><a href="javascript:alert('Go s23 Layer')">s23 Layer</a></div><br>
  <div id=s24 class="cen"><a href="javascript:alert('Go s24 Layer')">s24 Layer</a></div>
</div>
<div id=S3>
  <div id=s31 class="cen"><a href="javascript:alert('Go s31 Layer')">s31 Layer</a></div><br>
  <div id=s32 class="cen"><a href="javascript:alert('Go s32 Layer')">s32 Layer</a></div>
</div>
<div id=S4>
  <div id=s41 class="cen"><a href="javascript:alert('Go s41 Layer')">s41 Layer</a></div><br>
  <div id=s42 class="cen"><a href="javascript:alert('Go s42 Layer')">s42 Layer</a></div><br>
  <div id=s43 class="cen"><a href="javascript:alert('Go s43 Layer')">s43 Layer</a></div><br>
  <div id=s44 class="cen"><a href="javascript:alert('Go s44 Layer')">s44 Layer</a></div><br>
  <div id=s45 class="cen"><a href="javascript:alert('Go s45 Layer')">s45 Layer</a></div>
</div>
D1, D2, D3, D4가 각 메뉴로 사용할 레이어이고, S1, S2, S3, S4는 각 메뉴의 링크들을 가지고 있는 레이어인데 메뉴에 마우스를 가지고 가면 보여줄 링크들을 가지고 있습니다.

위의 굵은 줄은 nn4에서 border style를 지정한 레이어에서 text-align을 적용하면 레이어 안의 글자가 나오지 않고 align이 듣지 않아서 그리고 ie4에서 레이어에 mouseover 이벤트를 지정시 레이어 안의 택도 같이 이벤트가 지정되어 번쩍 거리게 됩니다. 그래서 두개로 나누어 줍니다.

각 레이어들을 지정했습니다. 이제 가장 먼저 해야할 것은 각 레이어들을 페이지에 배치하는 것입니다. 사용할 것들이 이미지라면 이미지의 크기로 배치가 가능하지만 글자를 사용한다면 레이어의 크기를 정확히 알기가 어렵습니다. 그래서 페이지가 출력된 후 레이어의 크기를 읽고 레이어들을 배치합니다. 

<body onLoad="init()">
아래는 init() 함수에 있는 nn4용 코드입니다. 
var centerPos = parseInt((window.innerWidth-400)/2) 

for(var i=1,s=1,menuLayer,subLayer; i<5; i++) {

  menuLayer = document.layers["D"+i]
  subLayer = document.layers["S"+i]

  menuLayer.left = centerPos + (i-1)*100 // (1)
  menuLayer.clip.right=100           // (2)
  menuLayer.onmouseover=menuOver // (3)
  menuLayer.onmouseout=menuOut   // (4)

  subLayer.top = menuLayer.top + menuLayer.document.height // (5)
  subLayer.left = menuLayer.left // (6)
  subLayer.clip.right=100
  subLayer.onmouseover=new Function("subLayerOn=this.id"); // (7)
  subLayer.onmouseout=new Function("this.visibility='hidden'")

  for(s=1; s<=subLayer.document.layers.length; s++) {
    subLayer.document.layers["s"+i+""+s].clip.right=100
    subLayer.document.layers["s"+i+""+s].onmouseover=new Function("this.bgColor='silver'")
    subLayer.document.layers["s"+i+""+s].onmouseout=new Function("this.bgColor='white'")
  }
}
주석(1) 번은 각 메뉴 레이어들을 페이지 중앙에 한 줄로 배치를 합니다.

주석(2) 번은 border를 지정하지 않은 레이어는 width로는 내용물의 크기 만큼만 바탕색을 보여줍니다. 그래서 100을 clip해줍니다. 이 코드에서는 메뉴 레이어에 border가 있으므로 위의 코드는 삭제해도 됩니다. 만약, 메뉴 레이어에 border를 없엘려면 위의 줄을 넣어주어야 합니다.

주석(3), (4) 번으로 메뉴 레이어에 마우스를 가져갔을 때 링크들을 가지고 있는 레이어를 보여주고 감추는 마우스 이벤트를 지정합니다.

주석(5), (6) 번으로 링크 이미지를 가지고 있는 레이어들을 메뉴 레이어의 바로 아래에 배치를 합니다.

주석(7)은 링크 이미지를 가지고 있는 레이어에 마우스를 가지고 갔을 때, 이 레이어를 계속 보여줍니다. 마우스를 치우면 이 레이어를 보이지 않게 합니다. 이것은 HOME, SOURCE, LINK, DHTML 의 메뉴에서 마우스를 치웠을 때, 이들 링크를 가지고 있는 레이어를 감추고 만약, 링크를 가지고 있는 레이어에 마우스가 있다면 감추지 않게 합니다. 즉, subLayerOn은 메뉴 레이어의 mouseout 이벤트에서 마우스의 위치를 판단하는데 사용합니다.

아래는 위의 코드와 같은 일을 하는 ie4용 입니다. 

var divTag = document.all.tags("div"), co, upH
var centerPos = parseInt((document.body.clientWidth-400)/2) 

for(var i=1,s=1; i<5; i++) {
  document.all["D"+i].onmouseover=menuOver
  document.all["D"+i].onmouseout=menuOut
  document.all["D"+i].style.pixelLeft = centerPos + (i-1)*100 

  document.all["S"+i].style.pixelTop = document.all["D"+i].style.pixelTop + document.all["D"+i].offsetHeight 
  document.all["S"+i].style.pixelLeft = document.all["D"+i].style.pixelLeft

  for(s=1,co=1,upH=0; co < divTag.length; co++) {

    if( divTag[co].id.indexOf("s"+i+""+s) != -1 ) {
      document.all["s"+i+""+s].onmouseover = new Function("this.style.backgroundColor='silver'; subLayerOn=this.parentElement.id");
      document.all["s"+i+""+s].onmouseout = e4sOut
      document.all["s"+i+""+s].style.pixelTop = upH
      upH = document.all["s"+i+""+s].style.pixelTop + document.all["s"+i+""+s].offsetHeight 
      s++
    }
  }
  document.all["S"+i].style.height=upH
}
ie4에서는 모든 레이어를 이름으로 제어합니다. css-p 레이어를 하나의 배열로 지정하는 nn4의 document.layers 같은 것이 없기 때문에 이름이나 택의 이름으로 제어해야 합니다. 위의 첫번재 굵은 줄은 ie4에서 상하위가 간은 이벤트를 가지고 있으면 하위가 먼저 일어나서 따로 함수를 정의 합니다. 두번째 굵은 줄은 링크들을 가지고 있는 레이어들의 높이를 지정합니다.

나머지 사용한 JavaScript입니다. 

function subOn(X) {
	if(n4) {
		if( !subLayerOn ) document.layers[X].visibility="hidden"
		subLayerOn = ""
	}
	else if(e4) {
		if( !subLayerOn ) document.all[X].style.visibility="hidden"
		subLayerOn = ""
	}
}
subOn 함수는 마우스가 링크들을 가지고 있는 레이어에 있으지 아닌지를 정보를 저장하고 있는 외부변수 subLayerOn에서 읽고 보여줄지 감출지를 결정합니다. 
function menuOver() {
	if(n4) { 
		if(this.id == "D1") document.S1.visibility="visible"
		else if(this.id == "D2") document.S2.visibility="visible"
		else if(this.id == "D3") document.S3.visibility="visible"
		else if(this.id == "D4") document.S4.visibility="visible"
	}
	else if(e4) { 
		var temp
		if(this.id == "D1") temp = "S1"
		else if(this.id == "D2") temp = "S2"
		else if(this.id == "D3") temp = "S3"
		else if(this.id == "D4") temp = "S4"
		setTimeout("document.all."+temp+".style.visibility='visible'", 10)
	}
}
메뉴에 마우스가 가면 무조건 하위 링크들을 가지고 있는 레이어를 보여줍니다. 
function menuOut() {
	if(n4) {
		if(this.id == "D1") { setTimeout("subOn('S1')", 1); }
		else if(this.id == "D2") { setTimeout("subOn('S2')", 1);}
		else if(this.id == "D3") { setTimeout("subOn('S3')", 1);}
		else if(this.id == "D4") { setTimeout("subOn('S4')", 1);}
	}
	else if(e4) {
		if(this.id == "D1") { setTimeout("subOn('S1')", 1);}
		else if(this.id == "D2") { setTimeout("subOn('S2')", 1);}
		else if(this.id == "D3") { setTimeout("subOn('S3')", 1);}
		else if(this.id == "D4") { setTimeout("subOn('S4')", 1);}
	}
}
메뉴에서 마우스가 빠져 나가면 각각의 하위레이어를 감춥니다. 이 때, 메뉴에서 빠져나간 마우스가 하위 레이어에 있다면 subLaerOn 외부변수에 문자가 지정되어 있는데 이 때는 감추지 않게 합니다. 메뉴에서 하위 링크들을 가지고 있는 레이어로 마우스를 옮기면 아주 적은 시간을 쉬게합니다. 여기서는 0.001 초를 지정했습니다. 이 시간이 메뉴에서 빠져나간 마우스가 하위 레이어에 있는지 아니면 다른 메뉴나 아니면 완전히 빠져 나갔는지를 판단합니다. 
function e4sOut() { 

  subLayerOn="" 

  if(e4) {
    this.style.backgroundColor='white';
    if(this.parentElement.id == "S1") {setTimeout("subOn('S1')", 1);}
    else if(this.parentElement.id == "S2") {setTimeout("subOn('S2')", 1);}
    else if(this.parentElement.id == "S3") {setTimeout("subOn('S3')", 1);}
    else if(this.parentElement.id == "S4") {setTimeout("subOn('S4')", 1);}
  }
}
--
css 레이어를 사용한 이 페이지에서 html 작성시 nn4에서는 css 레이어들을 페이지 맨 아래에 적어야 한다. 그렇지 않으면 link 택에 지정한 style이 듣지 않는다.


T O P