탑 메뉴 (Mobile) - 2014.09.24 수정 > 영카트5 스킨

영카트5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

탑 메뉴 (Mobile) - 2014.09.24 수정 정보

레이아웃 탑 메뉴 (Mobile) - 2014.09.24 수정

첨부파일

sir_shop_menu_mobile_2014.09.24.zip (20.8K) 402회 다운로드 2014-09-24 22:42:37

본문

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

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

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


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

/* 메인메뉴 */
#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}



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">
            <?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>



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

<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>


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

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


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

<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>



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

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


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

루트의 head.php

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


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;
 }
}
로 수정합니다.

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

if ($gr_id == "shop") {
이런 식으로...


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

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


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;
  }
}
로 수정합니다.


마지막으로...

skin/latest/ 의
 
'shop_basic' 폴더를 복사해서...
 
mobile/skin/latest/ 에 넣어줍니다.


예시 : http://internationale.kr/shop
추천
7

댓글 전체

우앙 좋아요~~~~^^
제 생각에도 메뉴를 사용하게 되면 분류를 사용할 필용성이 없어보입니다.
분류 위치에 분류를 삭제하고  메뉴를 넣을려면 어케 해야 할까요?
mobile/shop/shop.head.php

<!-- <a href="<?php echo G5_SHOP_URL; ?>/category.php" target="_blank" id="hd_ct">분류</a> -->

'분류' 숨김 처리 또는 삭제


css/mobile_shop.css

#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}

'right:60px'을 'left:10px'으로 수정
ㅠㅠ    ㅠㅠ  ㅠㅠ  감동입니다..  명절연휴인데 이렇게 빠른답변 주시고 
명절지나야 될줄 알았습니다.  거듭 감사드립니다.
적용했서요 잘 됩니다^^
작성한 지 좀 되어서 기억이 나지않는데...
PC판 적용과는 상관 없을 것입니다.
게시판을 불러오는 경우에 방법을 참고하라고 앞 글을 거론한 듯 합니다.
고수님들 도와 주세요.. 이 스킨 사용하는데 일부에서 에러가 났어요..
질문란에 올렸는데 주소는 아래입니다. 부탁드립니다.
http://sir.co.kr/qa/?wr_id=57213&s_tag=%EC%98%81%EC%B9%B4%ED%8A%B85
http://www.goodbuilder.co.kr/bbs/board.php?bo_table=down_builder5s&wr_id=8

굿빌더에는 모바일 '메뉴'가 이미 적용되어 있습니다.
css 파일의 경로도 다르군요.
tmpl/shop_basic/

저는 설치해본 적이 없으니... 굿빌더에 관한 문의는 주인장에게 하시기 바랍니다~^^
피시에서는 굿빌더를 그대로 사용하고
모바일에선 영카트 그대로 사용하고자 했을때 에러가 난것이었습니다.
굿빌더에서 모바일 css를  mobile_shop.css를 막아서 사용하지 않고 자체css를 사용해서 일어난 문제였습니다.
head.sub.php에서 원래대로 변경하니 잘 적용됩니다.
감사합니다.
전체 118
영카트5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT