웹디자인 강의 - HTML/CSS
글수 464
펼침메뉴 쉽게 만들 수 잇는 소스입니다. 내컴에 보관되어 있던 소스인데..죄송하게도 출처를 잊어버려서..
<html>
<head>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<script>
// 트리를 위한
function tree(menuName, mode) {
if (mode == 'open') {
eval(menuName + "_open").style.display = '';
eval(menuName + "_close").style.display = 'none';
} else if (mode == 'close') {
eval(menuName + "_open").style.display = 'none';
eval(menuName + "_close").style.display = '';
}
}
</script>
<table width=150 border=0 align=left cellpadding="0" cellspacing=0 class=back >
<tr>
<td align="right"><br>
<!--왼쪽메뉴시작-->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="padding-left:5px"><span style='font:bold 10pt'><a href="./subhtml/intro.html" target="PS_MORE">프리미엄서비스</a></span></td>
</tr>
</table>
<!-- CGI 닫힘 -->
<table id=cgi_close style='cursor: hand' width="95%" border="0" cellspacing="0" cellpadding="0">
<tr onclick="tree('cgi','open')"><td><img src="http://icons.com.ne.kr/PreITEM_list/images/leftmenu/ftv2pnode.gif" width="16" height="22" align="absmiddle" class='2px'>프리미엄 CGI</td></tr>
</table>
<!-- CGI 열림 -->
<table id=cgi_open style='cursor: hand; display: none' width="95%" border="0" cellspacing="0" cellpadding="0">
<tr onclick="tree('cgi','close')"><td><img src="http://icons.com.ne.kr/PreITEM_list/images/leftmenu/ftv2mnode.gif" width="16" height="22" align="absmiddle" class='2px'>프리미엄 CGI</td></tr>
<tr><td valign=top id=lineTD><img src='http://icons.com.ne.kr/PreITEM_list/images/pre_ico/cgi_noad.gif' align='absmiddle' class='2px'><a href='./subhtml/cgi_nobanner.html' target='PS_MORE'>CGI광고제거</a></td></tr>
<tr><td valign=top id=lineTDend><img src='http://icons.com.ne.kr/PreITEM_list/images/pre_ico/cgi_deco.gif' align='absmiddle' class='2px'><a href='./subhtml/cgi_deco.html' target='PS_MORE'>내 CGI확장팩</a></td></tr>
</table>
<!-- HOME 닫힘 -->
<table id=home_close style='cursor: hand' width="95%" border="0" cellspacing="0" cellpadding="0">
<tr onclick="tree('home','open')"><td><img src="http://icons.com.ne.kr/PreITEM_list/images/leftmenu/ftv2pnode.gif" width="16" height="22" align="absmiddle" class='2px'>프리미엄 홈계정</td></tr>
</table>
<!-- HOME 열림 -->
<table id=home_open style='cursor: hand; display: none' width="95%" border="0" cellspacing="0" cellpadding="0">
<tr onclick="tree('home','close')"><td><img src="http://icons.com.ne.kr/PreITEM_list/images/leftmenu/ftv2mnode.gif" width="16" height="22" align="absmiddle" class='2px'>프리미엄 홈계정</td></tr>
<tr><td valign=top id=lineTD><img src='http://icons.com.ne.kr/PreITEM_list/images/pre_ico/toolbar.gif' align='absmiddle' class='2px'><a href='./subhtml/toolbar.html' target='PS_MORE'>My홈툴바제거</a></td></tr>
<tr><td valign=top id=lineTD><img src='http://icons.com.ne.kr/PreITEM_list/images/pre_ico/double.gif' align='absmiddle' class='2px'><a href='./subhtml/double.html' target='PS_MORE'>더블스페이스</a></td></tr>
<tr><td valign=top id=lineTD><img src='http://icons.com.ne.kr/PreITEM_list/images/pre_ico/autoftp.gif' align='absmiddle' class='2px'><a href='./subhtml/autospeed.html' target='PS_MORE'>오토스피드FTP</a></td></tr>
<tr><td valign=top id=lineTDend><img src=http://icons.com.ne.kr/PreITEM_list/images/pre_ico/novice.gif align='absmiddle' class='2px'><a href='./subhtml/home_pack.html' target='PS_MORE'>초보용홈확장팩</a></td></tr>
</table>
</html>
<html>
<head>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<script>
// 트리를 위한
function tree(menuName, mode) {
if (mode == 'open') {
eval(menuName + "_open").style.display = '';
eval(menuName + "_close").style.display = 'none';
} else if (mode == 'close') {
eval(menuName + "_open").style.display = 'none';
eval(menuName + "_close").style.display = '';
}
}
</script>
<table width=150 border=0 align=left cellpadding="0" cellspacing=0 class=back >
<tr>
<td align="right"><br>
<!--왼쪽메뉴시작-->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="padding-left:5px"><span style='font:bold 10pt'><a href="./subhtml/intro.html" target="PS_MORE">프리미엄서비스</a></span></td>
</tr>
</table>
<!-- CGI 닫힘 -->
<table id=cgi_close style='cursor: hand' width="95%" border="0" cellspacing="0" cellpadding="0">
<tr onclick="tree('cgi','open')"><td><img src="http://icons.com.ne.kr/PreITEM_list/images/leftmenu/ftv2pnode.gif" width="16" height="22" align="absmiddle" class='2px'>프리미엄 CGI</td></tr>
</table>
<!-- CGI 열림 -->
<table id=cgi_open style='cursor: hand; display: none' width="95%" border="0" cellspacing="0" cellpadding="0">
<tr onclick="tree('cgi','close')"><td><img src="http://icons.com.ne.kr/PreITEM_list/images/leftmenu/ftv2mnode.gif" width="16" height="22" align="absmiddle" class='2px'>프리미엄 CGI</td></tr>
<tr><td valign=top id=lineTD><img src='http://icons.com.ne.kr/PreITEM_list/images/pre_ico/cgi_noad.gif' align='absmiddle' class='2px'><a href='./subhtml/cgi_nobanner.html' target='PS_MORE'>CGI광고제거</a></td></tr>
<tr><td valign=top id=lineTDend><img src='http://icons.com.ne.kr/PreITEM_list/images/pre_ico/cgi_deco.gif' align='absmiddle' class='2px'><a href='./subhtml/cgi_deco.html' target='PS_MORE'>내 CGI확장팩</a></td></tr>
</table>
<!-- HOME 닫힘 -->
<table id=home_close style='cursor: hand' width="95%" border="0" cellspacing="0" cellpadding="0">
<tr onclick="tree('home','open')"><td><img src="http://icons.com.ne.kr/PreITEM_list/images/leftmenu/ftv2pnode.gif" width="16" height="22" align="absmiddle" class='2px'>프리미엄 홈계정</td></tr>
</table>
<!-- HOME 열림 -->
<table id=home_open style='cursor: hand; display: none' width="95%" border="0" cellspacing="0" cellpadding="0">
<tr onclick="tree('home','close')"><td><img src="http://icons.com.ne.kr/PreITEM_list/images/leftmenu/ftv2mnode.gif" width="16" height="22" align="absmiddle" class='2px'>프리미엄 홈계정</td></tr>
<tr><td valign=top id=lineTD><img src='http://icons.com.ne.kr/PreITEM_list/images/pre_ico/toolbar.gif' align='absmiddle' class='2px'><a href='./subhtml/toolbar.html' target='PS_MORE'>My홈툴바제거</a></td></tr>
<tr><td valign=top id=lineTD><img src='http://icons.com.ne.kr/PreITEM_list/images/pre_ico/double.gif' align='absmiddle' class='2px'><a href='./subhtml/double.html' target='PS_MORE'>더블스페이스</a></td></tr>
<tr><td valign=top id=lineTD><img src='http://icons.com.ne.kr/PreITEM_list/images/pre_ico/autoftp.gif' align='absmiddle' class='2px'><a href='./subhtml/autospeed.html' target='PS_MORE'>오토스피드FTP</a></td></tr>
<tr><td valign=top id=lineTDend><img src=http://icons.com.ne.kr/PreITEM_list/images/pre_ico/novice.gif align='absmiddle' class='2px'><a href='./subhtml/home_pack.html' target='PS_MORE'>초보용홈확장팩</a></td></tr>
</table>
</html>
2003.06.09 15:04:45 (*.227.77.31)
좋은소스들을 여러사람들이 공유 하다는건 좋은일이지만 먼저 해당사이트운영자에게 허락 또는 출처정도는 예의라고 보고 또한 어떠한 소스를 기입할땐 이렇게 필요없거나 몽땅 써서 도무지 멀 알려주려고 적은건지 초보자들은 헤갈려 합니다.
제가볼땐 자바스크립트와 간단하게 적용한 태그 몇줄이면 될것 같은데
여러가지로 아쉽군요,,전적으로 개인적인 생각입니다.
그리고 이 팁은 자바스크립트 팁 게시판에 더 잘어울릴듯 하네요.
깔끔하게 잘 정리 하셔서 알맞은 게시판에 올려주심이,,,,,
제가볼땐 자바스크립트와 간단하게 적용한 태그 몇줄이면 될것 같은데
여러가지로 아쉽군요,,전적으로 개인적인 생각입니다.
그리고 이 팁은 자바스크립트 팁 게시판에 더 잘어울릴듯 하네요.
깔끔하게 잘 정리 하셔서 알맞은 게시판에 올려주심이,,,,,
2003.06.12 19:51:02 (*.241.146.4)
설명이라면..
윈도우즈 탐색기 타입의 메뉴소스라고 보면 되겠요.
테이블 단위로 닫혔을때의 소스, 열렸을때의 소스 두가지를 두고
스타일시트를 이용해서 보여주고 안보여주고를 결정하는 내용이네요.
전에 프로젝트할때 이 소스만 있었더라도.. - 무지 복잡하고 힘들게 만든기억이..
한마디..
퍼왔다고 하신분 - 퍼온곳에 가보시구 정확히 평가해주셨음 싶네요.
어디에다 올렸음 하신분 - 올리는 분도 어디올리는게 좋을까 생각한답니다.
무지 간단하게 구현할 수 있는 펼침메뉴소스 올려주셔서 감사합니다.
윈도우즈 탐색기 타입의 메뉴소스라고 보면 되겠요.
테이블 단위로 닫혔을때의 소스, 열렸을때의 소스 두가지를 두고
스타일시트를 이용해서 보여주고 안보여주고를 결정하는 내용이네요.
전에 프로젝트할때 이 소스만 있었더라도.. - 무지 복잡하고 힘들게 만든기억이..
한마디..
퍼왔다고 하신분 - 퍼온곳에 가보시구 정확히 평가해주셨음 싶네요.
어디에다 올렸음 하신분 - 올리는 분도 어디올리는게 좋을까 생각한답니다.
무지 간단하게 구현할 수 있는 펼침메뉴소스 올려주셔서 감사합니다.
2003.07.24 00:48:39 (*.149.57.113)
http://www.winbbs.pe.kr/exit.php이걸로테스트 해보세요.
태그 연습장입니다....미리볼수 있어서 이해가 팍 오는데요...
태그 연습장입니다....미리볼수 있어서 이해가 팍 오는데요...
2003.08.14 16:29:55 (*.115.47.176)
올려주고 욕먹네요.. 이론.... 글올리신분도 생각이 있으셨을텐데요..
전 황진철님이랑 같은 생각입니다...
말없이 그냥 넘길수도 있는데... 이 글올리신 분이 보면 무지 당황해 하실꺼같아서...^^
전 황진철님이랑 같은 생각입니다...
말없이 그냥 넘길수도 있는데... 이 글올리신 분이 보면 무지 당황해 하실꺼같아서...^^



무슨소리지........?//
실습을 한번