초간단 펼침 or 떠있는 레이어 화면, 레이어메뉴 만들기
로빈아빠
본문
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('dropMenu');">| 레이어메뉴</a>
2. <출력> 부분
<? include_once("경로/topMenuLayer.php");?>
레이어와 관련해서 화면을 구성하려고 뒤져보다가
간단하고 쓸만한게 있어서 응용해봤습니다.
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('dropMenu');">| 레이어메뉴</a>
2. <출력> 부분
<? include_once("경로/topMenuLayer.php");?>
관련링크
댓글목록
등록된 댓글이 없습니다.