졸졸이스토크를 이용해서 레이아웃에 따라다니는 메뉴 출력하기

지금 보고 계시는 글의 우측에 보이는 퀵메뉴를 구현하는 방법입니다.

일단 소마세월님의 "졸졸이 스토커"위젯를 설치를 해야 하는데 이 위젯을 약간 수정을 해야합니다.

./widgets/alway_stalker/skins/default/stalker.html

 

[수정전]

<DIV id='alwayStalker_{$widget_info->seq}' style='position:absolute;z-index:99;'>
<!-- 이곳을 수정하시면 됩니다. -->
<!--@ if($widget_info->addon_textarea)-->
{$widget_info->addon_textarea}
<!--@else -->
<a href="#"><img src="/images/top.gif" /></a><br />
<a onclick="pageScroll();" style="cursor:pointer">하단</a>
<!--@end-->
<!-- 여기까지 -->    
</div>

 

[수정후]

<div id='alwayStalker_{$widget_info->seq}' style='position:absolute;z-index:99;'>
  <!--@ if($widget_info->addon_textarea)-->
   {$widget_info->addon_textarea}
  <!--@else --> 
   <div id="side_t"><a href="#"><img src="/images/blank.gif" align="absmiddle" width="95px" height="28px" class="iePngFix" /></a></div>
   <ol id="side">
     <!--@foreach($side_menu->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>
    </li>
     <!--@endif--><!--@endforeach-->
   </ol>
   <div id="side_b" onclick="pageScroll();" style="cursor:pointer"></div>
  <!--@end-->
</div>

 

그래서 따로 "MH졸졸이스토커"위젯을 만들었습니다.  mh_alway_stalker.zip

./widgets/mh_alway_stalker 에 위젯을 설치를 합니다.

 

이제는 레이아웃스킨에 입히는 과정입니다.

./layouts/xe_official/conf/info.xml 에 해당 부분을 삽입합니다.

 

[졸졸이 스토커를 레이아웃에 풀력할지를 결정]

 

        <var name="side_alway_stalker" type="select">
             <title xml:lang="ko">졸졸이스토커</title>
             <description xml:lang="ko">사이드 졸졸이스토커의 출력을 결정하세요.("MH졸졸이스토커위젯"이 기본으로 설치되어 있어야 합니다)</description>
    <options value="Y">
    <title xml:lang="ko">출력</title>
    </options>
    <options value="N">
    <title xml:lang="ko">출력안함</title>
             </options>
        </var>

 

[졸졸이스토커에 출력되는 메뉴구성 출력]

 

        <menu name="side_menu" maxdepth="1">
            <title xml:lang="ko">사이드 메뉴 </title>
        </menu>

 

 

./layouts/xe_official/layout.html 에 위젯코드를 추가합니다.

<!--사이드 졸졸이위젯-->
<!--@if($layout_info->side_alway_stalker == 'Y')-->
<img class="zbxe_widget_output" widget="mh_alway_stalker" skin="default" addon_position="2" addon_width="985" addon_left="985" addon_top="138" addon_top_gap="138"  addon_textarea="" />
<!--@end-->

 

./layouts/xe_official/css/default.css 에 코드를 추가합니다.

/* 사이드바 메뉴 */
#side_t { margin-top:0px; width:95px; height:28px; background:url(../images/side_top.png) no-repeat; }

#side { width:95px; background:url(../images/side_middle.png) repeat-y; }
#side li { padding:10px 10px 10px 0px; list-style:none; background:url(../images/side_line.png) no-repeat bottom; }
#side li a { margin-left:10px; font:1.1em Tahoma; color:#8F8F8F; text-decoration:none; }
#side li a:hover,
#side li a:focus { font-weight:normal !important; color:#CC9900 !important;} 
#side li.on a { color:#ff6600; }

#side_b { width:95px; height:12px; background:url(../images/side_under.png) no-repeat; }

 

./layouts/xe_official/images 폴더안에 해당 이미지를 업로드합니다. images.zip 

 

    

 p.s 사이드메뉴 생성시 이미지로 만드시면 위의 이미지에서 제일 아래칸 같이 이미지메뉴로 출력됩니다.