[5.3] 상단메뉴를 커뮤니티처럼 풀다운으로 변경 (2018-11-29 20:13 수정) 정보
[5.3] 상단메뉴를 커뮤니티처럼 풀다운으로 변경 (2018-11-29 20:13 수정)
관련링크
본문
영카트 쇼핑몰은 왼쪽메뉴에 쇼핑몰 메뉴가 보이도록 js와 css가 구성되어 있습니다.
이것을 커뮤니티의 상단메뉴 즉, 환경설정 > 메뉴관리에 적용된것이 보이도록 하고자 합니다.
적용예제 : http://test5.happyjung.com/g5/shop/
1. 변경이력
2018-11-28 10:37 최초배포
2018-11-29 14:08 v.2
jquery.shop.menu2.js 수정
submenu_hide 를 submenu_hide2 로 변경
2018-11-29 20:13 v.3
모바일일때의 메뉴가 보이도록 내용 추가
2. js / jquery.shop.menu2.js 파일을 생성해서 아래 내용을 저장합니다.
$(function(){
var hide_menu = false;
var mouse_event = false;
var oldX = oldY = 0;
$(document).mousemove(function(e) {
if(oldX == 0) {
oldX = e.pageX;
oldY = e.pageY;
}
if(oldX != e.pageX || oldY != e.pageY) {
mouse_event = true;
}
});
// 주메뉴
var $gnb_shop = $(".gnb_shop_1dli > a");
$gnb_shop.mouseover(function() {
if(mouse_event) {
$("#hd").addClass("hd_zindex");
$(".gnb_shop_1dli").removeClass("gnb_shop_1dli_over gnb_shop_1dli_over2 gnb_shop_1dli_on");
$(this).parent().addClass("gnb_shop_1dli_over gnb_shop_1dli_on");
menu_rearrange($(this).parent());
hide_menu = false;
}
});
$gnb_shop.mouseout(function() {
hide_menu = true;
});
$(".gnb_shop_2dli").mouseover(function() {
hide_menu = false;
});
$(".gnb_shop_2dli").mouseout(function() {
hide_menu = true;
});
$gnb_shop.focusin(function() {
$("#hd").addClass("hd_zindex");
$(".gnb_shop_1dli").removeClass("gnb_shop_1dli_over gnb_shop_1dli_over2 gnb_shop_1dli_on");
$(this).parent().addClass("gnb_shop_1dli_over gnb_shop_1dli_on");
menu_rearrange($(this).parent());
hide_menu = false;
});
$gnb_shop.focusout(function() {
hide_menu = true;
});
$(".gnb_shop_2da").focusin(function() {
$(".gnb_shop_1dli").removeClass("gnb_shop_1dli_over gnb_shop_1dli_over2 gnb_shop_1dli_on");
var $gnb_shop_li = $(this).closest(".gnb_shop_1dli").addClass("gnb_shop_1dli_over gnb_shop_1dli_on");
menu_rearrange($(this).closest(".gnb_shop_1dli"));
hide_menu = false;
});
$(".gnb_shop_2da").focusout(function() {
hide_menu = true;
});
$('#gnb_shop_1dul>li').bind('mouseleave',function(){
submenu_hide2();
});
$(document).bind('click focusin',function(){
if(hide_menu) {
submenu_hide2();
}
});
});
function submenu_hide2() {
$("#hd").removeClass("hd_zindex");
$(".gnb_shop_1dli").removeClass("gnb_shop_1dli_over gnb_shop_1dli_over2 gnb_shop_1dli_on");
}
function menu_rearrange(el)
{
var width = $("#gnb_shop_1dul").width();
var left = w1 = w2 = 0;
var idx = $(".gnb_shop_1dli").index(el);
var max_menu_count = 0;
var $gnb_shop_1dli;
for(i=0; i<=idx; i++) {
$gnb_shop_1dli = $(".gnb_shop_1dli:eq("+i+")");
w1 = $gnb_shop_1dli.outerWidth();
if($gnb_shop_1dli.find(".gnb_shop_2dul").size())
w2 = $gnb_shop_1dli.find(".gnb_shop_2dli > a").outerWidth(true);
else
w2 = w1;
if((left + w2) > width) {
if(max_menu_count == 0)
max_menu_count = i + 1;
}
if(max_menu_count > 0 && (idx + 1) % max_menu_count == 0) {
el.removeClass("gnb_shop_1dli_over").addClass("gnb_shop_1dli_over2");
left = 0;
} else {
left += w1;
}
}
}
3. theme / basic / css / default.shop.css 에 아래 내용을 추가합니다.
/*사이드 메뉴*/
위에 아래 내용을 추가합니다.
/* 메인메뉴 */
#gnb_shop{position:relative; background:#253dbe;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
box-shadow: 0 1px 3px rgba(0,0,0,0.3)}
#gnb_shop h2{position:absolute;font-size:0;line-height:0;overflow:hidden;}
#gnb_shop .gnb_shop_wrap{margin:0 auto;width:1200px;position:relative}
#gnb_shop #gnb_shop_1dul {font-size:1.083em;padding: 0;background:#253dbe;zoom:1;}
#gnb_shop ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_shop .gnb_shop_1dli{float:left;line-height:50px;padding:0 40px;position:relative;}
#gnb_shop .gnb_shop_1dli:hover{background:#1a30a7;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;}
.gnb_shop_1dli .bg{display:inline-block;width:10px;height:10px;overflow:hidden;background:url(../img/gnb_bg2.gif) no-repeat 50% 50%;text-indent:-999px}
.gnb_shop_1da {display:inline-block;font-weight:bold;color:#fff;text-decoration:none;}
.gnb_shop_2dli{border-top:1px solid #253dbe}
.gnb_shop_2dli:first-child{border:0}
.gnb_shop_2dul {display:none;position:absolute;top:50px;min-width:180px;background:#1a30a7;padding: 0;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
box-shadow: 0 1px 5px rgba(0,0,0,0.1);}
.gnb_shop_2da {display:block;padding:0 10px;line-height:40px;color:#c3e6f2;text-align:left;text-decoration:none}
a.gnb_shop_2da:hover{background:#0e2080;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
.gnb_shop_1dli_air .gnb_shop_2da {}
.gnb_shop_1dli_on .gnb_shop_2da {}
.gnb_shop_2da:focus, .gnb_shop_2da:hover {color:#fff}
.gnb_shop_1dli_over .gnb_shop_2dul {display:block;left:0}
.gnb_shop_1dli_over2 .gnb_shop_2dul {display:block;right:0;background:#fff}
.gnb_shop_wrap .gnb_shop_empty {padding:10px 0;width:100%;text-align:center;line-height:2em;color:#fff}
.gnb_shop_wrap .gnb_shop_empty a{color:#fff;text-decoration:underline}
.gnb_shop_wrap .gnb_shop_al_ul .gnb_shop_empty, .gnb_shop_wrap .gnb_shop_al_ul .gnb_shop_empty a{color:#555}
#gnb_shop .gnb_shop_menu_btn{background:#4158d1;color:#fff;width:50px;height:50px;border:0;vertical-align:top;font-size:18px}
#gnb_shop .gnb_shop_close_btn{background:#4158d1;color:#fff;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:-50px;left:0}
#gnb_shop .gnb_shop_mnal{padding:0}
#gnb_shop_all{display:none;position:absolute;width:100%;z-index:99;}
#gnb_shop_all .gnb_shop_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_shop_all .gnb_shop_al_ul{background:#fff;border:1px solid #4158d1;padding:20px;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
#gnb_shop_all .gnb_shop_al_li{background:#fff;float:left;min-width:20%;padding:5px }
#gnb_shop_all .gnb_shop_al_li .gnb_shop_al_a{font-size:1.083em;padding:10px;display:block;position:relative;margin-bottom:10px;background: #eff6f9;border-bottom: 1px solid #d9e8ed;font-weight: bold;color:#003e61}
#gnb_shop_all .gnb_shop_al_li li {padding-left:10px;line-height:2em}
#gnb_shop_all .gnb_shop_al_li li i{color:#9ca6cc}
#gnb_shop_all .gnb_shop_al_li li a{color:#555}
4. theme / basic / head.sub.php 에서
<script src="<?php echo G5_JS_URL ?>/jquery.shop.menu.js?ver=<?php echo G5_JS_VER; ?>"></script>
를 아래와 같이 변경합니다.
<script src="<?php echo G5_JS_URL ?>/jquery.shop.menu.js?ver=<?php echo G5_JS_VER; ?>"></script>
<script src="<?php echo G5_JS_URL ?>/jquery.shop.menu2.js?ver=<?php echo G5_JS_VER; ?>"></script>
5. theme / basic / shop / shop.head.php 의 상단 메뉴위치의 내용을 변경합니다.
<div id="hd_menu">
<ul>
<li><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=1">히트상품</a></li>
<li><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=2">추천상품</a></li>
<li><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=3">최신상품</a></li>
<li><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=4">인기상품</a></li>
<li><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=5">할인상품</a></li>
<li class="hd_menu_right"><a href="<?php echo G5_BBS_URL; ?>/faq.php">FAQ</a></li>
<li class="hd_menu_right"><a href="<?php echo G5_BBS_URL; ?>/qalist.php">1:1문의</a></li>
<li class="hd_menu_right"><a href="<?php echo G5_SHOP_URL; ?>/personalpay.php">개인결제</a></li>
<li class="hd_menu_right"><a href="<?php echo G5_SHOP_URL; ?>/itemuselist.php">사용후기</a></li>
<li class="hd_menu_right"><a href="<?php echo G5_SHOP_URL; ?>/couponzone.php">쿠폰존</a></li>
</ul>
</div>
의 내용을 아래의 것으로 변경합니다.
<nav id="gnb_shop">
<h2>메인메뉴</h2>
<div class="gnb_shop_wrap">
<ul id="gnb_shop_1dul">
<li class="gnb_shop_1dli gnb_shop_mnal"><button type="button" class="gnb_shop_menu_btn"><i class="fa fa-bars" aria-hidden="true"></i><span class="sound_only">전체메뉴열기</span></button></li>
<?php
$sql = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '2'
order by me_order, me_id ";
$result = sql_query($sql, false);
$gnb_shop_zindex = 999; // gnb_shop_1dli z-index 값 설정용
$menu_datas = array();
for ($i=0; $row=sql_fetch_array($result); $i++) {
$menu_datas[$i] = $row;
$sql2 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '{$row['me_code']}'
order by me_order, me_id ";
$result2 = sql_query($sql2);
for ($k=0; $row2=sql_fetch_array($result2); $k++) {
$menu_datas[$i]['sub'][$k] = $row2;
}
}
$i = 0;
foreach( $menu_datas as $row ){
if( empty($row) ) continue;
?>
<li class="gnb_shop_1dli" style="z-index:<?php echo $gnb_shop_zindex--; ?>">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_shop_1da"><?php echo $row['me_name'] ?></a>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
if($k == 0)
echo '<span class="bg">하위분류</span><ul class="gnb_shop_2dul">'.PHP_EOL;
?>
<li class="gnb_shop_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_shop_2da"><?php echo $row2['me_name'] ?></a></li>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
$i++;
} //end foreach $row
if ($i == 0) { ?>
<li class="gnb_shop_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
<div id="gnb_shop_all">
<h2>전체메뉴</h2>
<ul class="gnb_shop_al_ul">
<?php
$i = 0;
foreach( $menu_datas as $row ){
?>
<li class="gnb_shop_al_li">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_shop_al_a"><?php echo $row['me_name'] ?></a>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if($k == 0)
echo '<ul>'.PHP_EOL;
?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><i class="fa fa-caret-right" aria-hidden="true"></i> <?php echo $row2['me_name'] ?></a></li>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
$i++;
} //end foreach $row
if ($i == 0) { ?>
<li class="gnb_shop_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
<button type="button" class="gnb_shop_close_btn"><i class="fa fa-times" aria-hidden="true"></i></button>
</div>
</div>
</nav>
<script>
$(function(){
$(".gnb_shop_menu_btn").click(function(){
$("#gnb_shop_all").show();
});
$(".gnb_shop_close_btn").click(function(){
$("#gnb_shop_all").hide();
});
});
</script>
6. theme / basic / mobile / shop / category.php 내용에서 54 ~ 147줄
<li id="cate_01" class="con">
<?php
$mshop_ca_href = G5_SHOP_URL.'/list.php?ca_id=';
$mshop_ca_res1 = sql_query(get_mshop_category('', 2));
for($i=0; $mshop_ca_row1=sql_fetch_array($mshop_ca_res1); $i++) {
if($i == 0)
echo '<ul class="cate">'.PHP_EOL;
?>
<li>
<a href="<?php echo $mshop_ca_href.$mshop_ca_row1['ca_id']; ?>"><?php echo get_text($mshop_ca_row1['ca_name']); ?></a>
<?php
$mshop_ca_res2 = sql_query(get_mshop_category($mshop_ca_row1['ca_id'], 4));
if(sql_num_rows($mshop_ca_res2))
echo '<button class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row1['ca_name']).' 하위분류 열기</button>'.PHP_EOL;
for($j=0; $mshop_ca_row2=sql_fetch_array($mshop_ca_res2); $j++) {
if($j == 0)
echo '<ul class="sub_cate sub_cate1">'.PHP_EOL;
?>
<li>
<a href="<?php echo $mshop_ca_href.$mshop_ca_row2['ca_id']; ?>"><?php echo get_text($mshop_ca_row2['ca_name']); ?></a>
<?php
$mshop_ca_res3 = sql_query(get_mshop_category($mshop_ca_row2['ca_id'], 6));
if(sql_num_rows($mshop_ca_res3))
echo '<button type="button" class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row2['ca_name']).' 하위분류 열기</button>'.PHP_EOL;
for($k=0; $mshop_ca_row3=sql_fetch_array($mshop_ca_res3); $k++) {
if($k == 0)
echo '<ul class="sub_cate sub_cate2">'.PHP_EOL;
?>
<li>
<a href="<?php echo $mshop_ca_href.$mshop_ca_row3['ca_id']; ?>"><?php echo get_text($mshop_ca_row3['ca_name']); ?></a>
<?php
$mshop_ca_res4 = sql_query(get_mshop_category($mshop_ca_row3['ca_id'], 8));
if(sql_num_rows($mshop_ca_res4))
echo '<button type="button" class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row3['ca_name']).' 하위분류 열기</button>'.PHP_EOL;
for($m=0; $mshop_ca_row4=sql_fetch_array($mshop_ca_res4); $m++) {
if($m == 0)
echo '<ul class="sub_cate sub_cate3">'.PHP_EOL;
?>
<li>
<a href="<?php echo $mshop_ca_href.$mshop_ca_row4['ca_id']; ?>"><?php echo get_text($mshop_ca_row4['ca_name']); ?></a>
<?php
$mshop_ca_res5 = sql_query(get_mshop_category($mshop_ca_row4['ca_id'], 10));
if(sql_num_rows($mshop_ca_res5))
echo '<button type="button" class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row4['ca_name']).' 하위분류 열기</button>'.PHP_EOL;
for($n=0; $mshop_ca_row5=sql_fetch_array($mshop_ca_res5); $n++) {
if($n == 0)
echo '<ul class="sub_cate sub_cate4">'.PHP_EOL;
?>
<li>
<a href="<?php echo $mshop_ca_href.$mshop_ca_row5['ca_id']; ?>"><?php echo get_text($mshop_ca_row5['ca_name']); ?></a>
</li>
<?php
}
if($n > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
if($m > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
if($j > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
if($i > 0)
echo '</ul>'.PHP_EOL;
else
echo '<p>등록된 분류가 없습니다.</p>'.PHP_EOL;
?>
</li>
내용을 아래와 같이 변경합니다.
<li id="cate_01" class="con">
<?php
$sql = " select *
from {$g5['menu_table']}
where me_mobile_use = '1'
and length(me_code) = '2'
order by me_order, me_id ";
$result = sql_query($sql, false);
for($i=0; $row=sql_fetch_array($result); $i++) {
if($i == 0)
echo '<ul class="cate">'.PHP_EOL;
?>
<li>
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"><?php echo $row['me_name'] ?></a>
<?php
$sql2 = " select *
from {$g5['menu_table']}
where me_mobile_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '{$row['me_code']}'
order by me_order, me_id ";
$result2 = sql_query($sql2);
for ($k=0; $row2=sql_fetch_array($result2); $k++) {
if($k == 0)
echo '<button type="button" class="sub_ct_toggle ct_op">하위분류</button><ul class="sub_cate sub_cate1">'.PHP_EOL;
?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><span></span><?php echo $row2['me_name'] ?></a></li>
<?php
}
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
if($i > 0)
echo '</ul>'.PHP_EOL;
else
echo '<p>등록된 메뉴가 없습니다.</p>'.PHP_EOL;
?>
</li>
8
댓글 7개
배너의 css를 잘 살펴보세요.