moonhouse레이아웃 사이트맵 toggle(접기)기능으로 구현하기

문하우스 레이아웃스킨 V3를 설치하면 본문하단에 XE사이트맵기능이 적용됩니다.

설정에서 출력을 선택할 수 있지만, 출력된 경우 세로높이가 너무 높아 보이는 경우가 있을 수 있습니다.

이런 경우 기본출력시 접어두고 아이콘클릭시 펴 지는 toggle기능을 적용해 봅니다.

[샘플로 문하우스 레이아웃스킨 V3로 설명을 합니다.]

1. xe/layouts/moonhouse_V3/js/moonhouse.js파일에 아래 소스추가합니다.

/* 토글 */
function toggle_object(post_id){  
    var obj = xGetElementById(post_id);  
    if(!obj) return;  
 
    if(obj.style.display=="none"){  
        obj.style.display='block';  
    } else {  
        obj.style.display="none";  
    }  
}

2. layout.html파일에서 아래부분을 찾아서 빨간색부분을 추가해서 수정합니다.

 <!--사이트맵-->
     <!--@if($layout_info->sitemap == 'Y')-->
     <div id="toggle">
       <a href="/#" onclick="toggle_object('sitemap'); return false;" ><img src="/images/sitemap.gif" alt="" class="iePngFix" /></a>
     </div>
        <div id="sitemap" style="display:none">

 3. common.css파일에 아래 소스를 추가합니다.

#toggle { text-align:right; margin-right:0px; }
#toggle img { margin-bottom:-10px; }