http://2ustory.com/board/board.php?bo_table=webtip&wr_id=223&sca=36012&page=5

레이어와 관련해서 화면을 구성하려고 뒤져보다가
간단하고 쓸만한게 있어서 응용해봤습니다.

1. 펼침형식으로 레이어 화면을 열어주는 팁
2. 새창처럼 겹쳐지는 형태의 레이어 화면 팁

각 내용을 파일형태로 분리해서 좀더 디테일 하게 작업하시면 됩니다.


------------ topMenuLayer.php 파일 ----------------------------

<script type="text/javascript">

function toggleLayer(whichLayer) {
  var elem, vis;
  if(document.getElementById) // 표준 DOM script
    elem = document.getElementById(whichLayer);
  else if(document.all)   // ie용
      elem = document.all[whichLayer];
  else if(document.layers)    // nn4용
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
  }
</script>

<style>
#topMLayer {
  width: 100%;
  border:0px solid #333;
  padding: 0px;
  background-color: #FFFFFF;
}

#dropMenu {  /* --- 펼침형식 --- */
    display: none;
    margin: 0px 0px 0px 0px;
    font-family: Arial, sans-serif;
    font-size: .8em;
border:1px solid #333;
}

#OverMenu {  /* --- 겹침형식 --- */
    display: none;
    margin: 0px 0px 0px 0px;
    font-family: Arial, sans-serif;
    font-size: .8em;
border:1px solid #333;
}

a.tlink {
font:Arial, dotum, 돋움, sans-serif, normal, 12px/130%,
}
</style>

<!--- 1. 펼침형식의 레이어 화면 -->
<div id="topMLayer">
<div id="dropMenu" style='height:200px'>

펼침형식의 레이어 화면입니다

</div>
</div>


<!--- 2. 떠있는 레이어 화면 -->
<div id="topMLayer">
<div id="OverMenu" style="position:absolute; width:650px; height:200px; z-index:10000;">

겹쳐진 형태의 떠있는 레이어 화면입니다

</div>
</div>



★★★ 위 내용을 파일(topMenuLayer.php)로 저장하여 임의의 위치에 넣어두고,
★★★ 불러올곳에 아래의 코드를 <메뉴>와 <출력> 부분에 위치시키면 됩니다.


1. <메뉴> 부분

 <a class="tlink" href="javascript:toggleLayer('dropMenu');">펼침메뉴</a>
 <a class="tlink" href="javascript:toggleLayer('OverMenu');">| 레이어메뉴</a>


2. <출력> 부분

<? include_once("경로/topMenuLayer.php");?>