탑 메뉴 (Mobile) - 2014.09.24 수정

기존의 커뮤니티 모바일 '메뉴'를 이용했습니다.

아래의 게시글(탑 메뉴 (PC) - 2014.09.24 수정)과 연관됩니다.

css/mobile_shop.css
mobile/shop/shop.head.php
에 해당 소스를 삽입합니다.
사용자가 수정한 내용이 있을지도 모르니 덮어씌우지는 마십시오.
다른 파일들도 참고만 하세요.


css/mobile_shop.css
에 아래 소스 추가

[code]/* 메인메뉴 */
#snb_open {position:absolute;top:10px;right:60px;padding:0 10px;height:2.6em;border:0;background:#333;color:#fff;font-size:1em;letter-spacing:-0.1em}
#snb {display:none;background:#282828}
#snb a {display:block;color:#efefef}
.snb_1da {padding:10px;border-top:1px solid #191919;text-align:left}
.snb_2dul {background:#383838}
.snb_2da {padding:10px;border-top:1px solid #282828;text-align:left}
.snb_2da span:before {display:inline-block;margin:0 10px 0 0;color:#666;content:'▶'}
#snb_close {display:block;margin:0;padding:10px 0;width:100%;border:0;background:#000;color:#fff}

#snb_empty {padding:20px 0;color:#fff;text-align:center;line-height:2em}
#snb_empty a {display:inline;text-decoration:underline}[/code]


mobile/shop/shop.head.php
'분류' 아랫쪽에 아래 소스 추가

[code]<button type="button" id="snb_open" class="hd_opener">메뉴<span class="sound_only"> 열기</span></button>

<div id="snb" class="hd_div">
<ul id="snb_1dul">
<?php
// 1단계 분류 판매 가능한 것만
$hsql = " select ca_id, ca_name from {$g5['g5_shop_category_table']} where length(ca_id) = '2' and ca_use = '1' order by ca_id ";
$hresult = sql_query($hsql);
$snb_zindex = 999; // snb_1dli z-index 값 설정용
for ($i=0; $row=sql_fetch_array($hresult); $i++)
{
$snb_zindex -= 1; // html 구조에서 앞선 snb_1dli 에 더 높은 z-index 값 부여
// 2단계 분류 판매 가능한 것만
$sql2 = " select ca_id, ca_name from {$g5['g5_shop_category_table']} where LENGTH(ca_id) = '4' and SUBSTRING(ca_id,1,2) = '{$row['ca_id']}' and ca_use = '1' order by ca_id ";
$result2 = sql_query($sql2);
$count = mysql_num_rows($result2);
?>
<li class="snb_1dli" style="z-index:<?php echo $snb_zindex; ?>">
<a href="<?php echo G5_SHOP_URL.'/list.php?ca_id='.$row['ca_id']; ?>" class="snb_1da<?php if ($count) echo ' snb_1dam'; ?>"><?php echo $row['ca_name']; ?></a>
<?php
for ($j=0; $row2=sql_fetch_array($result2); $j++)
{
if ($j==0) echo '<ul class="snb_2dul" style="z-index:'.$snb_zindex.'">';
?>
<li class="snb_2dli"><a href="<?php echo G5_SHOP_URL; ?>/list.php?ca_id=<?php echo $row2['ca_id']; ?>" class="snb_2da snb_2da<?php echo $j%2; ?>"><span></span><?php echo $row2['ca_name']; ?></a></li>
<?php }
if ($j>0) echo '</ul>';
?>
</li>
<?php } ?>
<li class="snb_1dli" style="z-index:<?php echo $snb_zindex--; ?>">
<a href="<?php echo G5_SHOP_URL; ?>/cart.php" class="snb_1da">장바구니</a>
</li>
<li class="snb_1dli" style="z-index:<?php echo $snb_zindex--; ?>">
<a href="<?php echo G5_SHOP_URL; ?>/wishlist.php" class="snb_1da">위시리스트</a>
</li>
<li class="snb_1dli" style="z-index:<?php echo $snb_zindex--; ?>">
<a href="<?php echo G5_SHOP_URL; ?>/orderinquiry.php" class="snb_1da">배송조회</a>
</li>
</ul>
<button type="button" id="snb_close" class="hd_closer"><span class="sound_only">메뉴 </span>닫기</button>
</div>
<script>
$(function () {
$(".hd_opener").on("click", function() {
var $this = $(this);
var $hd_layer = $this.next(".hd_div");

if($hd_layer.is(":visible")) {
$hd_layer.hide();
$this.find("span").text("열기");
} else {
var $hd_layer2 = $(".hd_div:visible");
$hd_layer2.prev(".hd_opener").find("span").text("열기");
$hd_layer2.hide();

$hd_layer.show();
$this.find("span").text("닫기");
}
});

$(".hd_closer").on("click", function() {
var idx = $(".hd_closer").index($(this));
$(".hd_div:visible").hide();
$(".hd_opener:eq("+idx+")").find("span").text("열기");
});
});
</script>[/code]


메뉴를 수동으로 등록하려면...
'mobile/shop/shop.head.php'에 삽입해줍니다.

[code]<li class="snb_1dli" style="z-index:<?php echo $snb_zindex--; ?>">
<a href="<?php echo G5_MOBILE_URL; ?>/shop/s_mobile_main.php" class="snb_1da">php 1, 2차 메뉴</a>
<ul class="snb_2dul">
<li class="snb_2dli"><a href="<?php echo G5_MOBILE_URL; ?>/shop/s_mobile_sub1.php" class="snb_2da snb_2da0"><span></span>제주감귤</a></li>
<li class="snb_2dli"><a href="<?php echo G5_MOBILE_URL; ?>/shop/s_mobile_sub2.php" class="snb_2da snb_2da1"><span></span>추석특별판매</a></li>
</ul>
</li>[/code]예

이전 게시글과 다른 부분은... 'span' 태그가 들어있는 것입니다.
2차 메뉴 앞에 '▶'를 넣기 위함입니다.

php 페이지는 Mobile용을 따로 제작해야할 것 같네요.(경로도 수정)
내용의 가로 폭 차이가 있을 수 있으므로...


게시판을 메뉴에 달려면 아래와 같이 만들어 삽입해주면 됩니다.

[code]<li class="snb_1dli" style="z-index:<?php echo $snb_zindex--; ?>">
<a href="<?php echo G5_MOBILE_URL; ?>/shop/s_mobile_shop.php" class="snb_1da snb_1dam">고객지원</a>
<ul class="snb_2dul">
<li class="snb_2dli"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=s_notice" class="snb_2da snb_2da0"><span></span>공지사항</a></li>
<li class="snb_2dli"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=s_free" class="snb_2da snb_2da1"><span></span>자유게시판</a></li>
<li class="snb_2dli"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=qa" class="snb_2da snb_2da0"><span></span>질문답변</a></li>
</ul>
</li>[/code]


로고는 크기나 위치를 조금 조정해줘야 합니다.
css/mobile_shop.css

[code]#logo {padding:10px 0 10px 60px;text-align:left}[/code]해당 로고에 따라 적절히 수정하십시오.


모바일에서 게시판을 제대로 불러오기 위해서는 몇군데 더 수정을 해줘야 합니다.

루트의 head.php

[code]if (G5_IS_MOBILE) {
include_once(G5_MOBILE_PATH.'/head.php');
return;
}[/code]를

[code]if (G5_IS_MOBILE) {
if ($bo_table == "게시판 아이디") {
include_once(G5_MOBILE_PATH.'/shop/shop.head.php');
return;
} else {
include_once(G5_MOBILE_PATH.'/head.php');
return;
}
}[/code]로 수정합니다.

[code]if ($bo_table == "s_notice" or $bo_table == "s_free" or $bo_table == "qa") {[/code]또는

[code]if ($gr_id == "shop") {[/code]이런 식으로...


마찬가지로 루트의 tail.php 는...

[code]if (G5_IS_MOBILE) {
include_once(G5_MOBILE_PATH.'/tail.php');
return;
}[/code]를

[code]if (G5_IS_MOBILE) {
if ($bo_table == "게시판 아이디") {
include_once(G5_MOBILE_PATH.'/shop/shop.tail.php');
return;
} else {
include_once(G5_MOBILE_PATH.'/tail.php');
return;
}
}[/code]로 수정합니다.


마지막으로...

skin/latest/ 의

'shop_basic' 폴더를 복사해서...

mobile/skin/latest/ 에 넣어줍니다.


예시 : http://internationale.kr/shop