2008.03.04 22:42
네 또 오셨네요.^^xe 공식 레이아웃도 제 사이트와 마크업은 크게 다를게 없습니다. css 에서 수정만 된것이라고 할수 있습니다.그럼 설명을 드릴테니 순서대로 해보시면 될듯합니다.1. 트리메뉴 레이아웃을 다운받아서 경로에 맞게 xe공식스킨에 똑같이 업로드 합니다. images 폴더안에 dtree_img 와 js 폴더에 dtree.js 를 말합니다. 이두개만 똑같은 위치에 업로드를 하시면 됩니다.2. xe공식스킨의 layout.html 파일을 열어서 상단 <!--%import("js/xe_official.js")--> 아래 <!--%import("js/dtree.js")--> 를 추가합니다.그리고 아래소스를<!-- 왼쪽 2차 메뉴 --> <img src="./images/blank.gif" alt="" class="mask" />
<!--@if($menu_1st)--> <ol id="lnb"> {@ $idx = 1 } <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])--> <li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a>
<!-- main_menu 3차 시작 --> <!--@if($val['list'] && ($val['expand']=='Y'||$val['selected']) )--> <ul> <!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])--> <li <!--@if($v['selected'])-->class="on"<!--@end-->><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['link']}</a></li> <!--@end--><!--@end--> </ul> <!--@end--> </li> {@$idx++} <!--@end--><!--@end--> </ol> <!--@end-->
</div>
아래 소스로 바꿔줍니다. <!-- 왼쪽 2차 메뉴 --> <div id="dtree"> <script type="text/javascript">
d = new dTree('d');
var x,y,z; x=0; y=10; z=100;
d.add(0,-1,'main','{$layout_info->index_url}','','');
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])--> x=x+1;d.add(x,0,'{$val['link']}','{$val['href']}'); <!--@foreach($val['list'] as $key1 => $val1)--><!--@if($val1['text'])--> y=y+1;d.add(y,x,'{$val1['link']}','{$val1['href']}'); <!--@foreach($val1['list'] as $key2 => $val2)--><!--@if($val2['text'])--> z=z+1;d.add(z,y,'{$val2['link']}','{$val2['href']}'); <!--@end--><!--@end--> <!--@end--><!--@end--> <!--@end--><!--@end-->
document.write(d);
</script> <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p> </div>3. xe공식스킨의 적용하실려는 css 파일을 열어서 적당한 위치에 아래소스를 넣습니다./* Dtree lnb */#dtree { padding:10px 0 0 10px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; white-space: nowrap; }#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: #333; text-decoration: underline; }#dtree a.nodeSel:hover { color: #333; text-decoration: underline; }#dtree a.nodeSel { background-color: #fff; }#dtree .clip { overflow: hidden; }#dtree p { padding:0 10px 0 0; text-align:right; }4. js 폴더의 dtree.js 파일을 여시고 아래 소스를 찾습니다.var dtree_icon_path = "./layouts/jjang/images/dtree_img/";위소스를 xe공식스킨이름 xe_official 로 바꿔줍니다. 그럼다음과 같아지겠네요.var dtree_icon_path = "./layouts/xe_official/images/dtree_img/";이상입니다.^^마지막으로 하위메뉴가 나오게 할려면 관리자에서 메뉴에 가셔서 하위메뉴 추가를 해주시면 자동으로 붙습니다.
여기에 파일을 끌어 놓거나 파일 첨부 버튼을 클릭하세요.
파일 크기 제한 : 0MB (허용 확장자 : *.*)
파일 업로드 중... (0%)
네 또 오셨네요.^^
xe 공식 레이아웃도 제 사이트와 마크업은 크게 다를게 없습니다. css 에서 수정만 된것이라고 할수 있습니다.
그럼 설명을 드릴테니 순서대로 해보시면 될듯합니다.
1. 트리메뉴 레이아웃을 다운받아서 경로에 맞게 xe공식스킨에 똑같이 업로드 합니다.
images 폴더안에 dtree_img 와 js 폴더에 dtree.js 를 말합니다. 이두개만 똑같은 위치에 업로드를 하시면 됩니다.
2. xe공식스킨의 layout.html 파일을 열어서 상단 <!--%import("js/xe_official.js")--> 아래 <!--%import("js/dtree.js")--> 를 추가합니다.
그리고 아래소스를
<!-- 왼쪽 2차 메뉴 -->
<img src="./images/blank.gif" alt="" class="mask" />
<!--@if($menu_1st)-->
<ol id="lnb">
{@ $idx = 1 }
<!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a>
<!-- main_menu 3차 시작 -->
<!--@if($val['list'] && ($val['expand']=='Y'||$val['selected']) )-->
<ul>
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])-->
<li <!--@if($v['selected'])-->class="on"<!--@end-->><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['link']}</a></li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
{@$idx++}
<!--@end--><!--@end-->
</ol>
<!--@end-->
</div>
아래 소스로 바꿔줍니다.
<!-- 왼쪽 2차 메뉴 -->
<div id="dtree">
<script type="text/javascript">
d = new dTree('d');
var x,y,z;
x=0;
y=10;
z=100;
d.add(0,-1,'main','{$layout_info->index_url}','','');
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
x=x+1;d.add(x,0,'{$val['link']}','{$val['href']}');
<!--@foreach($val['list'] as $key1 => $val1)--><!--@if($val1['text'])-->
y=y+1;d.add(y,x,'{$val1['link']}','{$val1['href']}');
<!--@foreach($val1['list'] as $key2 => $val2)--><!--@if($val2['text'])-->
z=z+1;d.add(z,y,'{$val2['link']}','{$val2['href']}');
<!--@end--><!--@end-->
<!--@end--><!--@end-->
<!--@end--><!--@end-->
document.write(d);
</script>
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
</div>
3. xe공식스킨의 적용하실려는 css 파일을 열어서 적당한 위치에 아래소스를 넣습니다.
/* Dtree lnb */
#dtree { padding:10px 0 0 10px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; white-space: nowrap; }
#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: #333; text-decoration: underline; }
#dtree a.nodeSel:hover { color: #333; text-decoration: underline; }
#dtree a.nodeSel { background-color: #fff; }
#dtree .clip { overflow: hidden; }
#dtree p { padding:0 10px 0 0; text-align:right; }
4. js 폴더의 dtree.js 파일을 여시고 아래 소스를 찾습니다.
var dtree_icon_path = "./layouts/jjang/images/dtree_img/";
위소스를 xe공식스킨이름 xe_official 로 바꿔줍니다. 그럼다음과 같아지겠네요.
var dtree_icon_path = "./layouts/xe_official/images/dtree_img/";
이상입니다.^^
마지막으로 하위메뉴가 나오게 할려면 관리자에서 메뉴에 가셔서 하위메뉴 추가를 해주시면 자동으로 붙습니다.