웹마스터 팁

  2. Support
  3. 웹마스터 팁

상단메뉴 레이어메뉴 위치 디테일하게 조정하기

2008.10.10 17:46

HomeBox™

http://www.zeroboard.com/?mid=zbxe_user_tip&search_target=content&search_keyword=%2F%2F+%EB%A1%A4%EC%98%A4%EB%B2%84+2%EC%B0%A8%EB%A9%94%EB%89%B4+%EB%A7%8C%EB%93%A4%EA%B8%B0&document_srl=16790587
기존에 우야노님의 팁을 보안한것입니다.

상단 메뉴에 따라 다니는 레이어 메뉴가 기존에는
그 위치가 왼쪽에만 있었고 그외에 팁에서도 그 위치를 조정해 주는 팁이 있었지만
디테일하게 조정할수가 없었습니다. 그래서 제로보드로는 사이트 제작을 잘하지 않고 있었는데 이번 클라이언트께서 제로보드XE로 사이트를 기존에 운영중인데 디자인을 사이트 전체적으로 바꾸고 싶다고 의뢰가 들어와서 처음으로 ㅋ XE를 접하게 되었네요.
제로보드4때는 정감있고 사용자들이 많아 저도 많이 쓰곤 했는데 ^^

아래소스는 이번에 프로젝트를 진행하며 만들어본 상단 레이어 위치 조정 응용법입니다.
미력하나마 많은 XE사용자분들께 도움이 되셨으면 합니다.

CSS는 레이아웃 스타일시트에 기존GNB부분에 덮어씌워 주시면 되고요.
HTML부분은 레이아웃에 기존GNB부분에 덮어씌우시면 됩니다.

적용예 : http://www.babodream.co.kr/   


CSS

