스크랩

mjworks님이 배포하신 mjworks. standard V1 레이아웃 스킨이 마음에 들어서 내가 약간의 변형을 해서 사용중입니다.

여기서 상단메뉴밑에 서브메뉴를 다는 방법을 설명드리겠습니다.
일단 기본의 예쁜 상단메뉴는 포기하셔야 합니다. 그대로 두고 해 볼려니 실력이 미천하여 포기...

먼저 우야노님의 팁을 적용을 해야합니다. 

1. layout.html을 열어서 - 중간생략 - 부분을 삭제하세요

<!-- 상단메뉴 -->
- 중간생략 -
<!-- /상단메뉴 -->

삭제한 중간생략부분에 아래의 소스를 붙여넣어세요.

<!-- 상단메뉴 -->
<!--1차메뉴-->
  <ul id="gnb">
            <!-- main_menu 1차 시작 -->
            {@$gnb_count = 0;}
            <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
                <!--@if($val['selected'])-->
                    {@ $menu_1st = $val }
                <!--@end-->

                <li id="gnbli{$gnb_count}" <!--@if($val['selected'])-->class="on"<!--@end--> onmouseover="gnbinToggle({$gnb_count}, this)" ><a href="{$val['href']}" onfocus="this.blur()" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>{@$gnb_count++;}

            <!--@end--><!--@end-->
            <!-- main_menu 1차 끝 -->
  </ul>
  <!--//1차메뉴-->

  <script type="text/javascript">
   var gnb_count = {$gnb_count};
  </script>

  <!-- 2차 메뉴 -->
        {@$gnb_count = 0;}
        <!--@foreach($main_menu->list as $mkey => $mval)-->
    <!--@if($mval['text'])-->
          <!-- 왼쪽 2차 메뉴 -->
          <!--@if($mval['selected'])-->
            <ol id="gnb{$gnb_count}" class="gnb_sub" style="display:block;">
     <!--@if(!$mval['list'])--><li></li><!--@end-->
              <!--@foreach($mval['list'] as $key => $val)--><!--@if($val['text'])-->
     <li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" onfocus="this.blur();" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
     </li>
              <!--@end--><!--@end-->
      </ol>
  <script type="text/javascript">
   var gnb_count_now = {$gnb_count};
   reset_menu();
  </script>
          <!--@else-->
            <ol id="gnb{$gnb_count}" class="gnb_sub" style="display:none;">
     <!--@if(!$mval['list'])--><li></li><!--@end-->
              <!--@foreach($mval['list'] as $key => $val)--><!--@if($val['text'])-->
     <li><a href="{$val['href']}" onfocus="this.blur();" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
     </li>
              <!--@end--><!--@end-->
      </ol>
          <!--@end-->
          {@$gnb_count++;}
          <!--@end-->
        <!--@end-->

<!-- /상단메뉴 -->

2. common.css를 열어서 적당한 곳에 아래의 소스를 추가합니다.

#gnb { position:absolute; left:10px; top:85px; overflow:hidden; white-space:nowrap; }
#gnb li { float:left; list-style:none; position:relative; white-space:nowrap;}
#gnb li a { display:block; float:left; padding:12px 0px 0px 0px; background:url(../images/default/bgGnbOff.gif) no-repeat center top; width:82px; height:20px; color:#ffffff; white-space:nowrap; text-align:center; font-size:1.2em; font-weight:bold; text-decoration:none; }
#gnb li a:hover,
#gnb li a:focus { color:#66CC00; background:url(../images/default/bgGnbOn.gif) no-repeat center top; }
#gnb li.on a { font-weight:bold; color:#f60; background:url(../images/default/bgGnbOn.gif) no-repeat center top;}

