웹스터디

블루게이트님의 공개허락으로 팁으로 공개해 본다.
(이건 따라다니는게 아니라 2차 서브메뉴가 왼쪽으로 정렬되는 것이다.)

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

특별한 수정 방법보다는 바로 소스를 바꾸는 방법이 훨씬 나을것 같다.
먼저 layout.html의 메인메뉴 부분을..

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

                <li id="mmli{$mmid_count}" <!--@if($val['selected'])-->class="on"<!--@end--> onmouseover="gnbinToggle({$mmid_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>{@$mmid_count++;}

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

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

  <!-- 2차 메뉴 -->
        {@$mmid_count = 0;}
        <!--@foreach($main_menu->list as $mkey => $mval)-->
    <!--@if($mval['text'])-->
          <!-- 왼쪽 2차 메뉴 -->
          <!--@if($mval['selected'])-->
            <ol id="mmid{$mmid_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>
          <!--@else-->
            <ol id="mmid{$mmid_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-->
          {@$mmid_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파일 수정이다.

기본 소스에다 아래소스를 추가해준다.

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, mmblock) {
 if(browserType == 'FF') {
  gnbinToggleFF(id, mmblock);
 } else {
  gnbinToggleIE(id, mmblock);
 }
}

// Local Navigation Toggle
function gnbinToggleIE(id, mmblock) {
// var mmid_count = document.forms['form_menu']['mmid_count'].value;

 for(num=0; num<mmid_count; num++) {
  document.getElementById('mmid'+num).style.display='none';
  document.getElementById('mmli'+num).setAttribute('className', 'off');
 }
// alert(mmid_count);
// alert(document.getElementById('mmli0').className);
 document.getElementById('mmid'+id).style.display='block';
 mmblock.className = "on";
}

// Local Navigation Toggle
function gnbinToggleFF(id, mmblock) {
//    var mobj = document.getElementsByName('mmli');

 for(var num=0; num<mmid_count; num++) {
//  mobj[num].className = null;

  document.getElementById('mmid'+num).style.display='none';
  document.getElementById('mmli'+num).className = null;
 }
 document.getElementById('mmid'+id).style.display = '';
 mmblock.className = 'on';
}

이렇게 추가해주면 롤오버 메뉴를 구성하기 위한 모든 준비가 끝난것이다.

소마세월님의 팁보다 훨씬 유용하게 활용되리라 생각된다.