■ 좌측 메뉴 세부 카테고리 Toggle형태 디자인 팁

본 내용은 샘플이미지와 동일한 방식으로 하위 카테고리를 토글 형식으로 보여주는 좌측 메뉴 디자인 팁 입니다.

(예) 음반(1차카테고리)
         - 국내가요(2차카테고리1)
         - 락(2차카테고리2)
         - JPOP(2차카테고리3)

[관리자메뉴]-[디자인관리]-[개별디자인-메인, 카테고리]-[왼쪽메뉴 꾸미기] 메뉴에서 좌측메뉴의 개별 디자인을 삽입하실 수 있습니다.

아래 샘플소스는 샘플이미지의 내용이 코딩된 형태이며,
■부분은 메뉴레이어의 총개수.
■부분은 레이어부분과 토글 소스(idMenu0, idMenu1, idMenu2 형태로 증가)
■부분은 카테고리 링크 부분입니다.
해당 내용의 숫자와 링크값만 변경하여 사용하시면 됩니다.

[샘플소스]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
<SCRIPT LANGUAGE='JavaScript'>
var iMenuLayers = 2; // 총레이어개수
function OnDisplayToggle(szObjName)
{
  var objId = document.all[szObjName];
  var arMenu = new Array(iMenuLayers);

  for( var i=0; i<iMenuLayers; i++ )
    arMenu[i] = 'idMenu'+i;

  for( var i=0; i<arMenu.length; i++ ) {
   if(document.all[arMenu[i]] && document.all[arMenu[i]]!=objId)
    document.all[arMenu[i]].style.display = 'none';
  }

  if(objId) {
    if(objId.style.display == '') {
      objId.style.display = 'none';
    } else {
      objId.style.display = '';
    }
  }
}
</SCRIPT>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
  <td><IMG SRC="../images/001/main_skin2_top_category.gif" border="0"></td>
</tr>
<tr>
  <td valign="top" background="../images/001/main_skin2_top_cate_bg.gif" style="padding-left:20px;padding-right:15px;">
  <table cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td height="25"><IMG SRC="../images/001/main_skin2_categorynero.gif" border="0" align="absmiddle"></td>
    <td width="100%" style="cursor:hand;" onClick="OnDisplayToggle('idMenu0');">모니터</td>
  </tr>
  <tr id="idMenu0" style="display:none;">
    <td align="center" colspan="2">
    <table width="100%" border="0" cellspacing="2" cellpadding="0">
    <tr>
      <td bgcolor="#f8f8f8" HEIGHT="18">
      <table width="100%" border="0" cellspacing="0" cellpadding="3">
      <tr>
        <td style="padding-left:10px;"><a href="../front/productlist.php?code=001">24인치</a></td>
      </tr>
      <tr>
        <td style="padding-left:10px;"><a href="../front/productlist.php?code=002">26인치</a></td>
      </tr>
      </table>
      </td>
    </tr>
    </table>
    </td>
  </tr>
  <tr><td height="1" colspan="2" bgcolor="#DCDCDC"></td></tr>
  <tr>
    <td height="25"><IMG SRC="../images/001/main_skin2_categorynero.gif" border="0" align="absmiddle"></td>
    <td width="100%" style="cursor:hand;" onClick="OnDisplayToggle('idMenu1');">음반</td>
  </tr>
  <tr id="idMenu1" style="display:none;">
    <td align="center" colspan="2">
    <table width="100%" border="0" cellspacing="2" cellpadding="0">
    <tr>
      <td bgcolor="#f8f8f8" HEIGHT="18">
      <table width="100%" border="0" cellspacing="0" cellpadding="3">
      <tr>
        <td style="padding-left:10px;"><a href="../front/productlist.php?code=003">국내가요</a></td>
      </tr>
      <tr>
        <td style="padding-left:10px;"><a href="../front/productlist.php?code=004">락</a></td>
      </tr>
      <tr>
        <td style="padding-left:10px;"><a href="../front/productlist.php?code=005">JPOP</a></td>
      </tr>
      </table>
      </td>
    </tr>
    </table>
    </td>
  </tr>
  <tr><td height="1" colspan="2" bgcolor="#DCDCDC"></td></tr>
  </table>
  </td>
</tr>
<tr>
  <td><IMG SRC="../images/001/main_skin2_top_cate_d.gif" border="0"></td>
</tr>
</table>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━