웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
javascript
상단메뉴 레이어메뉴 위치 디테일하게 조정하기
2008.10.10 17:46
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
#top_menu {position:relative; width:882px; top:0px; margin-left:38px; z-index:99;}
#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; }
.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;}
.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;}
.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;}
.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;}
.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;}
.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;}
.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;}
.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;}
.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
<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-->
<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
// 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"; } }
// 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"; } }
// 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만 보임 }
// IS function chkIsKind(key, value) { showHide('selectOrder'); xGetElementById('search_target'+key).checked = true; xInnerHtml('search_target_label', value); }
// 롤오버 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) > 950 ) sub_2_left=(950 - 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) > 950 ) sub_2_left=(950 - 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) > 950 ) sub_2_left=(950 - sub_2.offsetWidth); sub_2.style.marginLeft = sub_2_left + 'px'+ '; }
제목 | 글쓴이 | 날짜 |
---|---|---|
서브 메뉴를 항상 펼쳐있도록... [2] | :맥노턴 | 2008.01.01 |
file 업로드 않될때, 메뉴생성및수정이 않될때 [2] | plruto | 2008.01.31 |
왼쪽메뉴줄이고 오른쪽에 박스만들어 내용쉽게넣기 [15] | plruto | 2008.02.07 |
메인메뉴에서 2차메뉴가 1차메뉴를 따라다니는 롤오버 메뉴로 만들기 [13] | 우야노 | 2008.05.03 |
2차메뉴 롤오버 위치 변환.. [3] | 봄처녀 | 2008.06.05 |
1차 메뉴에서 하위 메뉴 없을때 생기는 여백 없애는 방법 [7] | 제로시오 | 2008.07.04 |
메뉴에 이미지 버튼 사용하기 팁이요~ 이미지첨부! [3] | Zzini.net | 2008.07.05 |
1원팁) 톱메뉴를 제거하고 왼쪽 서브메뉴만 출력하는 방법 [2] | Gnee | 2008.08.02 |
문서 카테고리를 메뉴에 적용하기 위한 레이아웃 수정 팁과 개념토론 [7] | 제베 | 2008.08.31 |
메뉴 모듈 기능 조금 추가 [23] [1] | 반도체맨 | 2008.09.29 |
상단메뉴 레이어메뉴 위치 디테일하게 조정하기 [1] | HomeBox™ | 2008.10.10 |
[초간단]회원팝업메뉴에 메뉴넣기 [1] | Pw-NET | 2008.11.30 |
제로보드 DTREE 메뉴 적용하기 ( 카테고리 선택기 흉내 냈습니다.) [5] | 조성우371 | 2009.01.17 |
메뉴활성화에 따라 원하는 위치에 레이어 넣고 바꾸기.. 왼쪽 플래시 메뉴 메뉴따라서 바꾸기 [4] | 만쓰별(정만) | 2009.01.24 |
Smarty 한글 메뉴얼 공개합니다. [1] | 미니미 | 2009.03.04 |
페이지 및 게시판 메뉴 경로 [2] | 자반튀김 | 2009.04.15 |
관리자모드에서 메뉴 항상 펼치기 [1] | 아드레날린 | 2009.06.09 |
게시판 메뉴에 새글 알림 표시 띄우기 [13] | 보거스내친구 | 2009.06.21 |
회원 팝업메뉴에서 작성글 클릭시 다른 아이디 검색 안되게 하기 [3] | 절망린 | 2009.07.03 |
2차 메뉴가 없을 경우 왼쪽 메뉴 숨기기 [5] | 엔시아- | 2009.07.16 |