좌측 메뉴 디자인 팁 - 세부 카테고리 Toggle형태 디자인
2008-08-30 | 겟몰 | 1692
■ 좌측 메뉴 세부 카테고리 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>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
