[JavaScript] 서브메뉴

by


JavaScript는 객체 기반 기능 스크립팅 언어이며 웹에서 눈에 띄는 위치를 차지합니다.

하위 메뉴를 동적으로 확장 및 축소하는 페이지를 구현합니다. 이 기능은 왼쪽 하위 메뉴를 구현할 때 자주 사용됩니다.

▣ 하위메뉴.html

<html>
<head>
<title>SubMenu</title>
<link rel="stylesheet" href="http://agapeuni.m/css/common.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script language="javascript">
<!--
// 서브메뉴표시
function f_showSubMenu(v_name) {
  try {
    var obj = document.getElementById(v_name);
    if(obj != null) {
      if(obj.style.display != "none") {
        obj.style.display = "none"
      }
      else {
        obj.style.display = "block";
      }
    }
  }
  catch(e) {
    alert("f_showSubMenu() - " + e.message);
  }
}
 
// 페이지 이동
function f_goPage(v_url) {
  parent.main.location.href = v_url;
}
-->
</script>
</head>
 
<body topmargin="0" leftmargin="0">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td class="leftBg" valign="top" style="padding: 10">
      <table width="152px" cellpadding="0" cellspacing="0" border="0" class="leftTbl">
        <tr>
          <td class="LeftmenuTitle">서브메뉴</td>
        </tr>
        <tr>
          <td class="Leftmenu">
            <a href="#" onFocus="this.blur()" class="leftmenuTxt" onClick="f_showSubMenu('submenu1')">Hello! *^^*</a>
            <span id="submenu1" style="display:none">
               <table cellpadding="0" cellspacing="0" border="0" >
                <tr>
                  <td><img src="image/left/bg_leftmenuSub_top.gif"></td>
                </tr>
                <tr>
                  <td class="LeftmenuSub"><a href="#" onFocus="this.blur()" class="leftmenuSubTxt" onClick="f_goPage('/path/page1.jsp');">Hello HTML. *^^*</a></td>
                </tr>
                <tr>
                  <td class="LeftmenuSub"><a href="#" onFocus="this.blur()" class="leftmenuSubTxt" onClick="f_goPage('/path/page2.jsp');">Hello JavaScript. *^^*</a></td>
                </tr>
                <tr>
                  <td class="LeftmenuSub"><a href="#" onFocus="this.blur()" class="leftmenuSubTxt" onClick="f_goPage('/path/page3.jsp');">Hello Java. *^^*</a></td>
                </tr>
                <tr>
                  <td><img src="image/left/bg_leftmenuSub_bottom.gif"></td>
                </tr>
              </table>
            </span>
          </td>
        </tr>
        <tr>
          <td><img src="image/left/leftmenu_bottom.gif"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

▣ 결과 화면

'추천 관련글,


메뉴 클릭 후