■ Front-End ■/JavaScript

[JavaScript] 서브메뉴 동적표시 (SubMenu.html)

한길(One Way) 2023. 2. 28. 04:22

자바스크립트는 객체 기반 함수형 스크립트 언어이며 웹에서 중요한 위치를 차지하고  있다.

 

서브메뉴를 동적으로 펼치고 접히는 페이지를 구현해 봅니다. 좌측 서브메뉴를 구현할때 자주 사용하는 기능이다.

 

▣ SubMenu.html

<html>
<head>
<title>SubMenu</title>
<link rel="stylesheet" href="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>

 

▣ 결과화면

메뉴 클릭 후

 

728x90
저작자표시 비영리