from Naver 지식검색_____________________________________
잘 아시겠지만, layer는 화면 어디에나 위치시킬 수 있죠..
그런데, layer 위치가 select 위에 올 때는
select가 가려지질 않고..
항상 layer 위쪽에 나타납니다.
이런 문제 해결책을 알고 계신분 계신가요?
---------------------------------------------------------
레이어와 Select Box는 자주 충돌하는 관계로 디자이너에게는 항상 골칫거리죠.
이 경우에는 해당 Select Box를 Div 태그로 묶어
자바스크립트로 레이어가 나타나면 Select Box가 들어있는 DIV를 숨겨주고
레이어가 사라지면 다시 나타나게 해주면 해결됩니다.
function layershow() {
document.all.menu.style.visibility = "visible";
document.all.selbox.style.visibility = "hidden";
}
function layerhide() {
document.all.menu.style.visibility = "hidden";
document.all.selbox.style.visibility = "visible";
}
이런 식이죠...
구체적인 소스는...
----------------------------------------------------
<html>
<head>
<title>Select Box와 Layer의 충돌막기</title>
<style type=text/css>
body {font-family:굴림; font-size:9pt;}
</style>
<script language="javascript">
<!--
function layershow() {
document.all.menu.style.visibility = "visible";
document.all.selbox.style.visibility = "hidden";
}
function layerhide() {
document.all.menu.style.visibility = "hidden";
document.all.selbox.style.visibility = "visible";
}
//-->
</script>
</head>
<body>
<!-- 레이어 정의 시작 -->
<div id=menu style="position:absolute;top:28;left:0;width:480;height:80px;background-color:#F0F0F0;visibility:hidden;">
<br><a href="javascript:layerhide()"> ▶서브메뉴해제. 선택상자가 나타납니다.</a><br>
</div>
<!-- 본문 시작 -->
----------- 상단메뉴 ------------------<br><br>
<a href="javascript:layershow()">▶서브메뉴선택. 선택상자가 사라집니다.</a>
<form name=form01>
<div id=selbox style="visibility:visible">
<select name=list01>
<option value='http://www.naver.com'>네이버</option>
<option value='http://www.daum.net'>다음</option>
</select>
</div>
</form>
</body>
</html>
<script language=javascript>
<!--
document.write("<iframe src='http://lcs.naver.com/u{"+document.URL+"}' width=0 height=0 frameborder=0></iframe>");
//-->
</script>
잘 아시겠지만, layer는 화면 어디에나 위치시킬 수 있죠..
그런데, layer 위치가 select 위에 올 때는
select가 가려지질 않고..
항상 layer 위쪽에 나타납니다.
이런 문제 해결책을 알고 계신분 계신가요?
---------------------------------------------------------
레이어와 Select Box는 자주 충돌하는 관계로 디자이너에게는 항상 골칫거리죠.
이 경우에는 해당 Select Box를 Div 태그로 묶어
자바스크립트로 레이어가 나타나면 Select Box가 들어있는 DIV를 숨겨주고
레이어가 사라지면 다시 나타나게 해주면 해결됩니다.
function layershow() {
document.all.menu.style.visibility = "visible";
document.all.selbox.style.visibility = "hidden";
}
function layerhide() {
document.all.menu.style.visibility = "hidden";
document.all.selbox.style.visibility = "visible";
}
이런 식이죠...
구체적인 소스는...
----------------------------------------------------
<html>
<head>
<title>Select Box와 Layer의 충돌막기</title>
<style type=text/css>
body {font-family:굴림; font-size:9pt;}
</style>
<script language="javascript">
<!--
function layershow() {
document.all.menu.style.visibility = "visible";
document.all.selbox.style.visibility = "hidden";
}
function layerhide() {
document.all.menu.style.visibility = "hidden";
document.all.selbox.style.visibility = "visible";
}
//-->
</script>
</head>
<body>
<!-- 레이어 정의 시작 -->
<div id=menu style="position:absolute;top:28;left:0;width:480;height:80px;background-color:#F0F0F0;visibility:hidden;">
<br><a href="javascript:layerhide()"> ▶서브메뉴해제. 선택상자가 나타납니다.</a><br>
</div>
<!-- 본문 시작 -->
----------- 상단메뉴 ------------------<br><br>
<a href="javascript:layershow()">▶서브메뉴선택. 선택상자가 사라집니다.</a>
<form name=form01>
<div id=selbox style="visibility:visible">
<select name=list01>
<option value='http://www.naver.com'>네이버</option>
<option value='http://www.daum.net'>다음</option>
</select>
</div>
</form>
</body>
</html>
<script language=javascript>
<!--
document.write("<iframe src='http://lcs.naver.com/u{"+document.URL+"}' width=0 height=0 frameborder=0></iframe>");
//-->
</script>
'프로그래밍Tips' 카테고리의 다른 글
| VNC를 이용한 웹에서의 서버(리눅스,유닉스)관리 (2) | 2006.01.06 |
|---|---|
| 글상자, Select 박스,등의 여러 요소들을 특정 지정 영역에서만 움직이게 하기... (2) | 2005.09.23 |
| Div로 마우스를 대면 스크롤하는 글상자 만들기..from [korea.internet.com] (0) | 2005.09.22 |