오랜만에 제 홈피에 글을 남겨봅니다.
제티스님의 요청으로 ( https://moonhouse.co.kr/297897 ) 기본 메뉴바 옆에 따로 토글메뉴를 추가해서
사이트맵이나 지정 위젯을 나타나게 하는 팁입니다.
1. 사용중인 레이아웃의 info.xml에 아래의 코드를 추가해 줍니다.
<var name="toggle" type="select">
<title xml:lang="ko">★토글 사용 여부</title>
<title xml:lang="en">★토글 사용 여부</title>
<description xml:lang="ko">토글기능의 표시를 결정하세요.</description>
<description xml:lang="en">토글기능의 표시를 결정하세요.</description>
<options value="Y">
<title xml:lang="ko">표시</title>
<title xml:lang="en">표시</title>
</options>
<options value="N">
<title xml:lang="ko">표시안함</title>
<title xml:lang="en">표시안함</title>
</options>
</var>
<var name="sitemap" type="select">
<title xml:lang="ko"> ┖ 토글기능 내용</title>
<title xml:lang="en"> ┖ 토글기능 내용</title>
<description xml:lang="ko">토글안에 내용 결정하세요.</description>
<description xml:lang="en">토글안에 내용 결정하세요.</description>
<options value="Y">
<title xml:lang="ko">사이트맵</title>
<title xml:lang="en">사이트맵</title>
</options>
<options value="N">
<title xml:lang="ko">위젯</title>
<title xml:lang="en">위젯</title>
</options>
</var>
<var name="toggle_widget" type="textarea">
<title xml:lang="ko"> ┖ 토글안 위젯코드</title>
<title xml:lang="en"> ┖ 토글안 위젯코드</title>
<description xml:lang="ko">토글안에 들어갈 위젯을 추가합니다.(위젯코드를 붙여넣기 하세요) </description>
<description xml:lang="en">토글안에 들어갈 위젯을 추가합니다.(위젯코드를 붙여넣기 하세요) </description>
</var>
2. layout.html 파일안에 아래의 코드를 추가해 줍니다.
<!--토글메뉴-->
<!--@if($layout_info->toggle == 'Y')-->
<!--%import("js/toggle.js")-->
<div id="toggle" style="left:{$layout_info->bodyWrap_width-120}px;">
<!--@if($layout_info->sitemap == 'Y')-->
<div id="sitemap_icon" class="iePngFix"></div>
<div id="sitemap">
<div class="extension">
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<div class="section">
<h2><a href="{$val['href']}"<!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->> {$val['text']} </a></h2>
<!--@if($val['list'])-->
<ul>
<!--@foreach($val['list'] as $k => $v)-->
<!--@if($v['link'])-->
<li><a href="{$v['href']}"<!--@if($v['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->>{$v['text']}</a></li>
<!--@end-->
<!--@end-->
</ul>
<!--@end-->
</div>
<!--@end-->
<!--@end-->
</div>
</div>
<!--@else-->
<div id="widget_icon" class="iePngFix"></div>
<div id="toggle_widget">
<div class="extension">
{$layout_info->toggle_widget}
</div>
</div>
<!--@end-->
</div>
<!--@end-->
3. 해당 css파일안에 아래의 코드를 추가해 줍니다.
/* Toggle_Sitemap */
#toggle { position:absolute; top:132px; z-index:90;}
#sitemap_icon { position:relative; width:106px; height:16px; padding:0; background:url(../images/common/sitemap_icon.png) no-repeat; background-position:left 0px; cursor:pointer; }
#sitemap { position:absolute; width:670px; height:auto; background:url(../images/common/sitemap_bg_top.png) no-repeat; top:20px; right:-10px; display:none; padding:29px 0px 0px 0px; border:0px solid #ffffff; z-index:9; }
#sitemap a { text-decoration:none; }
#sitemap a:hover,
#sitemap a:active,
#sitemap a:focus{ color:#ff6600; }
#sitemap .extension { *zoom:1; padding:5px 0; background-color:#999; margin-bottom:0px; border:2px solid #000; z-index:9; }
#sitemap .extension:after { content:""; display:block; clear:both; }
#sitemap .extension .section { float:left; width:150px; margin-bottom:20px; padding:0 0 0 10px; background:url(../images/common/lineKneeVr.gif) repeat-y 0 0; }
#sitemap .extension .section h2 { font-size:12px; margin:0 0 10px 0; }
#sitemap .extension .section h2 a { padding:5px 10px 0 0px; color:#555; }
#sitemap .extension .section h2 a:hover,
#sitemap .extension .section h2 a:active,
#sitemap .extension .section h2 a:focus{ padding:5px 10px 0 10px;background-color:#fff; color:#555;}
#sitemap .extension .section a { color:#ddd; }
#sitemap .extension .section a:hover,
#sitemap .extension .section a:active,
#sitemap .extension .section a:focus{ color:#fff; }
#sitemap .extension .section ul { margin:0; padding:0; list-style:none; }
#sitemap .extension .section li { margin-bottom:6px; }
/* Toggle_Widget */
#widget_icon { position:relative; width:106px; height:16px; padding:0; background:url(../images/common/more_icon.png) no-repeat; background-position:left 0px; cursor:pointer; }
#toggle_widget { position:absolute; width:500px; height:auto; background:url(../images/common/togglewidget_bg_top.png) no-repeat; top:20px; right:-10px; display:none; padding:29px 0px 0px 0px; border:0px solid #ffffff; z-index:99; }
#toggle_widget a { text-decoration:none; }
#toggle_widget a:hover,
#toggle_widget a:active,
#toggle_widget a:focus{ color:#ff6600; }
#toggle_widget .extension { *zoom:1; padding:0; background-color:#F6F6F6; margin-bottom:0px; border:2px solid #000; }
#toggle_widget .extension:after { content:""; display:block; clear:both; }
#toggle_widget .extension .section { float:left; width:150px; margin:0; padding:0 0 0 10px; border-left:1px dotted #a98a60; }
#toggle_widget .extension .section h2 { font-size:12px; margin:0 0 10px 0; }
#toggle_widget .extension .section h2 a { padding:5px 10px 0 10px; background-color:#000; color:#fff; }
#toggle_widget .extension .section h2 a:hover,
#toggle_widget .extension .section h2 a:active,
#toggle_widget .extension .section h2 a:focus{ background-color:#fff; color:#a98a60;}
#toggle_widget .extension .section a { color:#7B7B7B; }
#toggle_widget .extension .section a:hover,
#toggle_widget .extension .section a:active,
#toggle_widget .extension .section a:focus{ color:#ff6600; }
#toggle_widget .extension .section ul { margin:0; padding:0; list-style:none; }
#toggle_widget .extension .section li { margin-bottom:6px; }
위의 부분에서 top:132px 의 수치를 알맞게 조절하시면 되고
해당 이미지들은 자신의 사이트에 맞게끔 제작하시면 됩니다.
챀고로 레이아웃설정에서 "토글기능내용" 중에서 "사이트맵"을 선택하시면 자동으로 자신의 메뉴들이 보여집니다.
그리고 "위젯"을 선택하셨다면 아래 "토글안 위젯코드"에 자신이 넣고 싶은 위젯코드를 추출해서 넣어 주시면 됩니다.
정말 간절히 필요했던 부분인데
이제야
찾았읍니다.
감사 합니다.
잘 쓸께요...