메뉴 보이기
Profile
이온디

2009.01.20

Script

Show-Hide Layers (by 태그매니아)

조회 수 4934 추천 수 0
<body onLoad=ck(1)>
<script>
function ck(n) {
v.innerHTML=document.all('test'+n).innerHTML;
}
</script>
<table border=1 width=300>
<tr><td onMouseOver=ck(1) width=100>메뉴1</td><td onMouseOver=ck(2) width=100>메뉴2</td><td onMouseOver=ck(3) width=100>메뉴3</td></tr>
<tr><td colspan=3 id=v></td></tr>
<span id=test1 style="display:none">
<a href="http://kr.yahoo.com">야후0</a>
<a href="http://kr.yahoo.com">야후2</a>
<a href="http://kr.yahoo.com">야후3</a>
</span>
<span id=test2 style="display:none">
<a href="http://kr.yahoo.com">야후4</a>
<a href="http://kr.yahoo.com">야후5</a>
<a href="http://kr.yahoo.com">야후6</a>
</span>
<span id=test3 style="display:none">
<a href="http://kr.yahoo.com">야후7</a>
<a href="http://kr.yahoo.com">야후8</a>
<a href="http://kr.yahoo.com">야후9</a>
</span>
</body>

scr_showhidelayer_menu_tagm.png
<body onLoad=ck(1)> 
<script> 
function ck(n) { 
v.innerHTML=document.all('test'+n).innerHTML; 

</script> 
<table border=1 width=300> 
<tr><td onMouseOver=ck(1) width=100>메뉴1</td><td onMouseOver=ck(2) width=100>메뉴2</td><td onMouseOver=ck(3) width=100>메뉴3</td></tr> 
<tr><td colspan=3 id=v></td></tr> 

<span id=test1 style="display:none"> 
<a href="http://kr.yahoo.com">야후0</a> 
<a href="http://kr.yahoo.com">야후2</a> 
<a href="http://kr.yahoo.com">야후3</a> 
</span> 
<span id=test2 style="display:none"> 
<a href="http://kr.yahoo.com">야후4</a> 
<a href="http://kr.yahoo.com">야후5</a> 
<a href="http://kr.yahoo.com">야후6</a> 
</span> 
<span id=test3 style="display:none"> 
<a href="http://kr.yahoo.com">야후7</a> 
<a href="http://kr.yahoo.com">야후8</a> 
<a href="http://kr.yahoo.com">야후9</a> 
</span> 
</body> 

scr_showhidelayer_menu_tag2.png
<body> 
<script> 
function show(n) { 
submenu.innerHTML=document.all('submenu'+n).innerHTML; 


function hide(n) {
submenu.innerHTML="";
}
</script> 
<style>
.mainmenu {float:left;}
</style>

<!-- s : mainmenu -->
<div onMouseOver=show(1) class=mainmenu>메뉴1

</div>
<div onMouseOver=show(2) class=mainmenu>메뉴2</div>
<div onMouseOver=show(3) class=mainmenu>메뉴3</div> 
<!-- e : mainmenu -->

<!-- s : submenu -->
<div id="submenu" style="clear:both;border:1px solid red;position:absolute;top:50px;display:block;width:100%;" onMouseOut=hide()></div>
<span id=submenu1 style="display:none" class="submenu"> 
야후0 
야후2 
야후3 
</span>
 
<span id=submenu2 style="display:none" class="submenu"> 
야후4 
야후5 
야후6 
</span> 
<span id=submenu3 style="display:none" class="submenu"> 
야후7 
야후8 
야후9 
</span> 

<!-- e : submenu -->
</body> 



Profile
0
Lv

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
100 드롭다운 가로형 메뉴 2009.01.20 4772
99 탭메뉴형 자바스크립트 2009.01.20 4973
98 [HTML5] dl과 ul의 상하관계(?)에 대해서 질문드립니다. 1 2009.01.20 5121
97 Dolphin CSS Menu 2009.01.20 3785
96 Cut & Paste CSS Horizontal List Menu 2009.01.20 3859
95 [Script] 슬라이딩 레이어 1 2009.01.20 5815
94 [Script] 스크롤 따라다니는 레이어 2009.01.20 4881
93 [Script] 스크롤 따라다니는 레이어 2 2009.01.20 5746
92 [Script] 간단한 점프메뉴(selecter) 2009.01.20 4842
91 [Script] 화면 왼쪽에 숨겨진 레이어 꺼내기 1 2009.01.20 5608
90 [Script] 메뉴 슬라이딩(가로) 1 2009.01.20 7167
89 [Script] 클릭하면 슬라이드되면서 펼쳐지는 사이드 메뉴 2009.01.20 8242
88 [Script] 가로 세로가 호환되는 메뉴 2009.01.20 4127
87 [Script] 위의 메뉴에 마우스를 올리면 밑에 메뉴가 나오는 소스 2009.01.20 4734
86 [Script] 롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) 2 2009.01.20 6402
[Script] Show-Hide Layers (by 태그매니아) 3 2009.01.20 4934
84 [Script] Show-Hide Layers (by 신의키스) 2009.01.19 4644
83 [Script] div 높이 100% 맞추기 2009.01.18 6826
82 [Script] 롤오버 메뉴 만들기 1 2009.01.18 5880
81 주석 표시하기 2009.01.14 3506