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

영카트5 스킨

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

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

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

첨부파일

sir_shop_menu_2014.09.25.zip (12.3K) 766회 다운로드 2014-09-25 13:23:50

본문

지운아빠님 허락을 받고 작업한... 무늬만 스킨인 '팁'입니다.

http://sir.co.kr/bbs/board.php?bo_table=yc5_skin&wr_id=51&sfl=mb_id%2C1&stx=cclass

지운아빠님의 이 스킨의 메뉴 부분은...
기존의 카테고리 부분을 이용해서 상단에 나타내는 방식입니다.
대신... 좌측의 카테고리는 사용할 수 없습니다.

이 소스들을 복사해서 좌측의 카테고리는 그대로 두고 별도로 만들었습니다.

js/jquery.shop.topmenu.js
skin/shop/basic/topmenu.skin.php
skin/shop/basic/img/snb_bg01.gif
추가...


skin/shop/basic/style.css
에 아래 소스 추가

/* 메인메뉴 */
#snb {position:relative;margin:-1px 0 0;background:#585858;color:#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:44px;font-size:1.1em;color:#fff;font-weight:bold;line-height:3.3em}
#snb .snb_1da:focus, #snb .snb_1da:hover, #snb2 a:focus, #snb2 a:hover {background-color:#797979}

