Show-Hide Layers(2) (by 태그매니아)
2009.02.10 02:21
8782
0
이온디
첨부파일
https://imweb.eond.com/coding/165376 
태그매니아에서 얻은 스크립트에 마우스를 떼면 사라지도록 만든 코드입니다.
<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>
<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>
글목록
코멘트 0
접기/펴기 | 댓글 새로고침
정말 이 글을 삭제하실건가요? -_-...
닫기
이온디
"Show-Hide Layers(2) (by 태그매니아)"
"Show-Hide Layers(2) (by 태그매니아)"
Total 235 articles in 12 / 12 pages
| 제목 |
날짜 |
|---|---|---|
 | 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) | 2018/01/03 |
|
| jQuery를 배울수 있는 동네들입니다. | 2013/08/09 |
|
| 관련 링크 [1] | 2010/05/23 |
| 15 |
[프레임워크] [UI Kit] CSS Framework 어떤 것을 사용할 것인가? 출처: https://mobicon.tistory.com/353 [Intelligence Convergence]
| 2019/03/21 |
| 14 | [반응형 웹] 모바일 사이드바 만들기 | 2020/04/10 |
| 13 |
[반응형 웹] 기기별 미디어쿼리 사이즈,모바일 디바이스별 사이즈
| 2020/05/02 |
| 12 | Web Fundamentals | 2020/05/02 |
| 11 | [프레임워크] Material design | 2020/07/02 |
| 10 | [Meta] meta viewport 모바일에서 PC 사이즈 그대로 보기 | 2022/01/09 |
| 9 | [map] 카카오맵 퍼블리싱 | 2022/03/31 |
| 8 | [위지윅에디터] ckeditor5 | 2022/04/11 |
| 7 |
[svg] SVG PATH EDITOR (코드로 SVG 패스 만들기)
| 2022/04/21 |
| 6 | [CSS] css 글자 나누기 | 2022/05/10 |
| 5 | [CSS] safari select background glory style | 2022/07/14 |
| 4 | [swiperjs] swiper.js 기본 템플릿 코드 | 2022/11/27 |
| 3 | [swiperjs] swiper.js 숫자 페이징 | 2022/11/28 |
| 2 | [swiperjs] swiper random shuffle | 2022/11/28 |
| 1 | [CSS] CSS Grid를 배워보는 링크 | 2023/01/31 |
태그
설정
글쓰기
