웹마스터 팁
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.09.20 16:54
유용한 강좌네요 :) -
차영석
2002.09.23 01:43
감사합니다... 도움이 되었습니다... ^^* -
박현정
2002.11.25 04:06
........처음에 봤을때는 모를듯 하다가-ㅁ-;
아직도 다 아는건 아니지만 ^^;;
소스 비교하면서 보니, 이제 조금 알듯도 하네요~ ^^
에헤...감사합니다..정말 필요했던;;소스 ^^ -
ihsahN
2003.05.18 20:36
이것두 IE 전용이네요.. ㅠ.ㅠ -
오재섭
2003.11.21 09:54
정말 너무 감사합니다. 이렇게 간단한...^^
표를 사용하지 않고 그냥하면 좋을 듯합니다.
원하는 부위에 마음껏 짚어넣고 사용 가능하니 너무 좋네요.
대단히 감사합니다. -
김창완
2003.12.10 21:47
예제를 보고싶은데.. 깨졌네요 -ㅁ-;;
제목 | 글쓴이 | 날짜 |
---|---|---|
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 |