그누보드 - 탑 메뉴 (Mobile)

탑 메뉴 (Mobile) 정보

레이아웃 탑 메뉴 (Mobile)

본문

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

theme/테마/css/mobile_shop.css
에 아래 소스 추가

/* 메인메뉴 Add */
#snb_open {position:absolute;top:48px;right:40px;width:30px;height:30px;border:0;background:url(../mobile/shop/img/folder.png) no-repeat 50% 50%;color:#fff;font-size:1em;text-indent:-9999px;-webkit-appearance:none}
#snb {display:none;background:#555} /* background Modify */
#snb a {display:block;color:#f1f1f1}
.snb_1da {padding:10px;border-top:1px groove #f1f1f1;text-align:left} /* border Modify */
.snb_2dul {background:#6e6e6e} /* background Modify */
.snb_2da {padding:10px;border-top:1px groove #f1f1f1;text-align:left} /* border Modify */
.snb_2da span:before {display:inline-block;margin:0 10px 0 0;color:#f1f1f1;content:'▶'}
#snb_close {display:block;margin:0;padding:10px 0;width:100%;border:0;background:#fff;color:#f7346a;font-weight:bold} /* background Modify. font-weight Add */

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

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

<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">
        <li class="snb_1dli" style="z-index:<?php echo $snb_zindex--; ?>">
            <a href="<?php echo G5_SHOP_URL; ?>/s_info.php" class="snb_1da">이곳은...</a>
        </li>
	<li class="snb_1dli" style="z-index:<?php echo $snb_zindex--; ?>">
            <a href="<?php echo G5_SHOP_URL; ?>/s_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>
        <?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; ?>/s_main.php" class="snb_1da">php 1, 2차 메뉴</a>
            <ul class="snb_2dul">
                <li class="snb_2dli"><a href="<?php echo G5_SHOP_URL; ?>/s_sub1.php" class="snb_2da snb_2da0"><span></span>제주감귤</a></li>
                <li class="snb_2dli"><a href="<?php echo G5_SHOP_URL; ?>/s_sub2.php" class="snb_2da snb_2da1"><span></span>추석특별판매</a></li>
            </ul>
        </li>
	<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>

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

<li class="snb_1dli" style="z-index:<?php echo $snb_zindex--; ?>">
    <a href="<?php echo G5_SHOP_URL; ?>/s_main.php" class="snb_1da">php 1, 2차 메뉴</a>
    <ul class="snb_2dul">
        <li class="snb_2dli"><a href="<?php echo G5_SHOP_URL; ?>/s_sub1.php" class="snb_2da snb_2da0"><span></span>제주감귤</a></li>
        <li class="snb_2dli"><a href="<?php echo G5_SHOP_URL; ?>/s_sub2.php" class="snb_2da snb_2da1"><span></span>추석특별판매</a></li>
    </ul>
</li>

예

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

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

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

<li class="snb_1dli" style="z-index:<?php echo $snb_zindex--; ?>">
    <a href="<?php echo G5_SHOP_URL; ?>/s_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>

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

theme/테마명/head.php

if (G5_IS_MOBILE) {
    include_once(G5_THEME_MOBILE_PATH.'/head.php');
    return;
}

를

if (G5_IS_MOBILE) {
    if ($bo_table == "s_notice" or $bo_table == "s_free" or $bo_table == "qa") {
        include_once(G5_THEME_MOBILE_PATH.'/shop/shop.head.php');
    return;
    } else {
        include_once(G5_THEME_MOBILE_PATH.'/head.php');
    return;
    }
}

로 수정합니다.

if ($bo_table == "s_notice" or $bo_table == "s_free" or $bo_table == "qa") {

또는

if ($gr_id == "shop") {

이런 식으로...

theme/테마명/tail.php 는...

if (G5_IS_MOBILE) {
    include_once(G5_THEME_MOBILE_PATH.'/tail.php');
    return;
}

를

if (G5_IS_MOBILE) {
    if ($bo_table == "s_notice" or $bo_table == "s_free" or $bo_table == "qa") {
        include_once(G5_THEME_MOBILE_PATH.'/shop/shop.tail.php');
    return;
    } else {
        include_once(G5_THEME_MOBILE_PATH.'/tail.php');
    return;
    }
}

로 수정합니다.

마지막으로...

skin/latest/ 의

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

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

예시 파일은 앞의 게시글에 첨부되어 있습니다.