그누보드 - 탑 메뉴 > 영카트5 스킨

탑 메뉴 정보

레이아웃 탑 메뉴

첨부파일

sir_shop_menu_2018.05.24.7z (163.5K) 49회 다운로드 2018-05-25 11:46:12 포인트 차감500

본문

https://sir.kr/yc5_skin/670?sfl=mb_id%2C1&stx=fm25

위 스킨을 5.3버전에 맞게 수정했습니다.

js/jquery.shop.topmenu.js
추가...

theme/테마명/skin/shop/basic/topmenu.skin.php
추가...

theme/테마명/skin/shop/basic/style.css
에 아래 소스 추가

/* Add 메인메뉴 */
#snb {position:relative;margin:0;border-top: 1px solid #fff;border-bottom: 2px solid #fe4e91;background:#fff;zoom:1}
#snb:after {display:block;visibility:hidden;clear:both;content:''}
#snb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#snb a {display:block;text-decoration:none}

#snb .snb_1da, #snb2 a {display:inline-block;padding:0 10px;height:47px;font-size:1.1em;color:#555;font-weight:bold;line-height:3.8em}
#snb .snb_1da:focus, #snb .snb_1da:hover, #snb2 a:focus, #snb2 a:hover {background-color:#fff;color:#fe4e91}

#snb_1dul {margin:0 auto !important;padding:0;width:1200px;zoom:1}
#snb_1dul:after {display:block;visibility:hidden;clear:both;content:''}
.snb_1dli {position:relative;float:left}
.snb_1dli_on {color:#fff;text-decoration:none}
.snb_1dli_over {background:#fff; -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;}
#snb .snb_1da {line-height:3.8em}
#snb .snb_1dam {padding:0 15px}
.snb_2dli{border-top:1px solid #fe4e91}
.snb_2dul {display:none;z-index:1002;position:absolute;border:1px solid #fe4e91;border-top:0}
.snb_1dli_over .snb_2dul, .snb_1dli_over2 .snb_2dul {display:block;top:47px;left:-1px;width:180px;background:#fff}
.snb_2da {display:none;font-size:1.1em}
.snb_1dli_over .snb_2da {display:inline-block;padding:12px 10px;color:#fe4e91}
.snb_1dli_over .snb_2da:focus, .snb_1dli_over .snb_2da:hover {background:#fe4e91;color:#fff;text-decoration:none; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
.snb_2da0 {background:#fff}
.snb_2da1 {}

#snb .snb_menu_btn{background:#fe4e91;color:#fff;width:50px;height:47px;border:0;vertical-align:top;font-size:18px}
#snb .snb_mnal{padding:0}

#snb2 {float:right;color:#fff;zoom:1}
#snb2:after {display:block;visibility:hidden;clear:both;content:''}
#snb2 li {float:left}

theme/테마명/head.sub.php

<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>

줄 아래에

<script src="<?php echo G5_JS_URL ?>/jquery.shop.topmenu.js"></script>

를 삽입해줍니다.

theme/테마명/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>

를 숨김 처리하거나 삭제하고

<div>
    <?php include_once(G5_SHOP_SKIN_PATH.'/topmenu.skin.php'); // 메인메뉴 ?>
</div>

그 자리에 위 소스를 삽입해줍니다.

theme/테마명/skin/shop/basic/style.css
theme/테마명/head.sub.php
theme/테마명/shop/shop.head.php
는 사용자가 수정한 내용이 있을지도 모르니 덮어씌우지는 마십시오.

-----------------------------------------------------------------------------------------

메뉴를 수동으로 등록하려면...

'theme/테마명/skin/shop/basic/topmenu.skin.php'에 삽입해줍니다.

<li class="snb_1dli" style="z-index:<?php echo $snb_zindex--; ?>">
    <a href="<?php echo G5_SHOP_URL; ?>/s_shop.php" class="snb_1da">고객지원</a>
</li>

1차 메뉴 예

<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">공지사항</a></li>
        <li class="snb_2dli"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=s_free" class="snb_2da snb_2da1">자유게시판</a></li>
        <li class="snb_2dli"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=qa" class="snb_2da snb_2da0">질문답변</a></li>
    </ul>
</li>

1, 2차 메뉴 예

1차 메뉴는 아래의 예처럼 php 파일을 만들어 적용했습니다.

<?php
include_once('./_common.php');

if (G5_IS_MOBILE) {
    include_once(G5_MSHOP_PATH.'/s_shop.php');
    return;
}

$g5['title'] = '고객지원';
include_once('./_head.php');
?>

<!-- 내용 시작 { -->
    <div>
       고객지원 그룹 예시<br><br><br>
    </div>
    <div>
       <center><img Src="<?php echo G5_SHOP_URL ?>/img/s_shop.png"></center><br><br><br>
    </div>
    <section id="sidx_lat">
       <h2>쇼핑몰 최신글</h2>
       <?php echo latest('theme/shop_basic', 's_notice', 5, 30); ?>
       <?php echo latest('theme/shop_basic', 's_free', 5, 25); ?>
       <?php echo latest('theme/shop_basic', 'qa', 5, 20); ?>
    </section>
<!-- } 내용 끝 -->

<?php
include_once('./_tail.php');
?>

만든 php 파일은 루트의 'shop'과 'mobile' 폴더에 넣어주었습니다.
테마를 바꾸더라도 연결을 용이하게 하기 위함입니다.

게시판을 열었을 때... 커뮤니티에서 열리지않고 쇼핑몰에서 열리도록 하려면 아래의 방법을 사용하면 됩니다.
(커뮤니티를 사용하지않고 쇼핑몰 하나만 통합 운영하는 경우는 아래 과정이 필요 없습니다)

쇼핑몰 전용 게시판을 만듭니다.
전용 게시판은 관리자 도구의 '메뉴 설정'에는 등록하지 않습니다.

상단 파일 경로 ../shop/_head.php
하단 파일 경로 ../shop/_tail.php

게시판 관리에서 상하단 파일을 위와 같이 등록해줍니다.

'theme/테마명/head.sub.php'에서

if (defined('_SHOP_')) $shop_css = '_shop';

에 아래와 같은 방식으로 쇼핑몰에서 불러올 게시판을 입력해줍니다.

if (defined('_SHOP_') or $bo_table == "게시판 아이디") $shop_css = '_shop';

if (defined('_SHOP_') or $bo_table == "s_notice" or $bo_table == "s_free" or $bo_table == "qa") $shop_css = '_shop';

이런 식으로 여러개의 게시판을 등록할 수도 있습니다.

if (defined('_SHOP_') or $gr_id == "shop") $shop_css = '_shop';

이런 식으로 그룹을 등록해도 됩니다.

모바일의 경우는
이전에 별도로 메뉴를 만들었던 방식이 별로 유용하지 않을 듯 하여 폐기하고
기존의 카테고리에 필요한 메뉴를 삽입하는 방식으로 변경했습니다.

http://gnustudy.com/bbs/board.php?bo_table=yc_tip&wr_id=6

위 내용을 참고하여

theme/테마명/mobile/shop/category.php

를 수정합니다.

게시판을 영카트에서 불러오기 위해서는

theme/테마명/head.php
과
theme/테마명/tail.php

상단의 모바일 부분에 불러올 게시판 아이디를 반영해 수정합니다.

php 예시파일을 포함해서 압축하여 첨부합니다.