?
1
#top_menu {position:relative; width:882px; top:0px; margin-left:38px; z-index:99;}
?
1
2
#gnb {position:absolute; top:63px; left:0px; height:40px; overflow:hidden; white-space:nowrap; margin-bottom:0px;}
#gnb li {float:left; list-style:none; position:relative; white-space:nowrap; }
?
1
2
3
4
5
6
.gnb_sub0 {position:absolute; top:103px; left:-20px; height:24px; overflow:hidden; white-space:nowrap;}
.gnb_sub0 li {float:left; list-style:none; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
.gnb_sub0 li a {display:block; float:left; padding:6px 3px 0 3px; height:24px; white-space:nowrap; text-decoration:none; font:11px 돋움; color:#565759; letter-spacing:-0.1em;}
.gnb_sub0 li a:hover,
.gnb_sub0 li a:focus {color:#F72E00;}
.gnb_sub0 li.on a, .gnbin li.on a:hover {color:#F72E00;}
?
1
2
3
4
5
6
.gnb_sub1 {position:absolute; top:103px; left:-20px; height:24px; overflow:hidden; white-space:nowrap;}
.gnb_sub1 li {float:left; list-style:none; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
.gnb_sub1 li a {display:block; float:left; padding:6px 3px 0 3px; height:24px; white-space:nowrap; text-decoration:none; font:11px 돋움; color:#565759; letter-spacing:-0.1em;}
.gnb_sub1 li a:hover,
.gnb_sub1 li a:focus {color:#F72E00;}
.gnb_sub1 li.on a, .gnbin li.on a:hover {color:#F72E00;}
?
1
2
3
4
5
6
.gnb_sub2 {position:absolute; top:103px; left:-40px; height:24px; overflow:hidden; white-space:nowrap;}
.gnb_sub2 li {float:left; list-style:none; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
.gnb_sub2 li a {display:block; float:left; padding:6px 3px 0 3px; height:24px; white-space:nowrap; text-decoration:none; font:11px 돋움; color:#565759; letter-spacing:-0.1em;}
.gnb_sub2 li a:hover,
.gnb_sub2 li a:focus {color:#F72E00;}
.gnb_sub2 li.on a, .gnbin li.on a:hover {color:#F72E00;}
?
1
2
3
4
5
6
.gnb_sub3 {position:absolute; top:103px; left:-15px; height:24px; overflow:hidden; white-space:nowrap;}
.gnb_sub3 li {float:left; list-style:none; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
.gnb_sub3 li a {display:block; float:left; padding:6px 3px 0 3px; height:24px; white-space:nowrap; text-decoration:none; font:11px 돋움; color:#565759; letter-spacing:-0.1em;}
.gnb_sub3 li a:hover,
.gnb_sub3 li a:focus {color:#F72E00;}
.gnb_sub3 li.on a, .gnbin li.on a:hover {color:#F72E00;}
?
1
2
3
4
5
6
.gnb_sub4 {position:absolute; top:103px; left:-20px; height:24px; overflow:hidden; white-space:nowrap;}
.gnb_sub4 li {float:left; list-style:none; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
.gnb_sub4 li a {display:block; float:left; padding:6px 3px 0 3px; height:24px; white-space:nowrap; text-decoration:none; font:11px 돋움; color:#565759; letter-spacing:-0.1em;}
.gnb_sub4 li a:hover,
.gnb_sub4 li a:focus {color:#F72E00;}
.gnb_sub4 li.on a, .gnbin li.on a:hover {color:#F72E00;}
?
1
2
3
4
5
6
.gnb_sub5 {position:absolute; top:103px; left:-14px; height:24px; overflow:hidden; white-space:nowrap;}
.gnb_sub5 li {float:left; list-style:none; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
.gnb_sub5 li a {display:block; float:left; padding:6px 3px 0 3px; height:24px; white-space:nowrap; text-decoration:none; font:11px 돋움; color:#565759; letter-spacing:-0.1em;}
.gnb_sub5 li a:hover,
.gnb_sub5 li a:focus {color:#F72E00;}
.gnb_sub5 li.on a, .gnbin li.on a:hover {color:#F72E00;}
?
1
2
3
4
5
6
.gnb_sub6 {position:absolute; top:103px; right:-20px; height:24px; overflow:hidden; white-space:nowrap;}
.gnb_sub6 li {float:left; list-style:none; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
.gnb_sub6 li a {display:block; float:left; padding:6px 3px 0 3px; height:24px; white-space:nowrap; text-decoration:none; font:11px 돋움; color:#565759; letter-spacing:-0.1em;}
.gnb_sub6 li a:hover,
.gnb_sub6 li a:focus {color:#F72E00;}
.gnb_sub6 li.on a, .gnbin li.on a:hover {color:#F72E00;}
?
1
2
3
4
5
6
.gnb_sub7 {position:absolute; top:103px; left:60px; height:24px; overflow:hidden; white-space:nowrap;}
.gnb_sub7 li {float:left; list-style:none; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
.gnb_sub7 li a {display:block; float:left; padding:6px 3px 0 3px; height:24px; white-space:nowrap; text-decoration:none; font:11px 돋움; color:#565759; letter-spacing:-0.1em;}
.gnb_sub7 li a:hover,
.gnb_sub7 li a:focus {color:#F72E00;}
.gnb_sub7 li.on a, .gnbin li.on a:hover {color:#F72E00;}
?
1
2
3
4
5
6
.gnb_sub8 {position:absolute; top:103px; left:-68px; height:24px; overflow:hidden; white-space:nowrap;}
.gnb_sub8 li {float:left; list-style:none; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
.gnb_sub8 li a {display:block; float:left; padding:6px 3px 0 3px; height:24px; white-space:nowrap; text-decoration:none; font:11px 돋움; color:#565759; letter-spacing:-0.1em;}
.gnb_sub8 li a:hover,
.gnb_sub8 li a:focus {color:#F72E00;}
.gnb_sub8 li.on a, .gnbin li.on a:hover {color:#F72E00;}




HTML

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="top_menu">
 <!--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']}" <!--@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-->
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    <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{$gnb_count}" 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']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->><img src="/zbxe/layouts/homebox/images/default/arrow.gif">{$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{$gnb_count}" style="display:none;">
     <!--@if(!$mval['list'])--><li></li><!--@end-->
      <!--@foreach($mval['list'] as $key => $val)--><!--@if($val['text'])-->
       <li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->><img src="/zbxe/layouts/homebox/images/default/arrow.gif">{$val['text']}</a></li>
      <!--@end--><!--@end-->
      </ol>
     <!--@end-->
     {@$gnb_count++;}
     <!--@end-->
    <!--@end-->
   </div>

javascript

?
1
2
3
4
5
6
7
8
9
10
11
// Hide And Show Toggle
var cc=0
function hideShow(id) {
    if (cc==0) {
        cc=1
        document.getElementById(id).style.display="none";
    } else {
        cc=0
        document.getElementById(id).style.display="block";
    }
}
?
1
2
3
4
5
6
7
8
9
10
11
// Show And Hide Toggle
var cc=0
function showHide(id) {
    if (cc==0) {
        cc=1
        document.getElementById(id).style.display="block";
    } else {
        cc=0
        document.getElementById(id).style.display="none";
    }
}
?
1
2
3
4
5
// Local Navigation Toggle
function lnbToggle(id) {
 for(num=1; num<=3; num++) document.getElementById('D3MG'+num).style.display='none'; //D4MG1~D4MG3 까지 숨긴 다음
 document.getElementById(id).style.display='block'; //해당 ID만 보임
}
?
1
2
3
4
5
6
// IS
function chkIsKind(key, value) {
    showHide('selectOrder');
    xGetElementById('search_target'+key).checked = true;
    xInnerHtml('search_target_label', value);
}
?
1
2
3
// 롤오버 2차메뉴 만들기
// Brower
var browserType='';
?
1
2
3
4
5
6
7
if(navigator.userAgent.indexOf("MSIE") >-1) {
   browserType = 'IE';
} else if(navigator.userAgent.indexOf("Firefox") >-1) {
   browserType = 'FF';
} else {
   browserType = 'OTHER';
}
?
1
2
3
4
5
6
7
function gnbinToggle(id, gnbblock) {
 if(browserType == 'FF') {
  gnbinToggleFF(id, gnbblock);
 } else {
  gnbinToggleIE(id, gnbblock);
 }
}
?
1
2
// Local Navigation Toggle
function gnbinToggleIE(id, gnbblock) {
?
1
2
3
4
5
for(num=0; num<gnb_count; num++) {
 document.getElementById('gnb'+num).style.display='+
'none';              // 2차 메뉴
 document.getElementById('gnbli'+num).setAttribute('className', 'off');  // 1차 메뉴
}
?
1
2
3
4
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";
?
1
var sub_2_left =sub_1.offsetWidth * (id+0.5) - sub_2.offsetWidth /2;
?
1
2
3
4
5
6
7
// 2차메뉴 크기에 따른 위치 조절
 if (sub_2_left < 0)
  sub_2_left = 0;
 else if( (sub_2_left + sub_2.offsetWidth) > 950 )
  sub_2_left=(950 - sub_2.offsetWidth);
  sub_2.style.marginLeft = sub_2_left + 'px';    
}
?
1
2
// Local Navigation Toggle
function gnbinToggleFF(id, gnbblock) {
?
1
2
3
4
for(var num=0; num<gnb_count; num++) {
 document.getElementById('gnb'+num).style.display='none'; // 2차 메뉴
 document.getElementById('gnbli'+num).className = null;  // 1차 메뉴
}
?
1
2
3
4
5
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";
?
1
var sub_2_left =sub_1.offsetWidth * (id+0.5) - sub_2.offsetWidth /2;
?
1
2
3
4
5
6
7
8
// 2차메뉴 크기에 따른 위치 조절
 if (sub_2_left < 0)
  sub_2_left = 0;
 else if( (sub_2_left + sub_2.offsetWidth) > 950 )
  sub_2_left=(950 - sub_2.offsetWidth);
  sub_2.style.marginLeft = sub_2_left + '+
 'px';    
}
?
1
2
3
4
5
6
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;
?
1
2
3
4
5
6
7
8
// 넓이가 0미만일경우 0
 if (sub_2_left < 0)
  sub_2_left = 0;
 else if( (sub_2_left + sub_2.offsetWidth) > 950 )
  sub_2_left=(950 - sub_2.offsetWidth);
  sub_2.style.marginLeft = sub_2_left + 'px'+
 ';    
}

이 게시물을
http://homebox-tm.com 
http://dblike.com 
http://blog.naver.com/wds0119 
http://design.homebox-tm.com 
좋아요
목록
제목 글쓴이 날짜
● 탈퇴버튼 없애기 - - ; [4] Eris 2008.09.23
제로보드XE 중복설치방법 있나요? [4] bsy.myid.net 2008.09.24
XAMPP 프로그램사용시 Error500 이 뜰경우 해결방법 [2] 지레프 2008.09.26
VPN 환경에서 제로보드 [4] superion 2008.09.26
메뉴 모듈 기능 조금 추가 [23] [1] file 반도체맨 2008.09.29
감점되는 게시판에서 점수 부족한데 글 써지는 문제점 수정 [1] 반도체맨 2008.10.07
제로보드XE에 온클럽(onclub) 달기 (UTF-8 문제) 맛있는고기 2008.10.07
웹사이트 업로드 문제 - OI 에러 드디어 고치다. [3] paulkim 2008.10.07
캘린더 위젯 여러개 사용하기 [3] file 김초호 2008.10.07
SPAM IP를 찾아 막기 [2] phantomi 2008.10.10
상단메뉴 레이어메뉴 위치 디테일하게 조정하기 [1] file HomeBox™ 2008.10.10
제로보드XE가입 -> 트랙자동가입 기능 개돌 2008.10.14
진행 표시줄에 떠다니는 글 넣기 [2] 부안프로그래밍 2008.10.14
꼬리표(태그) 목록 출력 위젯을 전체게시판에 대응하도록 수정하기 [1] 뽀연짱 2008.10.15
자체 서버에서 제로보드 인스톨하실때 계속 초기화면 가시는 분을 위한 팁!!! file ♡바다.. 2008.10.16
cafe24사용자중 페이지에서 위젯편집시 자바스크립트 에러나시는 분들 [8] 팔공산 2008.10.17
단일 Windows PC에 다중 버전 IE 설치하기 [5] NetEagle 2008.10.22
첨부파일 문제땜에 고생하는 분들께 [8] 좀비이 2008.10.23
카페24 계정 사용 중에 제로보드XE 로그인 오류가 날 때 [1] vltm 2008.10.24
1.0.6 업데이트 후 링크 이미지 썸네일 문제 임시해결방법 [4] 라조 2008.10.27
태그 쓰기