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-->
<!-- /상단메뉴 -->
<!--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 { position:absolute; left:10px; top:85px; 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:#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; }
#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를 열어서 아래의 소스를 추가합니다.
// 롤오버 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';
}
// 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';
}
이렇게 하면 완성입니다.
[그외 팁들입니다]
<h1 id="logo">
<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>
이렇게 해 주어야 로그에 링크가 됩니다.
<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>
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">
Tip이 도움이 되었다면 댓글과 평가 부탁합니다.
Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다. 
<!--@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>
<!-- /로그정보 -->