웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
[초간단 자바스크립트!] 서브메뉴 만들기...~
2004.03.10 19:18
오래간만에 또 올리게 되네요..-0-;;;; ...쓰잘떼기 없는거 하나
또 갖구 왔습니다..
레이어를 이용해서 만든 메뉴입니다....
마우스를 가져가면 지정된 레이어가 보이거나 사라지는 거죠...^^
필요한 스크립트를 넣고...
<script language="JavaScript">
<!--
function na_hide_layer(lname)
{
if (document.layers)
document.layers[lname].visibility = "hide"
if(document.all)
document.all(lname).style.visibility = "hidden"
}
function na_show_layer(lname)
{
if(document.layers)
document.layers[lname].visibility = "show"
if(document.all)
document.all(lname).style.visibility = "visible"
}
// -->
</script>
메뉴1, 메뉴2, 메뉴3을 만듭니다...
메뉴1에 마우스를 가져가면(OnMouseOver) sub1레이어는 보여지고(show) sub2, sub3레이어는 숨겨지게(hide)...
<a OnMouseOver="na_show_layer("sub1");na_hide_layer("sub2");na_hide_layer("sub3");" href="#">메뉴1</a><br>
메뉴2에 마우스를 가져가면(OnMouseOver) sub1, sub3레이어는 숨겨지고(hide) sub2레이어는 보여지게(show)...
<a OnMouseOver="na_hide_layer("sub1");na_show_layer("sub2");na_hide_layer("sub3");" href="#">메뉴2</a><br>
메뉴3에 마우스를 가져가면(OnMouseOver) sub1, sub2레이어는 숨겨지고(hide) sub3레이어는 보여지게(show)...
<a OnMouseOver="na_hide_layer("sub1");na_hide_layer("sub2");na_show_layer("sub3");" href="#">메뉴3</a>
서브메뉴에 해당하는 레이어를 만듭니다.
레이어 id는 알아보기 쉽게 sub1, sub2, sub3로 줬습니다.
<div id="sub1" style="width:75px; height:110px; position:absolute; left:61px; top:15px; z-index:1; visibility:hidden;">서브메뉴1</div>
<div id="sub2" style="width:75px; height:110px; position:absolute; left:61px; top:32px; z-index:1; visibility:hidden;">서브메뉴2</div>
<div id="sub3" style="width:75px; height:110px; position:absolute; left:61px; top:49px; z-index:1; visibility:hidden;">서브메뉴3</div>
...;;; 질문이나 의문점은 리플로 달아주세요...;;;
미리보기는
http://myhome.naver.com/frankpkg/submenu.htm
또 갖구 왔습니다..
레이어를 이용해서 만든 메뉴입니다....
마우스를 가져가면 지정된 레이어가 보이거나 사라지는 거죠...^^
필요한 스크립트를 넣고...
<script language="JavaScript">
<!--
function na_hide_layer(lname)
{
if (document.layers)
document.layers[lname].visibility = "hide"
if(document.all)
document.all(lname).style.visibility = "hidden"
}
function na_show_layer(lname)
{
if(document.layers)
document.layers[lname].visibility = "show"
if(document.all)
document.all(lname).style.visibility = "visible"
}
// -->
</script>
메뉴1, 메뉴2, 메뉴3을 만듭니다...
메뉴1에 마우스를 가져가면(OnMouseOver) sub1레이어는 보여지고(show) sub2, sub3레이어는 숨겨지게(hide)...
<a OnMouseOver="na_show_layer("sub1");na_hide_layer("sub2");na_hide_layer("sub3");" href="#">메뉴1</a><br>
메뉴2에 마우스를 가져가면(OnMouseOver) sub1, sub3레이어는 숨겨지고(hide) sub2레이어는 보여지게(show)...
<a OnMouseOver="na_hide_layer("sub1");na_show_layer("sub2");na_hide_layer("sub3");" href="#">메뉴2</a><br>
메뉴3에 마우스를 가져가면(OnMouseOver) sub1, sub2레이어는 숨겨지고(hide) sub3레이어는 보여지게(show)...
<a OnMouseOver="na_hide_layer("sub1");na_hide_layer("sub2");na_show_layer("sub3");" href="#">메뉴3</a>
서브메뉴에 해당하는 레이어를 만듭니다.
레이어 id는 알아보기 쉽게 sub1, sub2, sub3로 줬습니다.
<div id="sub1" style="width:75px; height:110px; position:absolute; left:61px; top:15px; z-index:1; visibility:hidden;">서브메뉴1</div>
<div id="sub2" style="width:75px; height:110px; position:absolute; left:61px; top:32px; z-index:1; visibility:hidden;">서브메뉴2</div>
<div id="sub3" style="width:75px; height:110px; position:absolute; left:61px; top:49px; z-index:1; visibility:hidden;">서브메뉴3</div>
...;;; 질문이나 의문점은 리플로 달아주세요...;;;
미리보기는
http://myhome.naver.com/frankpkg/submenu.htm
댓글 11
제목 | 글쓴이 | 날짜 |
---|---|---|
쉘 명령어 사용하기 [11] | 9000㎒ | 2003.12.02 |
세션을 이용한 관리자 모드 구축하기 1강(중복?) | 박정호 | 2003.12.09 |
세션을 이용한 관리자 모드 구축하기 2강 [6] | 박정호 | 2003.12.09 |
세션을 이용한 관리자 모드 구축하기 3강 [6] | 박정호 | 2003.12.09 |
DB에서 받은 데이터 배열로 하나씩 뿌리기 | LetMeLove | 2003.12.09 |
편법을 이용한 inlive 방송여부 체크 [7] | 심심타 | 2003.12.09 |
카일레라 서버 페이지 만들기. [2] | teslaMINT | 2003.12.09 |
[제로카운터] 자동으로 DB를 지우자. (IP와 referer 5일 분량만 남기기) [4] | 이주경 | 2003.12.17 |
나도 @ 도메인 서비스를 해보자 [29] | 김병철 | 2003.12.19 |
[MySQL] Set 형 자료형.. [3] | 서영태 | 2003.12.24 |
일정시간 이 지난 게시물 정리하기.. [3] | 명동욱 | 2003.12.24 |
GET으로 받는 변수가 하나일 때, 주소?변수값 사용하기 [5] | 버찌 | 2004.01.05 |
[팁&테크] 텍스트파일에서 디비 입력하기. [1] | 김영진 | 2004.01.09 |
include에서 Failed opening 발생문제 [4] | 이경훈 | 2004.01.10 |
unset / isset 를 알아보자. [2] | 씨파개 | 2004.01.12 |
제로보드 인크루드시 $DOCUMENT_ROOT 참조 [7] | 이경훈 | 2004.01.14 |
제로카운터 쉽게 설치하기 [26] | 대류 | 2004.01.17 |
(중복) 개인서버 운영하시는분들.. 좋은소스? [14] | SeePaGae | 2004.01.22 |
아이피를 숨겨보자 [5] | SeePaGae | 2004.01.23 |
[초허접기초!!] PHP 가 무엇인고..?? 1탄.. [6] | SeePaGae | 2004.01.24 |