| 원작자 | 80san |
|---|---|
| 적용여부 | 적용 |
mjworks님이 배포하신 mjworks. standard V1 레이아웃 스킨이 마음에 들어서 내가 약간의 변형을 해서 사용중입니다.
여기서 상단메뉴밑에 서브메뉴를 다는 방법을 설명드리겠습니다.
일단 기본의 예쁜 상단메뉴는 포기하셔야 합니다. 그대로 두고 해 볼려니 실력이 미천하여 포기...
먼저 우야노님의 팁을 적용을 해야합니다.
1. layout.html을 열어서 - 중간생략 - 부분을 삭제하세요
- 중간생략 -
<!-- /상단메뉴 -->
삭제한 중간생략부분에 아래의 소스를 붙여넣어세요.
<!--1차메뉴-->
<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>
<!--//1차메뉴-->
<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-->
<!-- /상단메뉴 -->
2. common.css를 열어서 적당한 곳에 아래의 소스를 추가합니다.
#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:#ffffff; white-space:nowrap; text-align:center; font-size:1.2em; font-weight:bold; text-decoration:none; }
#gnb li a:hover,
#gnb li a:focus { color:#66CC00; background:url(../images/default/bgGnbOn.gif) no-repeat center top; }
#gnb li.on a { font-weight:bold; color:#f60; background:url(../images/default/bgGnbOn.gif) no-repeat center top;}
.gnb_sub { position:absolute; left:10px; top:125px; height:24px; overflow:hidden; white-space:nowrap; }
.gnb_sub li { float:left; list-style:none; background:url(../images/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/arrow_3.gif) no-repeat center bottom; }
몇개의 이미지파일들이 보입니다. 우야노님의 스킨에서 찾아서 넣어주시면 됩니다. 그런데 저는 이미지 없이 해도 괜찮더군요.
sub_part.gif 와 arrow_3.gif 파일은 아래에서 다운로드 받으세요.
빨간색부분이 1차 메뉴의 위치이고 파란색부분이 2차 메뉴의 위치입니다.
3. common.js를 열어서 아래의 소스를 추가합니다.
// 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';
}
이렇게 하면 완성입니다.
[그외 팁들입니다]
<a href="{$layout_info->home_url}"> <!--@if(!$layout_info->logo_img)--><img src="./images/logo.png" alt="logo" class="iePngFix"/><!--@else--><img src="{$layout_info->logo_img}" alt="logo" class="iePngFix"/><!--@end--></a>
</h1>
이렇게 해 주어야 로그에 링크가 됩니다.
Bookmark도 지금의 코드로는 파폭에서는 작동되지를 않습니다.
common.js안의 내용을 아래와 같이 바꾸어 주고
[수정전]
function addfavorites(favoriteurl, favoritetitle){
if (document.all)
window.external.AddFavorite(favoriteurl,favoritetitle)
}
[수정후]
//즐겨찾기추가
function bookmarksite(title,url){
if (window.sidebar) // firefox
window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else if(document.all)// ie
window.external.AddFavorite(url, title);
}
layout.html 83줄을 아래와 같이 편집하면 파폭에서도 잘 작동합니다.
[수정전]
<li><a href="javascript:addfavorites('{$layout_info->home_url}','{$layout_info->home_title}')">Bookmark</a></li>
[수정후]
<li><a href="javascript:bookmarksite('{$layout_info->home_title}','{$layout_info->home_url}')">Bookmark</a></li>
내친김에~~
layout.html 로그정보안에 레이아웃에디터(Edit)와 레이아웃관리(Modify)도 함께 넣어 보았습니다.(덜 귀찮게..)
<!-- 로그정보 -->
<ul id="Log">
<!--@if(!$is_logged)-->
<li><a href="{getUrl('act','dispMemberLoginForm')}">Login</a></li>
<li><a href="{getUrl('mid',$layout_info->target_mid,'act','dispMemberSignUpForm')}">Join</a></li>
<!--@else-->
<li><a href="{getUrl('act','dispMemberLogout')}">Logout</a></li>
<!--@end-->
<!--@if($logged_info->is_admin == 'Y')-->
<li><a href="{getUrl('','module','admin')}" onclick="window.open(this.href); return false;">Manage</a></li>
<li><a href="{getUrl('act','dispLayoutAdminEdit','layout_srl',$layout_info->layout_srl)}">Edit</a></li>
<li><a href="{getUrl('act','dispLayoutAdminModify','layout_srl',$layout_info->layout_srl)}">Modify</a></li>
<li><a href="{getUrl('act','dispBoardAdminBoardInfo')}">Setup</a></li>
<!--@else-->
<li><a href="{geturl('act','dispMemberInfo')}">MyInfo</a></li>
<li><a href="javascript:bookmarksite('{$layout_info->home_title}','{$layout_info->home_url}')">Bookmark</a></li>
<li><a href="mailto:{$layout_info->mail}">Contact</a></li>
<!--@end-->
</ul>
<!-- /로그정보 -->
우와...롤오버 2차메뉴 정말 복잡하네요...흠...근데 디자인을 포기하는게 조금 아쉽기는 합니다...
소마세월님의 세로 롤오버 메뉴를 적용한다면 디자인도 유지될수 있지 않을까요?
다른건 위에 소스데로 수정했습니다...^^ 감사합니다...
이상하게...페이지에 오류가 난다고 나오면서...북마트 기능이 작동을 안하네요.???
다른 자바스크립트를 이용하는 위젯들과 충돌이 일어날수도 있는지요?
1차메뉴가 중앙으로 오지않고 좌측에 잇네요 올리싱 소스중에 덧부쳐야할 부분이 있는지요?
그리고 메뉴배경도 안되고요 팔공산님이 올리신 이미지 파일도 올리고
bgGnbOff.gif와 bgGnbOn.gif 도 images 폴더에 default 폴더 만들어서 넣엇습니다.그런데
몇날 며칠을 해도해도 안되네요 죄송스럽지만 한번 봐주시고 해결책좀
알려주시면 감사하겟습니다. 장마철에 건강하시길...
http://mocast.cafe24.com/zbxe/freeboard
네..고맙습니다 팔공산님.두가지 질문좀 들릴까합니다
1. 1차메뉴 폰트간격과 2차메뉴크기조절은 어디부분을 고치는지요?
2. 메뉴배경은 어느부분을 수정해야하는지요? 이미지를 만들어 넣어야겟죠?
초보라서 암만봐도 아리아리 합니다 나이먹고 눈도 안좋은데 엄청 고생중입니다
팔공산님이 한번 너그러이 알려주시길 간곡히 부탁드립니다.
날도 더운데 제가 염치없이 부탁드리는거 참 죄송스럽습니다만..
꼭좀 알려주시길 바랍니다.굽벅~
1. 1차메뉴 폰트간격이란? - 1차 메뉴의 메뉴와 메뉴의 간격을 이야기하시는 듯
normai.css를 열어서 빨간색 부분 조절하시면 됩니다. 참고로 (위, 좌, 밑, 우) 입니다.
2차메뉴크기조절이란 위와 같은 의미인지? - .gnb_sub li a 줄을 위와 같이 조절하시면 됩니다.
2. 메뉴변경은 전에도 말씀드렸듯이 직접 만드셔야 합니다. 혹시 제홈에 있는 이미지가 마음에 드시면 리플주세요.
님의 질문에 답변이 되었는지 모르겠네요.
쉬원한 마음가지시고 소스 띁어 먹다보면 더운여름도 잊어 버리게 되지 않을까요.....
바쁘신대도 불구하고.. 다시 감사 드립니다 그리고
사실 팔공산님 이미지 딱 마음에 듭니다. 고생하셔서 만든 이미지를
소스좀 부탁한다고 하기가 너무도 염치 없는지라 말씀 못드렷습니다.폰트도 마음에 들고요
소스좀 부탁드릴께요 팔공산님랑 똑같이 하고싶습니다^^ 메인은 말고요 그래도 될런지요.
공부 하면서 더 세련되게 할수있도록 노력도 해보겠습니다.고맙습니다.
내일이 중복인데 더운날씨에 건강식 좀 하셔요..
dog581@naver.com 저에 메일주소 입니다. 감사합니다
http://moonhouse.co.kr/zbxe/?document_srl=206761
더우신데 수고 많으십니다.. ^^
다름이 아니라.. 이상하게 저는 팔공산님 메뉴얼대로 하였는데.. 서브 메뉴가 뜨질 않네요 ㅠㅠ
별짓을 다 해봐도.. 에공
시간이 되시면 함 봐주시면 감사하겠습니다.. 홈피는 http://cospiter.hosting.paran.com/index.html 입니다..^^
처음 레이아웃 적용했을 당시엔 카운터가 없었는데..위젯적용을 해서 카운터 달았거든요..
후에 팔공산님 2차메뉴 적용하였는데 안되길레 별짓 다하다가 layout.html 파일을 초기파일로 새로 적용시켰는데..
서브메뉴에 카운터가 그대로 달려 있더라구요..(카운터위젯이 삽입이 안되어 있는대도)
도저히 제 실력으론 원인을 파악하지 못하겠네요.. 머 특별히 다른거 건들인건 없는데.. ㅜㅜ
전 이제까지 모든 파일은 ftp로 작업을 했었습니다..
팔공산님 말씀대로 레이아웃에디터 에서 편집을 하니 적용이 되네요.. 2차메뉴도 적용이 되네요..하하
감사합니다..



자료실
MH 슬라이딩 배너 0....
MH 위젯스타일
prettyphoto - 본문내...
SCM 플레이어 사용법
XE 1.4.4.2버전 이후에...
네비게이션 위젯
IE 버젼별로 css 따로...
문서보기 유저 지정
문하우스 게시판스킨 V...
내용글 출력시 주소창에...




