웹마스터 팁
메인메뉴에서 2차메뉴가 1차메뉴를 따라다니는 롤오버 메뉴로 만들기
2008.05.03 11:58
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이라는 숫자부분은 모두 바꾸셔야 합니다.
저처럼 이런 메뉴를 원하시는 분이면 그대로 쓰셔도 무방할테고..
능력이 되시면 자신의 홈페이지에 맞게 수정해서 사용하시면 되겠습니다.
특히나 이 팁이 고수님들에 의해서 조금 더 수정보완되기를 희망하며 올려놓습니다.
(질문 내용보다는 수정,보완된 팁들이 댓글을 장식했으면 좋겠습니다.!!)
- [2021/01/23] 묻고답하기 2차메뉴의 내용이 위젯넣는 메인좌측에 왜 나오는지요.
- [2018/03/17] 묻고답하기 CSS ㅡ divA 안에있는 하위 divB 의 크기를 divA 보다 넓게 보이게 하려면 *2
- [2017/02/02] 묻고답하기 2차 메뉴 열릴시 1차 메뉴 크기확장 안되게 하려면 어떻게 해야할까요? *1
- [2017/02/02] 묻고답하기 hover 했을시 다른 class 동작 하는 css *3
- [2016/12/21] 묻고답하기 고수님들 제발 도와주세요. 창크기에 따라서 위젯 위치가 자꾸 변합니다 *1
댓글 13
-
삶의흐름
2008.05.03 14:20
-
guny
2008.05.04 00:07
공식레이아웃을 수정하려는 분들은
layout.html에서 로그인위젯, 기존 2,3차 메뉴부분 소스를 삭제해야 윗분처럼 에러없이 사용할수 있습니다...
default.css 부분에서도 아래부분을 찾아서 수정해줘야 대충...윤곽이 잡힐겁니다....
#gnb { position:absolute; left: 25px; top:82px; overflow:hidden; 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:#fff; white-space:nowrap; text-align:center; font-size:1.12em; font-weight:bold; text-decoration:none; }
.gnb_sub { position:absolute; top:117px; left:30px; height:24px; overflow:hidden; white-space:nowrap; }
-
삶의 흐름
2008.05.04 02:55
에궁... 그럼 공식 로그인 위젯 못쓰나요??? 초보라 잘 이해가 안가네요 흠..... 이런넘이라서 .. 하위메뉴가 따라다녀야 좋은데 흠...
링크~
www.fkumccherryhill.org/zbxe
제작중인데.. 힘드네요 CSS랑 Div가 아직 익숙치 않아서.. -
포토올
2008.05.04 14:03
저도 롤오버 2차메뉴를 원했기에, 제로보드 zbXE 공식 레이아웃에 수차례
적용해보았지만, 초보라서 그런지, 레이아웃이 깨어지네요..수차례 시도해보아도...ㅠ.ㅠ.
guny님의 글보고 그대로 따라 해보아도, 깨어지고,,엉망입니다.ㅠ.ㅠ
어느 고수님깨서 좀 수고해시지요~??
1.zbXE 기본 레이아웃에서 layout.html의 48번째 줄에서 00줄까지를(매우 중요할 듯) 위 내용으로 바꿉니다.
===> 질문 <div id="columnRight">
<!-- 컨텐츠 시작 -->이 윗부분까지인가요??ㅠ.ㅠ.아니면..어디까지인지요?? 특히 마지막부분의 </div>처리도 헷갈립니다.ㅠ.ㅠ.
2. zbXE기본 레이아웃의 default.css에서...00째줄부터~~00째줄까지를(역시 중요^^) 위 내용으로 바꿉니다.
====> 이 CSS는 우야노 닷컴 기준인데, zbXE default.css기준으로는 어디서(몇째 줄) 어디(몇째 줄)까지인가요?ㅠ.ㅠ.
=====> 우야노님의 .gnb_sub li { float:left; list-style:none; background:url(../images/default/sub_part.gif..에서 sub_part.gif 이미지처리??ㅠ.ㅠ.
3. xe_official.js에서도 00째줄 } 이후 추가...단 마지막 중괄호(})는 그대로(or제거),,ㅠ.ㅠ.
4. 제로보드 공식 로그인 위젯은...00째 줄(원하시는 위치)에 삽입합니다.(왼편 로그인 기준)
이렇게 구체적으로 좀 말씀해주실 분 안계시나요??
왕초보라...CSS, dIV, }..이해도 매우 어렵습니다.ㅠ.ㅠ.
레이이웃에서는 마침표(.)하나, 괄호(})하나에도 있고 없고에 따라서..에러가 나기에....ㅠ.ㅠ.
원하지만.너무나 먼~~~거리에....ㅠ.ㅠ.
고수님들의 친절한 선처를 기다립니다.
즐거운 휴일 되시고, 기쁜 소식을 기다립니다^^
감사합니다. -
우야꼬
2008.05.04 20:41
공식 레이아웃에 적용하기에 힘들어 하는것 같아서 공식레이아웃에 적용시켜 봤습니다...
컬러셋은 default / white / black 적용 시켜놓았습니다.
기타 색상들이랑 세부적인 것은 본인의 홈에 맞게 직접 수정작업 하시는게 좋을것 같네요.
아참 그리고 위에 우야노님 소스로 직접 수정하실때 default.css 수정소스 마지막 부분에 "}"가 빠졌으니 유의 하시기 바랍니다. -
ㅎㅎ 죄송합니다. 이게 왜 빠진건지 ㅡ.ㅡ;;
고쳐놓았습니다. -
포토올
2008.05.09 16:59
아..우야꼬님~,,너무 감사합니다.
대단하십니다.
증말 감사드립니다.
한가지, 문제가 생기네요??몇가지를 수정하시면 더 좋을텐데요...저도 나름 노력중입니다.
1. 배경이미지 사용시 레이아웃에서 repeat-x 에서..-x를 지우면 다른 레이아웃은 배경만 이미지가 들어가는데 비해서, 이것은
본 문(?)-본체부분까지 배경이 뒤덮혀버립니다.ㅠ.ㅠ. 수정하시면...더 완벽.^^
2. 2차 메뉴가 나와서 좋지만, 2차 menu 글자 뒤에 배경이 없어서,(현재는 투명???)..좀 밋밋합니다.
3. 다른 위젯,로그인,모듈들 추가 설치해야하는 부담도 있으니까요,
기존 사용하던 zbXE 기본 레이아웃에 걍 덮어 쒸울 파일만(롤오버 적용된) 따로 올려주시면 더 좋을텐데요..
그게 불가능한가요??
아니면, 지금도 덮어쒸우기만 하면 되나요???(다시 설명글 읽어봅니다)
대단히 감사합니다.^^ -
삶의 흐름
2008.05.05 13:11
와우~~~ 작동합니다. 우야꼬님소스로~~~ 감사합니다 정말로~~~~~~~~~~~~~
초보인데. 교회 웹 만드느라.. 급해서 공부할 시간도 너무 없어서 힘들었는데요
정말 감사합니다~!!! 정말로요~~~ ^^ -
바람소
2008.05.14 06:27
왕초보입니다~ 잘못고쳐서 또 고생하는 것은 아닐까 걱정스런 마음으로 고쳐봤는데, 잘 되네요^^ 일단 하나씩 되어가는 것같아
기분이 좋습니다. 그리고 우야노님, 우야꼬님 모두 감사합니다^^ 몇달이 걸리더라도 한 번 멋진 홈 만들어 보려합니다!
아뭏튼 복받으실겁니다^^ 화이팅~ -
정말 멋진 팁 감사합니다. 우야노님 우야꼬님 두 분 모두 복 받으셔요.
-
lo마음ve
2008.10.09 15:24
우야꼬님이 올려주신자료 잘되네요 감사합니다
그런데 문제가있어요 2차메뉴가 1차메뉴바로아래 가로로 롤오브일때 잘나타나는데요
왼쪽로그인상자아래 원례2차메뉴자리에도 표시가나네요 ㅎㅎ;;
왼쪽로그인아래 원례2차메뉴없애는방법과 2차메뉴가없는 1차메뉴일때 로그인아래 하얀빈공간으로 표시되는부분
수정 방법이있을런지요--;;
조언 부탁드립니다^^* -
11월의비
2008.10.30 04:58
찾다 찾다 여기까지 왔습니다. 정말 고맙습니다. 잘 쓰고 있어요 ^^ -
박토치
2009.03.31 02:05
파이어폭스는 서브메뉴가 IE로 볼때랑 다르게 밑으로 더 내려와지는데 이건 어떻게 할 도리가 없나봐요?ㅠ.ㅠ
제목 | 글쓴이 | 날짜 |
---|---|---|
CSS 코드를 손쉽게 prefix/minify 변환해주는 사이트
![]() | sojumeister | 2014.12.18 |
팁이라고 할 수 없는 [이미지안투명박스]
[2]
![]() | 엔시™ | 2007.12.23 |
XE Lune_Board 의 코멘트 배경색상 수정하기
[5]
![]() | 세라오빠 | 2011.03.01 |
jQuery 강의 #1. css에 대해 이해해보자. [1] | 서기 | 2011.03.03 |
CSS 사용시 익스플로러 버그 해결하기. [3] | NineTail | 2007.08.28 |
스킨 디자인! 이미지 대신 CSS3를 사용해 보세요! [7] | 정찬명_ | 2010.07.08 |
padding, margin, font, border
[2]
![]() | 된장맛껌 | 2010.03.13 |
메인메뉴에서 2차메뉴가 1차메뉴를 따라다니는 롤오버 메뉴로 만들기 [13] | 우야노 | 2008.05.03 |
이 기능 정말 필요한데요 흠. 다른분들 잘 되시는지..
html을 수정하면 다음과 같은 에러가 나오면서 아무 화면도 안나옵니다.
Parse error: syntax error, unexpected $end in /homepages/37/d241118215/htdocs/fkumc/zbxe/classes/template/TemplateHandler.class.php(352) : eval()'d code on line 357