지금 보고 계시는 글의 우측에 보이는 퀵메뉴를 구현하는 방법입니다.
일단 소마세월님의 "졸졸이 스토커"위젯를 설치를 해야 하는데 이 위젯을 약간 수정을 해야합니다.
./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 사이드메뉴 생성시 이미지로 만드시면 위의 이미지에서 제일 아래칸 같이 이미지메뉴로 출력됩니다.