아주심플한 메뉴 > JavaScript

본문 바로가기
사이트 내 전체검색

JavaScript

아주심플한 메뉴

페이지 정보

profile_image
작성자 최고관리자
댓글 0건 조회 6,704회 작성일 21-02-10 17:28

본문

<HTML>
 <HEAD>
 <title>가자! 자바의 세상으로/심플한 메뉴</title>
 <STYLE>BODY {FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: 굴림}
TABLE {FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: 굴림}
 </STYLE>
 <script language="javascript">
 <!--       
        function clickshow(num)
        {
                for (i=1;i<5;i++) //메뉴 숫자보다 하나 큰 값을 줍니다. (메뉴수를 4개로 했으므로 5로 값을 줬어요.)
                {
                menu=eval("document.all.block"+i+".style");       
                imgch=eval("document.bar"+i);                                       
                if (num==i)
                {
                if (menu.display=="block")
                { menu.display="none";
                  imgch.src="+.gif";
                }
                else {
                menu.display="block";
                imgch.src="-.gif";
                }
                }
                }
        }
 //-->
 </script>
 </HEAD>

 <BODY>
 <TABLE borderColor=white cellSpacing=0 cellPadding=0 width=135 border=1>

 <!--------------------- 첫번째 메뉴 시작 --------------------->
 <TR>
    <TD onmouseover="this.style.backgroundColor='#cccccc'" style="CURSOR: hand" onclick="clickshow(1)"  onmouseout="this.style.backgroundColor=''" borderColorLight=gray bgColor=#e4e4e4 height=23><IMG name=bar1 src="../images/+.gif" border=0 width="10" height="10">메뉴1
        </TD>
 </TR>

 <TR>
        <TD>
        <SPAN id=block1 style="DISPLAY: none; MARGIN-LEFT: 1px; CURSOR: hand">
        <TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 border=1 WIDTH="130">
        <TR>
        <A href="../메뉴1-1">
        <TD onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#ccffcc borderColorLight=gray>메뉴1-1
        </TD>
        </A>
        </TR>       
        </TABLE> 
        </span>
        </td>
 </tr>       
 <!--------------------- 첫번째 메뉴 끝 --------------------->



 <!--------------------- 두번째 메뉴 끝 --------------------->
 <TR>
    <TD onmouseover="this.style.backgroundColor='#cccccc'" style="CURSOR: hand" onclick="clickshow(2)"  onmouseout="this.style.backgroundColor=''" borderColorLight=gray align=left width=110 bgColor=#e4e4e4 height=23><IMG name=bar2 src="../images/+.gif" border=0 width="10" height="10">메뉴2
        </TD>
 </TR>
 <TR>
    <TD align=left>
    <SPAN id=block2 style="DISPLAY: none; MARGIN-LEFT: 1px; CURSOR: hand">
            <TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 border=1 WIDTH="130">
      <TR>
            <A href="../메뉴2-1">
              <TD onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#ccffcc borderColorLight=gray>메뉴2-1
              </TD>
            </A>
          </TR>         
      <TR>
                <A href="../메뉴2-2">
            <TD onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#ccffcc borderColorLight=gray>메뉴2-2
          </TD>
          </A>
          </TR>
          </TABLE>
          </span>
        </td>
 </tr>
 <!--------------------- 두번째 메뉴 끝 --------------------->





 <!--------------------- 세번째 메뉴 시작 --------------------->
 <TR>
    <TD onmouseover="this.style.backgroundColor='#cccccc'" style="CURSOR: hand" onclick="clickshow(3)"  onmouseout="this.style.backgroundColor=''" borderColorLight=gray align=left width=110 bgColor=#e4e4e4 height=23><IMG name=bar3 src="../images/+.gif" border=0 width="10" height="10">메뉴3
        </TD>
 </TR>
 <TR>
    <TD align=left>
    <SPAN id=block3 style="DISPLAY: none; MARGIN-LEFT: 1px; CURSOR: hand">
            <TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 border=1 WIDTH="130">
      <TR>
            <A href="../메뉴3-1">
              <TD onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#ccffcc borderColorLight=gray>메뉴3-1
              </TD>
            </A>
          </TR>         
      <TR>
                <A href="../메뉴3-2">
            <TD onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#ccffcc borderColorLight=gray>메뉴3-2
          </TD>
          </A>
          </TR>
      <TR>
                <A href="../메뉴3-3">
            <TD onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#ccffcc borderColorLight=gray>메뉴3-3
          </TD>
          </A>
          </TR>
          </TABLE>
          </span>
        </td>
 </tr>
 <!--------------------- 세번째 메뉴 끝 --------------------->




 <!--------------------- 네번째 메뉴 시작 --------------------->
 <TR>
    <TD onmouseover="this.style.backgroundColor='#cccccc'" style="CURSOR: hand" onclick="clickshow(4)"  onmouseout="this.style.backgroundColor=''" borderColorLight=gray align=left width=110 bgColor=#e4e4e4 height=23><IMG name=bar4 src="../images/+.gif" border=0 width="10" height="10">메뉴4
        </TD>
 </TR>
 <TR>
    <TD align=left>
    <SPAN id=block4 style="DISPLAY: none; MARGIN-LEFT: 1px; CURSOR: hand">
            <TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 border=1 WIDTH="130">

      <TR>
            <A href="../메뉴4-1">
              <TD onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#ccffcc borderColorLight=gray>메뉴4-1
              </TD>
            </A>
          </TR>         
      <TR>
                <A href="../메뉴4-2">
            <TD onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#ccffcc borderColorLight=gray>메뉴4-2
          </TD>
          </A>
          </TR>
      <TR>
                <A href="../메뉴4-3">
            <TD onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#ccffcc borderColorLight=gray>메뉴4-3
          </TD>
          </A>
          </TR>
      <TR>
                <A href="../메뉴4-4">
            <TD onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#ccffcc borderColorLight=gray>메뉴4-4
          </TD>
          </A>
          </TR>
      <TR>
                <A href="../메뉴4-5">
            <TD onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#ccffcc borderColorLight=gray>메뉴4-5
          </TD>
          </A>
          </TR>
      <TR>
                <A href="../메뉴4-6">
            <TD onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#ccffcc borderColorLight=gray>메뉴4-6
          </TD>
          </A>
          </TR>
          </TABLE>
          </span>
        </td>
 </tr>
 <!--------------------- 네번째 메뉴 끝 --------------------->

 </table>

 </BODY>
 </HTML>

댓글목록

등록된 댓글이 없습니다.

회원로그인

회원가입

  • 게시물이 없습니다.

접속자집계

오늘
974
어제
2,905
최대
6,642
전체
1,122,702
contact : webmaster@beautipia.co.kr
Copyright © beautipia.co.kr. All rights reserved.