#snb_1dul {margin:0 auto !important;padding:0;width:1000px;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-color:#797979}
#snb .snb_1da {line-height:3.3em}
#snb .snb_1dam {padding-right:30px;background:url('img/snb_bg01.gif') center right no-repeat}
.snb_2dul {display:none;z-index:1002;position:absolute;border:1px solid #fff;border-top:0}
.snb_1dli_over .snb_2dul, .snb_1dli_over2 .snb_2dul {display:block;top:44px;left:-1px;width:168px;background:#fff}
.snb_2da {display:none;font-size:1.1em}
.snb_1dli_over .snb_2da {display:inline-block;padding:13px 10px;color:#6c6c6c}
.snb_1dli_over .snb_2da:focus, .snb_1dli_over .snb_2da:hover {background:#585858;color:#fff;text-decoration:none}
.snb_2da0 {background:#f8f8f8}
.snb_2da1 {}

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



기존의 카테고리 메뉴와 부딪치는 부분이 있으므로...

aside:gnb
에서

.gnb_2da {display:none}


.gnb_2da {display:block;padding:10px;border-bottom:1px solid #e9e9e9}
로 수정합니다.


루트의 '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>
를 삽입해줍니다.


'shop/shop.head.php'를 열어

</div>

<div id="wrapper">
위에

<?php include_once(G5_SHOP_SKIN_PATH.'/topmenu.skin.php'); // 메인메뉴 ?>
를 삽입해줍니다.


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


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

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

'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');

$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('shop_basic', 's_notice', 5, 30); ?>
       <?php echo latest('shop_basic', 's_free', 5, 25); ?>
       <?php echo latest('shop_basic', 'qa', 5, 20); ?>
    </section>
<!-- } 내용 끝 -->

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



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

http://sir.co.kr/qa/?wr_id=34210#answer_34228

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

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

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


'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';
이런 식으로 그룹을 등록해도 됩니다.
추천
7
  • 복사

댓글 전체

jakekwak님의 도움으로 'js/jquery.shop.topmenu.js' 파일의 오류를 수정해서 다시 올렸습니다.

'submenu_hide'를 'submenu_h_hide'로 바꾸었습니다.
쪽지로 문의하신 분이 있어서 추가합니다.

메뉴 앞에 'Home'을 달고자 하면... 아래 소스를 자동 출력 소스 앞쪽에 삽입해줍니다.
간단합니다.

<li class="snb_1dli" style="z-index:<?php echo $snb_zindex--; ?>">
            <a href="<?php echo G5_SHOP_URL; ?>/index.php" class="snb_1da">Home</a>
        </li>
안녕하세요 fm25님 덕분에 님과 같이 쇼핑몰 상단메뉴가 멋있게 자리 잡혔습니다.
님의커뮤니티를 보니 쇼핑몰 상단메뉴와 통일성 있게 똑같은 모양(회색메뉴바탕과 넓어진 두께 흰색글씨) 으로 되어 있더군요. http://hangbok.woobi.co.kr/ 원래 회색메뉴바의 두께도 얇고 메뉴글씨가 검정입니다.
어떻게 하면 님의 커뮤니티처럼 쇼핑몰과 똑같은 형태를 만들 수 있을까요?
/* 메인메뉴 */
#gnb {position:relative;margin:-1px 0 0;background:#414141}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb_1dul {margin:0 auto !important;padding:0;width:970px;zoom:1}
#gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1dli {z-index:10;position:relative;float:left}
.gnb_1da {display:inline-block;padding:0 40px 0 10px;height:44px;background:url('../img/gnb_bg00.gif') center right no-repeat;font-size:1.1em;color:#fff !important;font-weight:bold;line-height:3.4em;text-decoration:none}
.gnb_1da:focus, .gnb_1da:hover {background:url('../img/gnb_bg00.gif') #5D5D5D !important center right no-repeat;color:#FFE400 !important;text-decoration:none}
.gnb_1dli_air .gnb_1da {background-color:#8C8C8C;color:#fff}
.gnb_1dli_on .gnb_1da {background-color:#8C8C8C;color:#fff}
.gnb_2dul {display:none;position:absolute;top:44px;width:180px}
.gnb_2da {display:block;padding:12px 10px;text-align:left;font-size:1.1em;text-decoration:none}
.gnb_1dli_air .gnb_2da {background-color:#8C8C8C;color:#fff}
.gnb_1dli_on .gnb_2da {background-color:#8C8C8C;color:#fff}
.gnb_2da:focus, .gnb_2da:hover {background:#5D5D5D;color:#FFE400;text-decoration:none}
.gnb_1dli_over .gnb_2dul {display:block;left:0;background:#fff}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0;background:#fff}

#gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em}
#gnb_empty a {text-decoration:underline}

저는 메뉴 폭을 고정형으로 바꿔서 사용하고 있습니다만...
위 소스는 원본에 가까운 가변형입니다.

비슷해 보이지만... 쇼핑몰과 다른 부분이 많습니다.
쇼핑몰쪽이 더 깔끔해보여서 그 쪽과 일치시켜봐야겠습니다.
정말 감사합니다. 쇼핑몰과 100% 같진않아도 적용해보니 기존보다 상단메뉴가 쇼핑몰과 일체감도 생기고 훨씬 좋습니다. 만약 일치까지 된다면 꼭 다시 적용해보고 싶습니다.
정보공개를 하시지 않아 쪽지 보내기가 안되네요.

skin/shop/basic/style.css
를 참고하여 색상값을 바꿔보세요.

2차 메뉴를 하나 건너뛰어 색상값을 달리하는 것은 초보의 실력으로는 해결을 못하겠네요.
메뉴 소스까지 변경을 해야하는 문제라...;;;
수정 내용...

기존의 카테고리 메뉴와 부딪치는 부분이 있으므로...

aside:gnb
에서

.gnb_2da {display:none}


.gnb_2da {display:block;padding:10px;border-bottom:1px solid #e9e9e9}
로 수정합니다.


루트의 '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>
를 삽입해줍니다.
위와같이 해도 기존카테고리 10,20,은 상단 카타고리보다 위로 나오는건 멀까요?
http://atone.kr/shop2/shop/

보시면 좌측 카타고리와 겹치네요,, 딱 두카테고리만,,ㅋ
skin/shop/basic/style.css
의...
.snb_2dul {display:none;z-index:1002;position:absolute;border:1px solid #fff;border-top:0}
이 부분에서 수정전에 'z-index:1000'으로 했었는데... 그 때문이 아닌지 살펴보세요.
그런데 2개만 그런다니... 요상하네요...;;;
안되면 그 부분에 하위메뉴가 뜨지않는 메뉴를 위치시키는 방법도 있겠네요.
<상단 파일 경로 ../shop/_head.php
하단 파일 경로 ../shop/_tail.php
게시판 관리에서 상하단 파일을 위와 같이 등록해줍니다.
'head.sub.php'에서 변경>후 실행하니까 상단메뉴의 부메뉴가 안나오네요.
© SIRSOFT
현재 페이지 제일 처음으로