웹스터디

:: 메인메뉴를 따라다니는게 2차 서브메뉴

블루게이트 님의 자바스크립트를 이용해 제 홈페이지 레이아웃에 맞게 수정한 것이니다.
다른 레이아웃에 적용을 위해서는 약간의 수정이 필요한 부분이 있기 합니다만..
일반적으로 제 홈페이지처럼 메인메뉴 하나하나의 크기가 같을 경우 이용하실 수 있는 팁입니다.

수정해야 할 파일은 총 3가지 입니다.
layout.html, .css, official.js 이렇게.. 3가지..

먼저 layout.html의 메인메뉴 부분전체를....요렇게 바꾸어줍니다.

  <!--GNB-->
  <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>
  <!--//GNB-->

  <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-->

요렇게 그대로 교체주심 되겠습니다.. 교체한 다음 수정을 권장합니다..


그리고 css 파일에..
#gnb { position:absolute; left: 30px; top:20px; 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:#666666; white-space:nowrap; text-align:center; font-size:1.12em; font-weight:bold; text-decoration:none; }
#gnb li a:hover,
#gnb li a:focus { color:#000000; background:url(../images/default/bgGnbOn.gif) no-repeat center top; }
#gnb li.on a { font-weight:bold; color:#2f2f2f; background:url(../images/default/bgGnbOn.gif) no-repeat center top;}

.gnb_sub { position:absolute; top:55px; left:30px; height:24px; overflow:hidden; white-space:nowrap;  }
.gnb_sub li { float:left; list-style:none; background:url(../images/default/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/default/arrow_3.gif) no-repeat center bottom; }

요렇게 해주면 되겠습니다..  이건 제 홈페이지 소스를 그대로 붙인것이니 자신의 홈페이지에 맞게 세부적으로 수정을 하시면 될겁니다.


마지막으로 가장 중요한 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';    
}


----------------------------------------------------------------------------------------------------------------

이상 이네요..
이정도면 플래시 메인메뉴 구성을 플래시 메뉴 못지않게 구성하실 수 있으리라 생각됩니다.
따로 핑크로 색칠된 700이라는 숫자의 의미는 따라다닐 2차서브메뉴의 끝값입니다.
우야노닷컴을 예로 들면 전체 크기는 980px이지만..
검색창 부분으로 250px정도 되기 때문에 검색창까지 2차메뉴가 이동하지 못하도록 크기값을 700으로 준겁니다.


저처럼 이런 메뉴를 원하시는 분이면 그대로 쓰셔도 무방할테고..
능력이 되시면 자신의 홈페이지에 맞게 수정해서 사용하시면 되겠습니다.
특히나 이 팁이 고수님들에 의해서 조금 더 수정보완되기를 희망하며 올려놓습니다.