웹마스터 팁

이 팁은 현재 우야노 배포판
http://www.zeroboard.com/16780024
http://www.uyano.com/bbs/9185
에 적용된 내용입니다. 샘플로 삼으시면 좋겠네요..
그리고 혹시 질문 내용이 있으시다면 먼저
http://www.uyano.com/bbs/web_xetips/9762 여기를 보신 후 해주세요..

일단 기본적인 수정 방법은 기존의 소마세월님의 팁과 거의 동일합니다.
단지 소스가 다를 뿐이죠..

이 팁의 단점은 메인의 1차메뉴 크기가 하나하나 동일해야 제대로 사용하실 수 있다는 겁니다.
유의하세요~~!!

수정파일은 기본 레이아웃 기준으로 layout.html, default.css, xe_official  3가지가 되겠습니다.

1) layout.html 수정하기
: 기존의 메인메뉴부분(1차메뉴나 2차메뉴)를 완전히 아래 소스로 덮어 씌움니다.

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

레이아웃의 메뉴 구성 방식에 따라 다르겠지만.. 이부분은 크게 수정할일은 없을겁니다.
기존(공식버전)의 1차메뉴에 롤오버를 위한 2차메뉴가 추가된 형태로 보시면 되겠습니다.

 

2) default.css 수정하기..
: css 내용중 메인메뉴 부분을 찾습니다. 주로 gnb로 시작하는 부분이 메인메뉴 css이죠..
이부분 역시 완전히 아래의 소스로 일단 바꿔 줍니다.
바꾸신 후에 수정을 추천 하지만.. 포지션 값은 기존 메인메뉴값을 먼저 입력한후 사용하시는게 좋을듯 합니다.
그래야 처음부터 대충이나마 모양새를 갖추어 볼 수 있을테니까요..

#gnb { position:absolute; left: 25px; top:60px; 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:95px; 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; }

기존 1차메뉴 부분은 #gnb 부분이고.. 롤오버를 위해 추가된 부분이 .gnb로 시작되는 부분입니다.
우야노 닷컴 기준으로 되어 있으니 편하신데로 수정하시면 되겠습니다.




3) 이제 마지막 단계입니다. xe_official.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이라는 숫자가 여러번 나오는데 이 700이라는 숫자의 의미는 따라다닐 2차서브메뉴의 끝값입니다.
우야노닷컴을 예로 들면 전체 크기는 980px이지만..
검색창 부분이 250px정도 되기 때문에 검색창까지 2차메뉴가 이동하지 못하도록 크기값을 700으로 준겁니다.
예를 들어 검색창이 없으신분은 950정도로 값을 주시면 될듯합니다.
바꾸실때는 700이라는 숫자부분은 모두 바꾸셔야 합니다.

저처럼 이런 메뉴를 원하시는 분이면 그대로 쓰셔도 무방할테고..
능력이 되시면 자신의 홈페이지에 맞게 수정해서 사용하시면 되겠습니다.

특히나 이 팁이 고수님들에 의해서 조금 더 수정보완되기를 희망하며 올려놓습니다.
(질문 내용보다는 수정,보완된 팁들이 댓글을 장식했으면 좋겠습니다.!!)

제목 글쓴이 날짜
글을 읽을때 마다 조회수가 증가 하는 팁 (1.0.0↑) [5] SKYMARU 2008.04.12
블로그 카테고리 클릭시 카테고리별 리스트 형태 바꾸는 팁 [1] 조성우371 2008.04.13
회원 가입 임시 제한 일자 버그 수정 방법 [2] file 껄껄껄 2008.04.13
FF에서 플래시 로딩 못하는 현상 해결방법 [3] hangoon 2008.04.13
오른쪽 마우스 사용금지 스크립트 [6] 하늘(skycheer) 2008.04.14
.htaccess를 이용하여 트래픽 유발시키는 IP 막기 [1] [1] 라르게덴 2008.04.15
엑소버드 음악 제로보드XE에 구겨넣기... [8] artlab 2008.04.17
ARTLAB님 팁을 참고하여 약간 변형 & 쫄쫄이 스토커 해상도에 상관없이 달기 [3] 탑심 2008.04.18
제로보드XE에 배경음악 달기 [4] Dr.Mabin 2008.04.26
제로보드에 BGM 달기 (대폭 수정;;) [5] Dr.Mabin 2008.04.27
각 페이지에 쓸 수 있는 변수명들 찾기 [6] lainfox 2008.04.29
링크가 걸린 글의 색을 무지개색으로 나타내기 재미니님 2008.04.29
홈페이지에 이미지블릿 대신 특수문자로 표현해 보기 file 팔공산 2008.04.29
상단에 PHP 오류구문이 출력될시 [6] sbshs77 2008.05.01
제한된 시간 안에 글을 또 등록할 때 IP 금지 기능(스팸필터) 해제하기 [3] 비나무 2008.05.03
메인메뉴에서 2차메뉴가 1차메뉴를 따라다니는 롤오버 메뉴로 만들기 [13] 우야노 2008.05.03
rewrite mod 사용시 404 페이지 에러 해결 방법 이종준 2008.05.09
아고라 서명운동 전용 웹카운터 [2] 살색마수 2008.05.10
일반 html이나 php파일에 모듈을 추가했을시 나타나는 문제점. (최근게시물 모듈. 링크 타겟 지정). [8] 장민수 2008.05.11
오른쪽 상단에 로그인 정보 출력하기 (게시판 만으로) file youngminpark 2008.05.15