웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
자바스크립트로 클릭하면 출력되는 메뉴를 만들어 보자~!!!
2002.09.20 14:23
두번째로 쓰는 글입니다^^;;
이번에는 클릭하면 메뉴가 좌르륵 뜨는 소스에 대해 알려드리겠습니다.
중복 글이라면 코멘트로 남겨 주시고요~^^
일단 기본적으로 아래의 소스를 웹문서에 삽입해 줍니다. 삽입해주지 않으면 스크립트 오류가 떠요~^^
--------------------------------------------
<script language="JavaScript">
ok=0; old_what="non";
function show(what){
if((old_what != "non") && (what != old_what)){
ok=1;
old_what.style.display="none";
what.style.display="";
}else
{
if(ok){
ok=0;
what.style.display="none";
}else
{
ok=1;
what.style.display="";
}
}
old_what=what;
}
</script>
-----------------------------------------------
이 소스에 대해서는 굳이 설명이 필요없을 것 같군요. 그냥 삽입해주시면 됩니다^^
그리고 다음에
------------------------------------------------------
<!--메뉴를 출력시키고자 하는 문자나 이미지를 넣는 곳-->
<A href="Javascript:show(menu)"><b>출력할 메뉴의 이름</b></a></FONT>
</tr>
</table>
<!--여기서부터 메뉴가 출력되는 부분의 소스입니다.-->
<div id=menu style="DISPLAY: none">
<tr>
<td align="right" width="18" height="11">
</td>
이곳에 출력될 코드를 넣어주시면 되요^^</TD>
</tr></TABLE>
</div>
--------------------------------------------------------------------
를 삽입해 주시면 됩니다. 원하는 위치에 원하는 스타일로 넣으시면 됩니다.
출력된 메뉴에는 링크소스나 기타 여러가지 태그들을 집어넣을 수 있습니다.
그런데 하나만 있다면 그게 메뉴로써 재구실을 할 수 없겠죠?
이럴 때는 다음과 같은 형식으로 소스를 삽입해주시면 됩니다.
------------------------------------------------------------
<script language="JavaScript">
ok=0; old_what="non";
function show(what){
if((old_what != "non") && (what != old_what)){
ok=1;
old_what.style.display="none";
what.style.display="";
}else
{
if(ok){
ok=0;
what.style.display="none";
}else
{
ok=1;
what.style.display="";
}
}
old_what=what;
}
</script>
<!--메뉴를 출력시키고자 하는 문자나 이미지를 넣는 곳-->
<A href="Javascript:show(menu)"><b>출력할 메뉴의 이름</b></a></FONT>
</tr>
</table>
<!--여기서부터 메뉴가 출력되는 부분의 소스입니다.-->
<div id=menu style="DISPLAY: none">
<tr>
<td align="right" width="18" height="11">
</td>
이곳에 출력될 코드를 넣어주시면 되요^^</TD>
</tr></TABLE>
</div>
<!--이런 식으로 메뉴의 항목 숫자를 늘릴 수 있습니다^^-->
<A href="Javascript:show(menu1)"><b>출력할 메뉴의 이름</b></a></FONT>
</tr>
</table>
<div id=menu1 style="DISPLAY: none">
<tr>
<td align="right" width="18" height="11">
</td>
이런 식으로 메뉴의 항목 숫자를 늘릴 수 있습니다.<BR>
"Javascript:show(menu)" 부분과 div id=menu style="DISPLAY: none" 부분을<BR>
"Javascript:show(menu1)" 부분과 div id=menu1 style="DISPLAY: none" 로 수정한 것 보이시죠?^^<BR></TD>
</tr></TABLE>
</div>
---------------------------------------------------------------
"Javascript:show(menu)" 부분과 div id=menu style="DISPLAY: none" 부분을
"Javascript:show(menu1)" 부분과 div id=menu1 style="DISPLAY: none" 로 수정한 것 보이시죠?^^
이런 식으로 메뉴를 계속 확장해 나갈 수 있습니다^^;;
공간은 부족한데 메뉴 항목이 많을 때 유용하게 쓸 수 있으리라 생각되네요^^
예제 : http://dbwlgh.cafe24.com/HTML2/menu.html
이번에는 클릭하면 메뉴가 좌르륵 뜨는 소스에 대해 알려드리겠습니다.
중복 글이라면 코멘트로 남겨 주시고요~^^
일단 기본적으로 아래의 소스를 웹문서에 삽입해 줍니다. 삽입해주지 않으면 스크립트 오류가 떠요~^^
--------------------------------------------
<script language="JavaScript">
ok=0; old_what="non";
function show(what){
if((old_what != "non") && (what != old_what)){
ok=1;
old_what.style.display="none";
what.style.display="";
}else
{
if(ok){
ok=0;
what.style.display="none";
}else
{
ok=1;
what.style.display="";
}
}
old_what=what;
}
</script>
-----------------------------------------------
이 소스에 대해서는 굳이 설명이 필요없을 것 같군요. 그냥 삽입해주시면 됩니다^^
그리고 다음에
------------------------------------------------------
<!--메뉴를 출력시키고자 하는 문자나 이미지를 넣는 곳-->
<A href="Javascript:show(menu)"><b>출력할 메뉴의 이름</b></a></FONT>
</tr>
</table>
<!--여기서부터 메뉴가 출력되는 부분의 소스입니다.-->
<div id=menu style="DISPLAY: none">
<tr>
<td align="right" width="18" height="11">
</td>
이곳에 출력될 코드를 넣어주시면 되요^^</TD>
</tr></TABLE>
</div>
--------------------------------------------------------------------
를 삽입해 주시면 됩니다. 원하는 위치에 원하는 스타일로 넣으시면 됩니다.
출력된 메뉴에는 링크소스나 기타 여러가지 태그들을 집어넣을 수 있습니다.
그런데 하나만 있다면 그게 메뉴로써 재구실을 할 수 없겠죠?
이럴 때는 다음과 같은 형식으로 소스를 삽입해주시면 됩니다.
------------------------------------------------------------
<script language="JavaScript">
ok=0; old_what="non";
function show(what){
if((old_what != "non") && (what != old_what)){
ok=1;
old_what.style.display="none";
what.style.display="";
}else
{
if(ok){
ok=0;
what.style.display="none";
}else
{
ok=1;
what.style.display="";
}
}
old_what=what;
}
</script>
<!--메뉴를 출력시키고자 하는 문자나 이미지를 넣는 곳-->
<A href="Javascript:show(menu)"><b>출력할 메뉴의 이름</b></a></FONT>
</tr>
</table>
<!--여기서부터 메뉴가 출력되는 부분의 소스입니다.-->
<div id=menu style="DISPLAY: none">
<tr>
<td align="right" width="18" height="11">
</td>
이곳에 출력될 코드를 넣어주시면 되요^^</TD>
</tr></TABLE>
</div>
<!--이런 식으로 메뉴의 항목 숫자를 늘릴 수 있습니다^^-->
<A href="Javascript:show(menu1)"><b>출력할 메뉴의 이름</b></a></FONT>
</tr>
</table>
<div id=menu1 style="DISPLAY: none">
<tr>
<td align="right" width="18" height="11">
</td>
이런 식으로 메뉴의 항목 숫자를 늘릴 수 있습니다.<BR>
"Javascript:show(menu)" 부분과 div id=menu style="DISPLAY: none" 부분을<BR>
"Javascript:show(menu1)" 부분과 div id=menu1 style="DISPLAY: none" 로 수정한 것 보이시죠?^^<BR></TD>
</tr></TABLE>
</div>
---------------------------------------------------------------
"Javascript:show(menu)" 부분과 div id=menu style="DISPLAY: none" 부분을
"Javascript:show(menu1)" 부분과 div id=menu1 style="DISPLAY: none" 로 수정한 것 보이시죠?^^
이런 식으로 메뉴를 계속 확장해 나갈 수 있습니다^^;;
공간은 부족한데 메뉴 항목이 많을 때 유용하게 쓸 수 있으리라 생각되네요^^
예제 : http://dbwlgh.cafe24.com/HTML2/menu.html
댓글 6
제목 | 글쓴이 | 날짜 |
---|---|---|
텔넷 사용자 관리... | 쇠물택 | 2002.02.24 |
[sapzils서버세팅] A+P+M 소스 설치 [4] | 쇠물택 | 2002.02.24 |
wuftp에서 proftp로...그리고, proftp 설정하기 [1] | 쇠물택 | 2002.02.24 |
메모리 절약하기 - 리눅스 | 오픈소스 | 2002.02.24 |
[강좌끝이다~!]와우리눅스7.0을 서버로 두고 인터넷공유 [8] | RealComty | 2002.02.23 |
[강좌4탄]와우리눅스7.0을 서버로 두고 인터넷공유 [2] | RealComty | 2002.02.23 |
[re] [강좌4탄]와우리눅스7.0을 서버로 두고 인터넷공유 [2] | 주영명 | 2002.02.27 |
[강좌3탄]와우리눅스7.0을 서버로 두고 인터넷공유 [4] | RealComty | 2002.02.23 |
[강좌2탄]와우리눅스7.0을 서버로 두고 인터넷공유 [1] | RealComty | 2002.02.23 |
[강좌1탄]와우리눅스7.0을 서버로 두고 인터넷공유 [1] | RealComty | 2002.02.23 |
[리눅스]proftp 에서 사용자가 상위 폴더로 이동을 못하게... [3] | teenteenv | 2002.02.22 |
에러페이지를 서버관리자가 지정한 페이지로. [1] | teenteenv | 2002.02.21 |
vi 편집기 사용시 비프음 제어 | 오픈소스 | 2002.02.21 |
커널 버전 알아내기 [1] | 오픈소스 | 2002.02.21 |
[APM자동설치] APM_Setup 3 ( Apache, PHP4, MySQL, Perl, Tomcat ) [6] | 근땅e | 2002.02.06 |
아파치 웹서버 속도 빠르게 하기 위한 최적화 팁 [14] | 차카게살자 | 2002.01.27 |
APC(Alternativ PHP Cache) 사용법( php 캐쉬 플러그인 ) [1] | 김도한 | 2002.01.29 |
MySQL 관리 첫걸음 [5] | 앤디(andy) | 2001.04.18 |
{주목} CodeRed 아파치로그파일 지우기 [2] | skyel | 2001.08.22 |
linuxerv무료계정 백업받기^^ [2] | ^^shaki | 2001.02.05 |