.gnb_sub { position:absolute; left:10px; top:125px; height:24px; overflow:hidden; white-space:nowrap;  }
.gnb_sub li { float:left; list-style:none; background:url(../images/sub_part.gif) no-repeat left center; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
.gnb_sub li a { display:block; float:left; padding:6px 15px 0 15px; height:18px; color:#ffffcc; font-weight:bold; white-space:nowrap; text-decoration:none; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
.gnb_sub li a:hover,
.gnb_sub li a:focus { color:yellow; }
.gnb_sub li.on a, .gnbin li.on a:hover { font-weight:bold; color:yellow; background:url(../images/arrow_3.gif) no-repeat center bottom; }

몇개의 이미지파일들이 보입니다. 우야노님의 스킨에서 찾아서 넣어주시면 됩니다. 그런데 저는 이미지 없이 해도 괜찮더군요.
sub_part.gif 와 arrow_3.gif 파일은 아래에서 다운로드 받으세요.

빨간색부분이 1차 메뉴의 위치이고 파란색부분이 2차 메뉴의 위치입니다.

3. common.js를 열어서 아래의 소스를 추가합니다.

// 롤오버 2차메뉴 만들기
// Brower
var browserType='';

if(navigator.userAgent.indexOf("MSIE") >-1) {
   browserType = 'IE';
} else if(navigator.userAgent.indexOf("Firefox") >-1) {
   browserType = 'FF';
} else {
   browserType = 'OTHER';
}

function gnbinToggle(id, gnbblock) {
 if(browserType == 'FF') {
  gnbinToggleFF(id, gnbblock);
 } else {
  gnbinToggleIE(id, gnbblock);
 }
}

// Local Navigation Toggle
function gnbinToggleIE(id, gnbblock) {

 for(num=0; num<gnb_count; num++) {
  document.getElementById('gnb'+num).style.display='none';              // 2차 메뉴
  document.getElementById('gnbli'+num).setAttribute('className', 'off');  // 1차 메뉴
 }

 var sub_1 = document.getElementById('gnbli'+id);     // 1 차메뉴
 var sub_2 = document.getElementById('gnb'+id);     // 2 차메뉴
 document.getElementById('gnb'+id).style.display = 'block';
 gnbblock.className = "on";

 var sub_2_left =sub_1.offsetWidth * (id+0.5) - sub_2.offsetWidth /2;

 // 2차메뉴 크기에 따른 위치 조절
 if (sub_2_left < 0)
  sub_2_left = 0;
 else if( (sub_2_left + sub_2.offsetWidth) > 700 )
  sub_2_left=(700 - sub_2.offsetWidth);
  sub_2.style.marginLeft = sub_2_left + 'px';    
}

// Local Navigation Toggle
function gnbinToggleFF(id, gnbblock) {

 for(var num=0; num<gnb_count; num++) {
  document.getElementById('gnb'+num).style.display='none'; // 2차 메뉴
  document.getElementById('gnbli'+num).className = null;  // 1차 메뉴
 }

 var sub_1 = document.getElementById('gnbli'+id);     // 1 차메뉴
 var sub_2 = document.getElementById('gnb'+id);     // 2 차메뉴
 document.getElementById('gnb'+id).style.display = '';
 gnbblock.className = "on";

 var sub_2_left =sub_1.offsetWidth * (id+0.5) - sub_2.offsetWidth /2;

 // 2차메뉴 크기에 따른 위치 조절
 if (sub_2_left < 0)
  sub_2_left = 0;
 else if( (sub_2_left + sub_2.offsetWidth) > 700 )
  sub_2_left=(700 - sub_2.offsetWidth);
  sub_2.style.marginLeft = sub_2_left + 'px';    
}

function reset_menu()
{
  
     var sub_1 = document.getElementById('gnbli'+gnb_count_now);     // 1 차메뉴
  var sub_2 = document.getElementById('gnb'+gnb_count_now);     // 2 차메뉴
  var sub_2_left =sub_1.offsetWidth * (gnb_count_now+0.5) - sub_2.offsetWidth /2;

 // 넓이가 0미만일경우 0
 if (sub_2_left < 0)
  sub_2_left = 0;
 else if( (sub_2_left + sub_2.offsetWidth) > 700 )
  sub_2_left=(700 - sub_2.offsetWidth);
  sub_2.style.marginLeft = sub_2_left + 'px';    
}

이렇게 하면 완성입니다.

[그외 팁들입니다]

<h1 id="logo">
<a href="{$layout_info->home_url}"> <!--@if(!$layout_info->logo_img)--><img src="./images/logo.png" alt="logo" class="iePngFix"/><!--@else--><img src="{$layout_info->logo_img}" alt="logo" class="iePngFix"/><!--@end--></a>
</h1>
이렇게 해 주어야 로그에 링크가 됩니다.

 

적는 김에~~~
Bookmark도 지금의 코드로는 파폭에서는 작동되지를 않습니다.

common.js안의 내용을 아래와 같이 바꾸어 주고
[수정전]
function addfavorites(favoriteurl, favoritetitle){
 if (document.all)
 window.external.AddFavorite(favoriteurl,favoritetitle)
  }
[수정후]
//즐겨찾기추가
function bookmarksite(title,url){
if (window.sidebar) // firefox
    window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
    var elem = document.createElement('a');
    elem.setAttribute('href',url);
    elem.setAttribute('title',title);
    elem.setAttribute('rel','sidebar');
    elem.click();
}
else if(document.all)// ie
    window.external.AddFavorite(url, title);
}

layout.html 83줄을 아래와 같이 편집하면 파폭에서도 잘 작동합니다.
[수정전]
 <li><a href="javascript:addfavorites('{$layout_info->home_url}','{$layout_info->home_title}')">Bookmark</a></li>
[수정후]
 <li><a href="javascript:bookmarksite('{$layout_info->home_title}','{$layout_info->home_url}')">Bookmark</a></li>

 

내친김에~~
layout.html 로그정보안에 레이아웃에디터(Edit)와 레이아웃관리(Modify)도 함께 넣어 보았습니다.(덜 귀찮게..)

<!-- 로그정보 -->
<ul id="Log">

<!--@if(!$is_logged)-->
 <li><a href="{getUrl('act','dispMemberLoginForm')}">Login</a></li>
 <li><a href="{getUrl('mid',$layout_info->target_mid,'act','dispMemberSignUpForm')}">Join</a></li>
<!--@else-->
    <li><a href="{getUrl('act','dispMemberLogout')}">Logout</a></li>
<!--@end-->
           
<!--@if($logged_info->is_admin == 'Y')-->
 <li><a href="{getUrl('','module','admin')}" onclick="window.open(this.href); return false;">Manage</a></li>
 <li><a href="{getUrl('act','dispLayoutAdminEdit','layout_srl',$layout_info->layout_srl)}">Edit</a></li>
 <li><a href="{getUrl('act','dispLayoutAdminModify','layout_srl',$layout_info->layout_srl)}">Modify</a></li>
 <li><a href="{getUrl('act','dispBoardAdminBoardInfo')}">Setup</a></li>
 <!--@else-->
 <li><a href="{geturl('act','dispMemberInfo')}">MyInfo</a></li>
 <li><a href="javascript:bookmarksite('{$layout_info->home_title}','{$layout_info->home_url}')">Bookmark</a></li>
 <li><a href="mailto:{$layout_info->mail}">Contact</a></li>
<!--@end-->

</ul>
<!-- /로그정보 -->

 
이 게시물을...