웹마스터 팁
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
-
∑Ztxy
2004.03.16 23:48
아해사랑 ^.^//예.. 레이어의 위치를.... 잘 설정하면... -
세죠위그이
2004.03.10 20:10
서브 레이어 에는..
onMouseOut='na_hide_layer("레이어 이름")'
요걸 줘도; -
Pw-NET
2004.03.10 22:06
설마 나모는 아니겠지 -
그냥이렇게。
2004.03.10 22:18
Pw-NET//나모에요...;;
'나(na)'자 붙으니까... -
찌랑☆
2004.03.10 22:27
간단하네요; -
piasol
2004.03.11 03:35
-_ -b 추천!! -
큰스님
2004.03.11 12:38
메뉴에 마우스를 가져갔을 때만 메뉴가 나타나게는 어떻게 하죠?
그러니까 메뉴위에 마우스를 놓지 않았을 때는 서브메뉴가 안나타나고;;; -
Pw-NET
2004.03.13 21:41
모든 메뉴마다 마우스아웃시에 하이드 시켜버리면 되겠죠... -
아해사랑 ^.^
2004.03.15 20:38
가로 메뉴로도 만들수 있나요... -
김옥경
2004.09.20 18:51
텍스트말고 이미지에도 마우스오버시 펼쳐지는 메뉴를 만들수 있을까요? 그것도,,그냥 하나의 이미지말고 이미지맵으로 분할된 부분을 말이예요^^..
<a OnMouseOver="na_show_layer("sub1");na_hide_layer("sub2");na_hide_layer("sub3");" href="#">이미지 coords </a><br> -
seckor
2007.09.30 08:05
불여우에선 안되는군요~ IE에선 잘되는데~
불여우에선 어떻게 해야되나요...
제목 | 글쓴이 | 날짜 |
---|---|---|
MS홈에 쓰이는 오른쪽메뉴 툴바
[13]
![]() | Kortion | 2003.02.22 |
슬라이딩 Layer ( 옆에 메뉴 보이시죠, 비슷꾸리한거 ) [8] | 이남두 | 2003.02.26 |
엔지오식 좌측이동메뉴 레이어 가운데기준정렬 [11] | 스티치 | 2003.03.29 |
간단한 점프메뉴(selecter) [14] | 박재현 | 2003.04.14 |
메뉴이동입니다. [5] | 데빌스텔스 | 2003.04.20 |
메뉴 옆에서 화살표가 스크롤되는.. [2] | 힘찬연못 | 2003.05.29 |
[스크립트]오른쪽 버튼 누르면 메뉴나오기^^ [1] | 처절초보 | 2003.06.16 |
[스크립트] 메뉴에 마우슬 데면 서브 메뉴가 나온다 [2] | 처절초보 | 2003.06.16 |
마우스 오른쪽 버튼 누르면 원하는 메뉴 뜨게 만들기(다른사이트) [3] | 김주형 | 2003.07.03 |
[수정]롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) [24] | 미니 | 2003.08.18 |
플레쉬 메뉴를 표방한..=ㅁ= 자바스크립트의 수작 버튼 밑으로 스크롤 되는 아이콘입니다. [47] | beMax | 2003.09.14 |
플래시느낌의 유동적인 메뉴 [9] | jabusim | 2003.11.13 |
오른버튼 누를때 메뉴 뜨게하기(깔끔버전)
[5]
![]() | 럽 | 2003.12.09 |
화면 오른쪽 아래부분에 떠있는 메뉴 레이어(마우스 오버시 부메뉴 펼쳐짐) [7] | 봉팀장 | 2003.12.30 |
[초간단 자바스크립트!] 색깔바뀌는 메뉴 [3] | ∑Ztxy | 2004.01.19 |
[초간단 자바스크립트!] 서브메뉴 만들기...~ [11] | ∑Ztxy | 2004.03.10 |
허접한 풀다운 메뉴 소스입니다. (유용한 팁 일지는 모르겠네요.)
[9]
![]() | tintintm | 2004.03.23 |
클릭하거나, 바탕을 더블클릭하면 나타나는 작은(크기조절가능) 메뉴 | ☺심심 | 2004.05.17 |
[StylishJAVA]레이어를 이용한 슬라이드 메뉴 [5] | ∑Ztxy | 2004.06.05 |
레이어 3 - 메뉴판때기. [1] | 미친개 | 2004.07.04 |