Tip

메뉴바에 토글메뉴 추가하기

by 팔공산 posted Jul 15, 2011
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

이전 다음 위로 아래로 댓글로 가기 인쇄 목록
첨부파일 등록일 파일크기 다운 수
toggle.js 2016.05.04 981Bytes 23
Extra Form

오랜만에 제 홈피에 글을 남겨봅니다.

제티스님의 요청으로 ( 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 의 수치를 알맞게 조절하시면 되고
해당 이미지들은 자신의 사이트에 맞게끔 제작하시면 됩니다.

마지막으로  toggle.js  파일을 내려 받아서 js폴더에 넣어시면 됩니다.

챀고로 레이아웃설정에서 "토글기능내용" 중에서 "사이트맵"을 선택하시면 자동으로 자신의 메뉴들이 보여집니다.
그리고 "위젯"을 선택하셨다면 아래 "토글안 위젯코드"에 자신이 넣고 싶은 위젯코드를 추출해서 넣어 주시면 됩니다.

more.jpg

이 자료의 평점 (참여 : 0 / 총 점수 : ) 평균 평점 : ★ ★ ★ ★ ★ 0.0점
#연관글
  1. RM 팁 말풍선(툴팁) 애드온을 이용한 위젯설정 [2017-11-07] *7
  2. RM 팁 레이아웃 최상단에 애니메이션 효과로 펼쳐지는 메뉴 [2017-01-04]
  3. RM 팁 팝업창을 마우스로 이동 가능하게 하는 방법 [2017-01-02]
  4. RM 팁 글 작성전 에디터에 미리 준비된 메세지 보이기 ckeditor, xpresseditor [2016-12-25]
  5. RM 팁 Blooz Layout 3.2 레이아웃안에 들어있는 현재위치 메뉴부분 적용팁 [2010-10-30] *1
이 자료의 평점 (참여 : 0 / 총 점수 : ) 평균 평점 : ★ ★ ★ ★ ★ 0.0점
TAG •

Who's 팔공산

profile

이 世上에서 現在가 가장 중요한 時間이며,
내가 만나고 있는 바로 그 사람이 第一 중요한 사람이며,
同時에 가장 중요한 것은 그 사람에게 善으로서 行하는 것이다.

위로 아래로 댓글로 가기 인쇄 목록
✔ 이 글 평점 주기
★★★★★
5점
에디터 선택하기
?
스티커
에디터 사용하기 닫기
스티커
Comments '1'
  • 숙지황 2012.07.10 22:51

    정말 간절히 필요했던 부분인데

    이제야

    찾았읍니다.

    감사 합니다.

    잘 쓸께요...

    댓글

Articles

1 2 3 4