문의드립니다.

 

1. 자바스크립트 전혀 모르는 문외한입니다. 가급적 고쳐야 되는 소스를 직접 말씀해 주셨으면 합니다ㅠㅠ

 

2. 팁 게시판(https://www.xpressengine.com/18158820) 을 보고, 홈페이지에 서브메뉴를 트리메뉴로 생성했습니다.

 

3. 홈페이지 특성상 서브 메뉴 밑에 또 다른 메뉴를 만들어야 됩니다. 이것 역시 트리메뉴로 하려고 시도했습니다. 즉 서로 다른 트리메뉴가 위, 아래 2개를 만들어야 됩니다.

 

4. 처음 서브메뉴에 쓰였던, dtree.js 파일과 레이아웃의 css, html 파일을 그대로 복사하여 파일명만 바꿔서 서브메뉴 밑에 또 다른 트리메뉴를 만들었습니다.  원래의 트리메뉴 dtree.js 이름을 otree.js 로 바꾸고, 파일안의 소스에 있는 모든 dree 란 단어를 otree 로 바꾸고 적용을 했습니다. css와 html 역시 같은 방법으로 적용했습니다.

 

5. 문제가 발생했습니다. 최초의 서브메뉴 밑에 또 다른 메뉴를 생성하는데 까지는 성공했습니다. 문제는 또 다른 트리메뉴를 만들기 전에는 원래의 서브메뉴인 dtree.js 를 이용한 트리메뉴는 아무문제없이 메뉴나 메뉴 옆의 이미지를 클릭하면 트리메뉴들이 펼쳐졌다 접혔다 등등 동적효과가 있었습니다.  그런데 그 밑에 또 다른 트리메뉴를 생성시켰더니 2개의 트리메뉴가 둘 다 동적효과가 사라졌습니다.

 

자바스크립트 언어를 전혀 볼 줄 몰라서 무엇을 어떻게 바꿔야 하는지 몰라서 문의드려봅니다.

 

 

 

원 소스와 제가 변경한 소스를 첨부해 봅니다.

 

6. dtree.js 소스와 otree.js 소스  -  dtree.js  /  otree.js (단순히 dtree.js 안의 모든 dtree 단어를 otree로 바꾸기만 했습니다)

 

 

7. 원본 css

 

/* Dtree lnb */
#dtree { margin-top: 30px; margin-bottom: 5px; padding:15px 0 0 4px; font-family: Malgun Gothic, 돋음, Verdana, sans-serif, Geneva, Arial, Helvetica ; font-size: 13px; color: #666; white-space: nowrap; border-color:#dedede #ffffff #dedede #ffffff; border-style:solid; border-width:1px 1px 1px 1px;}
#dtree img { border: 0; vertical-align: middle; }
#dtree a { color: #333; text-decoration: none; }
#dtree a.node { white-space: nowrap; padding: 1px 2px 1px 2px; }
#dtree a.nodeSel { white-space: nowrap; padding: 1px 2px 1px 2px; }
#dtree a.node:hover { color: #0000FF; text-decoration: underline; }
#dtree a.nodeSel:hover { color: #0000FF; text-decoration: underline; }
#dtree a.nodeSel { background-color: #CADEFC; color: #0000FF; }
#dtree .clip { overflow: hidden; }
#dtree p { margin-bottom: 10px; padding:20px 10px 0 0; text-align:right; }

 

 

수정한 css  (원본 css 에서 단순히 dtree 단어만 찾아서 otree 로 변경해줬습니다.)

 

 

8. 원본 html 소스

 

<div id="dtree">
 <script type="text/javascript">

  d = new dTree('d');

    var v,w,x,y,z,cnt;
  v=0;
  w=10;
  x=100;
  y=1000;
  z=10000;
  cnt=0;

  d.add(0,-1,'Sammasati','/osho_homepage','','');

  <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
   v=v+1;d.add(v,0,'{$val['link']}','{$val['href']}',''<!--@if($val['open_window']=='Y')-->,true<!--@end-->);
   <!--@if($val['selected']) -->
    cnt=v;
   <!--@end-->

   <!--@foreach($val['list'] as $key1 => $val1)--><!--@if($val1['text'])-->
    w=w+1;d.add(w,v,'{$val1['link']}','{$val1['href']}',''<!--@if($val1['open_window']=='Y')-->,true<!--@end-->);
    <!--@if($val1['selected']) -->
             cnt=w;
             <!--@end-->
   
    <!--@foreach($val1['list'] as $key2 => $val2)--><!--@if($val2['text'])-->
     x=x+1;d.add(x,w,'{$val2['link']}','{$val2['href']}',''<!--@if($val2['open_window']=='Y')-->,true<!--@end-->);
    <!--@if($val2['selected']) -->
             cnt=x;
             <!--@end-->

 <!--@foreach($val2['list'] as $key3 => $val3)--><!--@if($val3['text'])-->
     y=y+1;d.add(y,x,'{$val3['link']}','{$val3['href']}',''<!--@if($val3['open_window']=='Y')-->,true<!--@end-->);
    <!--@if($val3['selected']) -->
             cnt=y;
             <!--@end-->

   <!--@foreach($val3['list'] as $key4 => $val4)--><!--@if($val4['text'])-->
     z=z+1;d.add(z,y,'{$val4['link']}','{$val4['href']}',''<!--@if($val4['open_window']=='Y')-->,true<!--@end-->);
    <!--@if($val4['selected']) -->
             cnt=z;
             <!--@end-->

   
   
    <!--@end--><!--@end-->
    <!--@end--><!--@end-->
    <!--@end--><!--@end-->
   <!--@end--><!--@end-->
  <!--@end--><!--@end-->

  document.write(d);

  d.openTo(cnt, true);

 </script>
 <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
</div>

 

 

수정한 html (원본 html 에서 단순히 dtree 단어만 찾아서 otree 로 변경해줬습니다.)

 

 

이런 상황에서 메뉴생성은 성공했는데 원래의 트리메뉴처럼 메뉴가 동적으로 움직이려면

어느 부분을 추가로 수정해줘야 하는지요?

 

고수님들의 도움 부탁드립니다.ㅠㅠ