영카트 카테고리 관련 질문입니다.

영카트 카테고리 관련 질문입니다.

QA

영카트 카테고리 관련 질문입니다.

본문

영카트 테마를 활용해서  만들고 있는데

메뉴바를 클릭하면  해당 메뉴가 드롭다운하게 좀 하고 싶습니다.

 

참고사이트 : http://sample06.tloghost.kr/

해당 사이트 메뉴처럼  적용을 하고 싶습니다.

 

 

category.php   및 main-shop.css    어디를 건더야 될지  고수님들의 조언 좀 부탁 드립니다.

 

 

category.php 


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
function get_mshop_category($ca_id, $len)
{
    global $g5;
    $sql = " select ca_id, ca_name from {$g5['g5_shop_category_table']}
                where ca_use = '1' ";
    if($ca_id)
        $sql .= " and ca_id like '$ca_id%' ";
    $sql .= " and length(ca_id) = '$len' order by ca_order, ca_id ";
    return $sql;
}
?>
<div id="category" class="menu">
    <button type="button" class="menu_close"><i class="fa fa-times" aria-hidden="true"></i><span class="sound_only">카테고리닫기</span></button>
    <div class="btn_login">
        <?php if ($is_member) { ?>
        <button type="button" id="btn_user" class="btn_ol"><?php echo get_member_profile_img($member['mb_id']); ?><span class="txt"><?php echo $member['mb_id'] ?> 님 </span><span class="sound_only">사용자메뉴 열기</span></button>
        <?php } else { ?>
        <button type="button" class="btn_ol">로그인</button>
        <a href="<?php echo G5_BBS_URL; ?>/register.php" class="btn_ol">회원가입</a>
      
      
        <?php } ?>
    </div>
    <?php echo outlogin('theme/shop_basic'); // 외부 로그인 ?>
    <div class="menu_wr">
     
     <h2>카테고리</h2>
      
  
     
     
     
      
       <?php
        $mshop_ca_href = G5_SHOP_URL.'/list.php?ca_id=';
        $mshop_ca_res1 = sql_query(get_mshop_category('', 2));
        for($i=0; $mshop_ca_row1=sql_fetch_array($mshop_ca_res1); $i++) {
            if($i == 0)
                echo '<ul class="cate">'.PHP_EOL;
             
        ?>
                <li class="ft_box ft_info">
     <a href="<?php echo G5_BBS_URL; ?>/content.php?co_id=c0"><b>회사소개</b></a>
        <button type="button" class="sub_ct_toggle ct_op">하위분류 열기</button>
        <ul class="sub_cate sub_cate1">
            <li><a href="<?php echo G5_BBS_URL; ?>/content.php?co_id=c0"><b>인사말 </b></a></li>
            <li><a href="../bbs/board.php?bo_table=history"><b>사업연혁</b></a></li>
             <li><a href="../bbs/board.php?bo_table=gallery"><b>납품현황</b></a></li>
            <li><a href="<?php echo G5_BBS_URL; ?>/content.php?co_id=map"><b>오시는길</b></a></li>
        </ul>
         
            
                     
            <li>
                <a href="<?php echo $mshop_ca_href.$mshop_ca_row1['ca_id']; ?>"><b><?php echo get_text($mshop_ca_row1['ca_name']); ?></b></a>
                <?php
                $mshop_ca_res2 = sql_query(get_mshop_category($mshop_ca_row1['ca_id'], 4));
                if(sql_num_rows($mshop_ca_res2))
                    echo '<button class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row1['ca_name']).' 하위분류 열기</button>'.PHP_EOL;
                for($j=0; $mshop_ca_row2=sql_fetch_array($mshop_ca_res2); $j++) {
                    if($j == 0)
                        echo '<ul class="sub_cate sub_cate1">'.PHP_EOL;
                ?>
                     
                   
                    <li>
                        <a href="<?php echo $mshop_ca_href.$mshop_ca_row2['ca_id']; ?>"><b><?php echo get_text($mshop_ca_row2['ca_name']); ?></b></a>
                        <?php
                        $mshop_ca_res3 = sql_query(get_mshop_category($mshop_ca_row2['ca_id'], 6));
                        if(sql_num_rows($mshop_ca_res3))
                            echo '<button type="button" class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row2['ca_name']).' 하위분류 열기</button>'.PHP_EOL;
                        for($k=0; $mshop_ca_row3=sql_fetch_array($mshop_ca_res3); $k++) {
                            if($k == 0)
                                echo '<ul class="sub_cate sub_cate2">'.PHP_EOL;
                        ?>
                            <li>
                                <a href="<?php echo $mshop_ca_href.$mshop_ca_row3['ca_id']; ?>"><?php echo get_text($mshop_ca_row3['ca_name']); ?></a>
                                <?php
                                $mshop_ca_res4 = sql_query(get_mshop_category($mshop_ca_row3['ca_id'], 8));
                                if(sql_num_rows($mshop_ca_res4))
                                    echo '<button type="button" class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row3['ca_name']).' 하위분류 열기</button>'.PHP_EOL;
                                for($m=0; $mshop_ca_row4=sql_fetch_array($mshop_ca_res4); $m++) {
                                    if($m == 0)
                                        echo '<ul class="sub_cate sub_cate3">'.PHP_EOL;
                                ?>
                                    <li>
                                        <a href="<?php echo $mshop_ca_href.$mshop_ca_row4['ca_id']; ?>"><?php echo get_text($mshop_ca_row4['ca_name']); ?></a>
                                        <?php
                                        $mshop_ca_res5 = sql_query(get_mshop_category($mshop_ca_row4['ca_id'], 10));
                                        if(sql_num_rows($mshop_ca_res5))
                                            echo '<button type="button" class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row4['ca_name']).' 하위분류 열기</button>'.PHP_EOL;
                                        for($n=0; $mshop_ca_row5=sql_fetch_array($mshop_ca_res5); $n++) {
                                            if($n == 0)
                                                echo '<ul class="sub_cate sub_cate4">'.PHP_EOL;
                                        ?>
                                            <li>
                                                <a href="<?php echo $mshop_ca_href.$mshop_ca_row5['ca_id']; ?>"><?php echo get_text($mshop_ca_row5['ca_name']); ?></a>
                                            </li>
                                        <?php
                                        }
                                        if($n > 0)
                                            echo '</ul>'.PHP_EOL;
                                        ?>
                                    </li>
                                <?php
                                }
                                if($m > 0)
                                    echo '</ul>'.PHP_EOL;
                                ?>
                            </li>
                        <?php
                        }
                        if($k > 0)
                            echo '</ul>'.PHP_EOL;
                        ?>
                    </li>
              
              
              
              
              
              
              
                <?php
                }
                if($j > 0)
                    echo '</ul>'.PHP_EOL;
                ?>
            </li>
           
      
      
      
      
      
       <?php
}
?>

 
    </li>
    <li><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=free&page="><b>기술자료(인증서)</b></a></li>
   
   
     <li class="ft_box ft_info">
     <a href="<?php echo G5_BBS_URL; ?>/faq.php?fm_id=1"><b>고객지원 </b></a>
        <button type="button" class="sub_ct_toggle ct_op">하위분류 열기</button>
        <ul class="sub_cate sub_cate1">
            <li><a href="<?php echo G5_BBS_URL; ?>/faq.php?fm_id=1"><b>자주하시는질문 </b></a></li>
             <li><a href="<?php echo G5_BBS_URL; ?>/content.php?co_id=down"><b>카달로그 </b></a></li>
             <li><a href="<?php echo G5_BBS_URL; ?>/qalist.php"><b>1:1문의 </b></a></li>
           <li><a href="<?php echo G5_SHOP_URL; ?>/orderinquiry.php"><b>주문조회 </b></a></li>
          <li><a href="<?php echo G5_SHOP_URL; ?>/mypage.php"><b>마이페이지 </b></a></li>
          <li><a href="<?php echo G5_SHOP_URL; ?>/personalpay.php"><b>개인결제 </b></a></li>
       
       
        </ul>
   
  
   
   
   
   
   
  
      <li><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=notice"><b>공지사항</b></a></li>
</ul>
      
      
      
      
      
      
    </div> 
   
</div>

<script>
$(function (){
    $("button.sub_ct_toggle").on("click", function() {
        var $this = $(this);
        $sub_ul = $(this).closest("li").children("ul.sub_cate");
        if($sub_ul.size() > 0) {
            var txt = $this.text();
            if($sub_ul.is(":visible")) {
                txt = txt.replace(/닫기$/, "열기");
                $this
                    .removeClass("ct_cl")
                    .text(txt);
            } else {
                txt = txt.replace(/열기$/, "닫기");
                $this
                    .addClass("ct_cl")
                    .text(txt);
            }
            $sub_ul.toggle();
        }
    });

    $(".content li.con").hide();
    $(".content li.con:first").show();  
    $(".cate_tab li a").click(function(){
        $(".cate_tab li a").removeClass("selected");
        $(this).addClass("selected");
        $(".content li.con").hide();
        //$($(this).attr("href")).show();
        $($(this).attr("href")).fadeIn();
    });
    
});
</script> 

 

moblie-shop.css

 

[code]

@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@charset "utf-8";

/* 초기화 */
html {overflow-y:scroll;height:100%;min-width:320px}
body {margin:0;padding:0;font-size:0.813em;height:100%;font-family:'Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;color:#64646c}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;color:#64646c}
h7 {font-size:1.3em}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
input, button {margin:0;padding:0;font-size:1em;font-family:'Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;}
button, input[type=submit] {cursor:pointer}
input[type=text], input[type=password], input[type=image], button {font-size:1em;-webkit-appearance:none}
textarea, select,button {font-size:1em;font-family:'Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;}
textarea {border-radius:0;-webkit-appearance:none}
select {margin:0;background:none}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
ul,li,dl,dt,dd{padding:0;margin:0}
ul{list-style:none;}
img{vertical-align:top;max-width:100%;height:auto}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


 

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;height:0px}
#hd_pop h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops img{max-width:100%;height:auto}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}

/* 상단 레이아웃 */
#hd {position:fixed;top:0;left:0;width:100%;background:#fff;border-bottom:1px solid #e6eaed; z-index:99 ;
-webkit-box-shadow:  0 2px 9px rgba(0,0,0,0.1);
-moz-box-shadow: 0 2px 9px rgba(0,0,0,0.1);
box-shadow: 0 2px 9px rgba(0,0,0,0.1)}
#hd h1 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden;}

#hd_menu{border-bottom:1px solid #e6eaed}
#hd_menu ul{margin:0 auto;max-width:1200px}
#hd_menu ul:after {display:block;visibility:hidden;clear:both;content:""}
#hd_menu li{float:left;line-height:45px;font-size:0.923em;margin:0 8px}
#hd_menu li a{color:#aeb4bf}
#hd_menu li a:hover{color:#000}
#hd_menu .hd_menu_right{float:right}

 


/* 메인 메뉴 높이 padding:5px  조절하면 됨     */
#hd_wr {margin:0 auto;max-width:1400px;padding:5px 100px 10px 10px;position:relative;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;}

#hd_wr:after {display:block;visibility:hidden;clear:both;content:""}
#logo{float:left;margin-top:5px;margin-right:20px}
#logo img{vertical-align:middle;height:auto;width:auto}

#logo1{float:left;margin-top:5px;margin-right:20px}
#logo1 img{vertical-align:middle;height:80px;width:auto}


#hd_sch {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;background:rgba(0,0,0,0.85);z-index:999;text-align:center;}
.hd_sch_wr{position:absolute;top:50%;left:50%;width:80%;margin-top:-50px;margin-left:-40%}
#hd_sch h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#hd_sch .sch_inner {position:relative;}
#hd_sch .sch_inner:after {display:block;visibility:hidden;clear:both;content:""}
#hd_sch #sch_str {background:transparent;border:0;border-bottom:2px solid #fff;color:#fff;width:100%;height:50px;padding-left:50px;font-size:16px;outline:none}
#hd_sch .sch_submit {position:absolute;top:0;left:0;height:50px;;border:0;cursor:pointer;background:transparent;font-weight:600;color:#fff;width:50px;font-size:16px;}
#hd_sch .btn_close{position:absolute;top:0;right:0;width:70px;height:70px;background:none;color:#fff;border:0;font-size:16px;opacity:0.5}
#hd_sch .btn_close:hover{opacity:1}

#ppl_word{color:#fff;margin-top:15px;line-height:25px}
#ppl_word:after {display:block;visibility:hidden;clear:both;content:""}
#ppl_word h3 {padding:0 8px;margin-right:5px;background:#fff;color:#000;display:inline-block;float:left;font-weight:500;border-radius:5px}
#ppl_word ol{float:left;padding:0;margin:0}
#ppl_word li{display:inline-block;list-style:none}
#ppl_word li a{display:block;padding: 0 10px;color:#fff;border-radius:5px;font-weight:300;opacity:0.8}
#ppl_word li a:hover{opacity:1}


#hd_btn {position:absolute;top:15px;right:0}
#hd_btn button{height:45px;line-height:45px;width:45px;background:none;border:0;vertical-align:top}
#hd_btn  i{font-size:18px}
#hd_btn a{display:inline-block;line-height:45px;width:45px;text-align:center;vertical-align:top}
#btn_cartop{position:relative}
#btn_cartop .cart-count{position:absolute;top:5px;right:0;background:#64646c;border-radius:15px;font-size:10px;color:#fff;padding:0 5px;border:2px solid #fff;line-height:16px}

.hd_admin{position:fixed;bottom:10px;left:10px;}
.hd_admin a{padding:0 20px;display:inline-block;;line-height:40px;background:#d12323;z-index:999;color:#fff}
.hd_admin a:hover{background:#ff0000}

@media (max-width: 969px){
   
    #hd_wr {padding:15px; }
    #logo{margin-top:-10px;margin-right:0px}
  #logo img{vertical-align:middle;height:50px;width:auto}
    #hd_btn{top:0;right:10px}
    #hd_btn button{width:40px;height:55px}
    #hd_btn a{line-height:55px}
    #btn_cartop .cart-count{top:7px}
    #hd_btn .btn_ol{width:40px}
    #hd_btn .btn_ol .txt{display:none}

    #hd_menu{display:none}

}

/*카테고리*/

.menu_wr h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}


 @media (max-width: 969px){
    .menu {display:none;overflow-y:auto;position:fixed;top:0;left:0;height:100%;width:300px;background:#f3f3f3;z-index:99999;text-align:left;
    -webkit-box-shadow:0 2px 15px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.2);
    box-shadow: 0 2px 15px rgba(0,0,0,0.2)}

    #btn_user{display:none}
    .btn_login{background:#fff;padding:0 10px}
    .btn_login .btn_ol{line-height:55px;height:55px;border:0;background:none;color:#717989;padding:0 10px;position:relative}
    .btn_login a:before{position:absolute;top:50%;left:0;content:'';background:#e3e3e3;width:1px;height:15px;margin-top:-7px}

    .menu .menu_close {position:absolute;top:0;right:0;width:55px;height:55px;background:none;color:#aaa;font-size:16px;border:0;z-index:199999}
    .menu .menu_close:hover{color:#000}
    .menu_wr{padding:10px 0;background:#fff;margin:10px 0;border-top:1px solid #eee}
    .menu_wr a {display:block;padding: 0 20px;color:#727280}
    .menu_wr li{position:relative;z-index:99999;line-height:45px;}
    .menu_wr li:hover {background:#f3f3f3; }
    .menu_wr li button{position:absolute;top:0;right:0;background:url;border:0;width:45px;height:45px;overflow:hidden;border:0;background:url(../img/mobile/gnb_bg.png) no-repeat 50% 50%;text-indent:-9999px}
    .menu_wr li button.ct_cl{background:url(../img/mobile/gnb_bg2.png) no-repeat 50% 50%}

    .sub_cate{display:none;background:#fff;font-size:0.923em;}
    .sub_cate a{padding-left:30px}
    .sub_cate1{}
    .sub_cate li:hover{position:relative;}
    .sub_cate2 a{padding-left:40px;background-position:31px 17px}
    .sub_cate3 a{padding-left:50px;background-position:41px 17px}
    .sub_cate4 a{padding-left:60px;background-position:51px 17px}
 }
  @media (min-width: 970px){

    #btn_cate{display:none}
    .menu{display:block !important}
    .menu:after {display:block;visibility:hidden;clear:both;content:""}
    .menu_wr{float:left;}

    .btn_login .btn_ol{width:auto;vertical-align:top}
    .btn_login .btn_ol .txt{color:#717989;display:inline-block;margin-left:5px}
    .btn_login{float:right;line-height:45px}
    .btn_login a{padding:0 10px;display:inline-block;position:relative;color:#717583;}
    .btn_login a:before{position:absolute;top:50%;left:0;content:'';background:#e3e3e3;width:1px;height:15px;margin-top:-7px}
    .btn_login button{background:0;padding:0 10px;border:0;color:#717583;outline:none;height:45px;line-height: 45px;}
    .btn_login img{ width:30px;height:30px;border-radius:50px;margin-right:5px;margin-top:7px;vertical-align:top}
    .menu .menu_close{display:none}
   
  
      .menu_wr li{float:left;padding:0 15px;line-height:90px;font-size:1.654em;font-weight:500}
    .menu_wr li button{border:0;width:25px;height:45px;overflow:hidden;border:0;background:url(../img/mobile/btn_menu.png) no-repeat 50% 50%;text-indent:-9999px;opacity:0.5}
    .sub_cate{display:none}
    .sub_cate a{display:block }
    .menu_wr li:hover .sub_cate1{display: block;position:absolute; padding:10px 0 ;
    ; background:#fff;min-width:100px;
     -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.2);
    box-shadow: 0 2px 15px rgba(0,0,0,0.2)}

    .sub_cate1 li{display:block;font-size:18px;font-weight:300;line-height:40px;padding:0 20px}
    .sub_cate1 li:hover{color:#000;background:#f3f3f3}
    .sub_cate button{display:none}
 }

 

 

 

 

 

 
/* 중간 레이아웃 */
#container {margin-top:75px}
#container_title {margin:0 auto;max-width:1200px;padding:40px 20px 20px;text-align:center;font-size:1.846em}
.idx_c{margin:0 auto;max-width:1200px;}
.idx_c:after {display:block;visibility:hidden;clear:both;content:""}

.box{background:#fff;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.07);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.07);
box-shadow: 0 2px 5px rgba(0,0,0,0.07)}

.container{margin:75px auto 20px;max-width:1200px}
#container.idx-container{padding: 0 }
.view-container #container_title{display:none}

 

 


#container1 {margin-top:75px}
#container1_title {margin:0 auto;max-width:1920px;padding:40px 20px 20px;text-align:center;font-size:1.846em}
.idx_c1{margin:0 auto;max-width:1920px;}
.idx_c1:after {display:block;visibility:hidden;clear:both;content:""}

.box{background:#fff;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.07);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.07);
box-shadow: 0 2px 5px rgba(0,0,0,0.07)}

.container1{margin:75px auto 20px;max-width:1920px}
#container1.idx-container1{padding: 0 }
.view-container1 #container1_title{display:none}

 

 

 

 

 

 

 

 

@media (max-width: 969px){
    #container {margin-top:55px}
    .container{margin:55px auto 20px}
    #container_title{font-size:1.5em;padding:20px}
}

/*메인*/
#idx_tab{padding-left:220px; position:relative;}
#idx_tab h2{display:none}
#idx_tab .tabs{position:absolute;top:0;left:0}
#idx_tab .tabs li{display: block; font-size:1.154em;margin: 0 0 15px;font-weight:500; line-height: 24px;color: #717989; text-align: left;cursor:pointer}
#idx_tab .tabs .current{color: #64646c;position: relative;text-decoration: underline;}
#idx_tab .sct_wrap{display:none}
#idx_tab .sct_wrap.current{display: block; }

#idx_review{background:#f8f9fa;text-align:center;padding:100px 0}
#idx_review h2{ text-align: center; font-size: 1.846em;margin: 0 0 20px;}
.review{max-width:1200px;margin:0 auto;}
.review .rv_li{margin:20px;background:#fff;opacity:0.5; position:relative;padding:40px;text-align:left;
-webkit-box-shadow:  0 1px 2px rgba(0, 0, 0, .1);
-moz-box-shadow:  0 1px 2px rgba(0, 0, 0, .1);
box-shadow:  0 1px 2px rgba(0, 0, 0, .1);}
.review .rv_li:hover {
-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, .15);
-moz-box-shadow:0 5px 10px rgba(0, 0, 0, .15);
box-shadow:0 5px 10px rgba(0, 0, 0, .15);}
.review .slick-active{opacity:1}
.review .rv_hd{position:relative;padding-left:70px;line-height:25px;margin-bottom:20px}
.review .prd_img{position:absolute;top:0;left:0;}
.review .prd_img img{border-radius:50px}
.review .rv_tit{display:block;font-size:1.077em;font-weight:600}
.review .rv_prd{color:#717989}         
.review p{line-height:1.7em;min-height:80px}


 @media (max-width:969px){
    #idx_tab{padding:10px}
    #idx_tab .tabs{position:relative}
    #idx_tab .tabs{position:relative;width:100%;margin-bottom:20px;text-align:center}
    #idx_tab .tabs li{display:inline-block;margin:0 10px 10px}
    #idx_tab .sct_wrap {margin:10px 0}

}
 @media (max-width:639px){
     #idx_review{padding:80px 0}
     .review .rv_li{margin:8px}

 }
/* 내용관리 */
#ctt {margin:10px 0;padding:10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.ctt_admin {margin:0 5px;text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0}
.ctt_img {text-align:center}

/* 하단 레이아웃 */
#ft {background:#333;position:relative;z-index:10}
.ft_notice{border-bottom:1px solid #282828}
.ft_wr{max-width:1200px;margin:0 auto;padding:60px 0}
.ft_wr ul:after {display:block;visibility:hidden;clear:both;content:""}
.ft_wr .ft_box{float:left;width:33.3333%;text-align:left;padding:0 20px}
.ft_wr .ft_box h2{color:#9f9f9f;font-size:1.154em;margin-bottom:25px}
.ft_wr .ft_box strong{display:block;color:#dddddd;margin-bottom:20px;font-size:1.8em}
.ft_wr .ft_box p{color:#9f9f9f;font-weight:300;line-height:1.7em;font-size:0.923em}
.ft_wr .ft_box p span{display:inline-block;margin-right:8px;}
.ft_wr .ft_info{width:66.6666%}

.ft_wr1{background:#282828}
#ft_company{margin:0 auto;max-width:1200px;padding:40px 20px;color:#5e5e5e;text-align:right}
#ft_company:after {display:block;visibility:hidden;clear:both;content:""}
#ft_company a{display:inline-block;margin:0 10px;color:#5e5e5e;}
.ft_copy{float:left}


#ft_to_top{position:fixed;bottom:10px;right:10px;width:40px;line-height:40px;background:#fff;opacity:0.6;text-align:center;border-radius:30px;
-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);       
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;}
#ft_to_top:hover{opacity:1;
-webkit-box-shadow:1px 1px 15px rgba(0,0,0,0.09);       
-moz-box-shadow: 1px 1px 15px rgba(0,0,0,0.09);
box-shadow: 1px 1px 15px rgba(0,0,0,0.09)}

@media (max-width: 969px){
    .ft_wr {padding: 20px}
    .ft_wr .ft_box{width:100%;padding:40px 0}
    #ft_company{text-align:center}
    .ft_copy{float:none;margin-top:10px}
}

 @media (max-width:639px){
   .ft_wr .ft_box{padding:20px 0}
   .ft_wr .ft_box h2{margin-bottom:10px}
   .ft_wr .ft_box strong{margin-bottom:10px}

 }
/* 목록 바로가기 */
.sanchor {margin:0 0 5px;padding:0}
.sanchor:after {display:block;visibility:hidden;clear:both;content:""}
.sanchor li {float:left;list-style:none;width:25%;border-top:2px solid #000;text-align:center;  overflow: hidden;  white-space: nowrap;letter-spacing:0.2em;font-size:0.93em}
.sanchor a {display:block;padding:10px;border-left:1px solid #ededed;border-bottom:1px solid #ededed;background:#fcfcfc;text-decoration:none;color:#484848}
.sanchor a:focus, .sanchor a:hover {background:#eee;text-decoration:none}
.sanchor a.sanchor_on {background:#fff;text-decoration:none;border-bottom:1px solid #fff;}

/* ####### 쇼핑몰 컨텐츠 ####### */

.st_bg{display: inline-block;width: 1px;height: 10px;margin: 0 10px;background: #e2e1e0;vertical-align: -1px;}
#listtype{margin:10px;}

#sod_chk {padding:15px 15px 0;}
.sod_list {padding:10px 0;}
.sod_list .sod_li {background:#fff;border: 1px solid #e7e8ef;margin:10px 0;}
.sod_list .li_name{;line-height:1.3em;padding: 10px 10px;font-size:1.083em}
.sod_list .li_op_wr{position:relative;margin:10px;padding-left:90px;min-height:80px}
.sod_list .total_img{position:absolute;top:0;left:0}
.sod_list .mod_options{padding: 0 7px;border: 1px solid #38b2b9;color: #38b2b9;background: #fff;height: 23px;line-height: 21px;margin: 5px 0 0;}
.sod_list .li_prqty{margin:10px 10px ;border-top:1px solid #dcdcdc;padding:10px 0 0}
.sod_list .li_prqty:after {display:block;visibility:hidden;clear:both;content:''}
.sod_list .li_prqty_sp{float:left;width:50%;display:block;line-height:20px;padding:0 7px;text-align :right;}
.sod_list .li_prqty_sp span{float:left}
.sod_list .prqty_sc,.sod_list .prqty_price{border-right:1px solid #dcdcdc}
.sod_list .total_price{background:#f5f5f5;border:1px solid #e2e2e2;display:block;clear:both;margin:10px;text-align:right;padding:5px 10px;line-height:20px}
.sod_list .total_price span{float:left}
.sod_list .total_price strong{font-size:1.25em;color:#7d8dff}
.sod_opt li {padding-left: 10px;background: url('../img/bullet.gif') no-repeat 3px 50%;color: #777;margin: 3px 0;line-height: 1.3em;}

#sit_opt_added {margin:0;padding:0;border-bottom:0;list-style:none}
#sit_opt_added li {padding:15px 0;border-bottom:1px solid #eee;margin:0 0 2px;position:relative}
#sit_opt_added li .opt_name{line-height:18px;padding:0 0 10px}
#sit_opt_added li .opt_count{}
#sit_opt_added li .opt_count:after {display:block;visibility:hidden;clear:both;content:""}
#sit_opt_added button {float:left;width:30px;height:30px;border:1px solid #64646c;background:#fff;color:#64646c;font-size:0.92em}
#sit_opt_added button:hover{background:#e5e4e4;border-color:#64646c;color:#64646c}
#sit_opt_added .num_input {float:left;border:0;height:30px;width:40px;border-top:1px solid #64646c;border-bottom:1px solid #64646c;text-align:center;color:#333;}
#sit_opt_added .num_input:focus{background:#64646c;color:#64646c}

#sit_opt_added .sit_opt_del{background:#64646c;color:#aaa;border:0;margin-left:3px}

#sit_opt_added .sit_opt_prc{float:right;display:block;padding:0 3px;text-align:right;line-height:30px;font-weight:bold;}

#sit_opt_added .sit_opt_prc{float:right;display:none;padding:0 3px;text-align:right;line-height:30px;font-weight:bold;}

/* 장바구니 */
#mod_option_frm{position:fixed;top:50%;left:50%;background:#fff;width:300px;max-height:300px;margin-left:-150px;margin-top:-150px;overflow-y:auto;z-index:99;border-radius:0 0 3px 3px;
-webkit-box-shadow:1px 5px 15px rgba(0,0,0,0.4);
-moz-box-shadow:1px 5px 15px rgba(0,0,0,0.4);
box-shadow: 1px 5px 15px rgba(0,0,0,0.4);}
#mod_option_frm h2{height:45px;line-height:45px;font-size:1.167em;border-bottom: 1px solid #eee;padding:0 15px}
#mod_option_frm  #sit_sel_option{margin:15px }
#mod_option_frm #sit_tot_price{margin:15px;line-height:30px }
#mod_option_frm  #sit_sel_option ul{;background:#f3f3f3;border:0 }
#mod_option_frm h3{margin: 0 0 10px;color:#5772d5;}
#mod_option_frm .option_wr {margin:15px ; }
#mod_option_frm .option_wr label{margin: 0 0 5px;display:block}
#mod_option_frm .option_wr select{width:100%; height: 40px;border: 1px solid #d9d9d9;margin: 0 0 5px;}
#mod_option_frm .btn_confirm{margin:10px ; }
#mod_option_frm .btn_confirm .btn_submit{height:40px;font-weight:bold;width:100%;}
#mod_option_frm .btn_confirm .btn_close{position:absolute;top:0;right:0;width:45px;height:45px;border:0;background:none;color:#999;font-size:1.25em}

#sod_bsk{padding:20px 0 0;background: #f3f3f3;}
#sod_bsk:after {display:block;visibility:hidden;clear:both;content:''}
#sod_bsk .btn_del_wr{margin:10px }
#sod_bsk .btn_del_wr .btn01{height:30px}
#sod_bsk .sod_ta_wr{background:#e9e9e9;padding:20px;}
#sod_bsk .go_shopping{margin: 10px;}
#sod_bsk .go_shopping .btn_b01{line-height:43px;font-size:1.167em;font-weight:bold;width:100%;text-align:center;display:block}
#sod_bsk .go_shopping1{margin: 10px;}
#sod_bsk .go_shopping1 .btn_b01{font-size:2.167em;font-weight:bold}


#m_sod_bsk_tot{padding:15px;background:#f3f3f3}
#sod_bsk #m_sod_bsk_tot  {background:none;padding:0}
#m_sod_bsk_tot:after{display:block;visibility:hidden;clear:both;content:""}
#m_sod_bsk_tot dt{float:left;width:40%;padding:5px 0 ;line-height:20px;clear:both}
#m_sod_bsk_tot dd{float:left;width:60%;padding:5px 0;text-align:right;line-height:20px}
#m_sod_bsk_tot .sod_bsk_cnt{border-top:1px solid #ccc;font-weight:bold;margin-top:15px;line-height:25px}
#m_sod_bsk_tot .sod_bsk_cnt strong{font-size:1.25em}
#sod_bsk_act .btn_submit{height:45px;font-size:1.167em;font-weight:bold;width:100%;margin:10px 0;border-radius:50px}

.cart_list:after {display:block;visibility:hidden;clear:both;content:''} 
.cart_list .sod_li{background:#fff;border:1px solid #e7e8ef;border-bottom:1px solid #cbd0d5;margin:10px 0;position:relative;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,0.08);
box-shadow: 0 3px 6px rgba(0,0,0,0.08);}
.cart_list .sod_li:hover{border:1px solid #406fff;
-webkit-box-shadow: 0 3px 15px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 15px rgba(0,0,0,0.2);
box-shadow: 0 3px 15px rgba(0,0,0,0.2);}
.cart_list .sod_li:after {display:block;visibility:hidden;clear:both;content:''} 
.cart_list .li_op_wr{padding:20px;padding-left:140px;min-height:140px;position:relative}
.cart_list .li_name{padding:15px;border-bottom:1px solid #f3f3f3}
.cart_list .total_img {position:absolute;top:20px;left:20px}

.cart_list .li_prqty{background:#f8f9fa;padding:20px;float:left;width:75%}
.cart_list .li_prqty:after {display:block;visibility:hidden;clear:both;content:''} 
.cart_list .li_prqty_sp {display:block;width:25%;float:left;border-left:1px solid #eee;padding:0 10px;text-align:center;line-height:20px;}
.cart_list .li_prqty_sp:first-child{border-left:0}
.cart_list .li_prqty_sp span{display:block;color:#999;font-size:0.92em;margin-bottom:10px}
.cart_list .total_price{line-height:20px;background:#eef2f6;;color:#0074e9;padding:20px;float:left;width:25%;text-align:center}
.cart_list .total_price:after{display:block;visibility:hidden;clear:both;content:""}
.cart_list .total_price span{display:block;color:#999;font-size:0.92em;margin-bottom:10px}
.cart_list .mod_btn{padding:0 10px;height:30px;margin:20px 0;font-size:12px}

 @media (min-width: 970px){
    .sod_bsk_left{float:left;width:70%;padding:20px 5%;height:100%;background:#ededed}
    #sod_bsk{;position:relative;padding:0}
    #sod_bsk .sod_ta_wr{float:right;width:30%;height:100%;background:#f3f3f3;padding:40px;position:relative;z-index:9}
    #sod_bsk .sod_ta_wr.fixed{position:fixed;top:0;right:0;z-index:10}
    .go_shopping {}
    .cart_list .sod_li{margin:20px 0}
}

 @media (max-width: 969px){
    .cart_list .li_prqty{width:100%;padding:10px 0}
    .cart_list .total_price{width:100%;padding:15px}
    .cart_list .total_price span{display:inline-block;margin:0;color:#000;margin-right:10px;}
    #sod_bsk{padding:0}
 }              
/* 주문서 작성 */
#sod_frm {}
#sod_frm .od_prd_list{margin:20px 10px;background:#fff;}
.od_prd_list .td_chk{border-left:0;}
.od_prd_list .td_prd{border-left:0;position:relative;padding-left:100px;min-height:100px}
.od_prd_list .td_prd .sod_img{position:absolute;top:15px;left:10px}
.od_prd_list .td_prd .sod_name{min-height:80px}
.od_prd_list .td_prd .prd_name{font-size:1.167em}
.od_prd_list .total_prc{color:#ff006c;font-weight:bold;font-size:1.167em}

#sod_frm_orderer{padding:20px}
#sod_frm_taker{padding:20px}
#sod_frm_taker h2,#sod_frm_orderer h2{margin:10px 0;font-size:1.25em}
.odf_list li{}
.odf_list label,.odf_list strong{display:block;margin:7px 0 5px;color:#444;font-weight:normal}
.odf_list .frm_input{width:100%;margin:0 0 5px}
.odf_list .dlv_slt div {background:#fff;border:1px solid #ccc;margin:5px 0;padding:10px}
.odf_list .dlv_slt div label{display:inline-block;margin:3px 0;color:#000}
#order_address{display:block;width:80px;text-align:center;border: 1px solid #3476be;color: #3476be;;height:30px;line-height:28px;margin:5px 0 0;background:none}
.odf_list .ad_default{display:inline-block;margin:0}
.odf_list .btn_addsch{position:absolute;top:5px;right:5px;border-radius:3px;height:30px;}
.odf_list .add_num{position:relative;display:block;}
.odf_list  textarea{border: 1px solid #ccc;background: #fff;color: #000;vertical-align: middle;border-radius: 3px;padding: 5px;width:100%;height:70px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
#m_sod_frm_paysel {margin:10px 0 ;}
#m_sod_frm_paysel ul {margin:0 0 ;background:#fff;padding:0 0 10px;}
#m_sod_frm_paysel ul:after {display:block;visibility:hidden;clear:both;content:""}
#m_sod_frm_paysel li {float:left;padding:5px ;width:46%;height:25px}
#m_sod_frm_paysel .KPAY{background:url('../../../img/kpay.png') no-repeat;width:37px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%}
#m_sod_frm_paysel .PAYNOW{background:url('../../../img/paynow.png') no-repeat;width:46px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%;}
#m_sod_frm_paysel .PAYCO{background:url('../../../img/payco.png') no-repeat 1px;width:46px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%;}
.kakaopay_icon{background:url('../../../img/kakao.png') no-repeat ;height:21px;width:74px;display:inline-block;overflow:hidden;text-indent:-999px;background-size:100%}
.samsung_pay{background:url('../../../img/samsungpay.png') no-repeat ;height:12px;width:83px;display:inline-block;overflow:hidden;text-indent:-999px}

#sod_frm .sod_ta_wr{background: #f3f3f3;}
#sod_frm .btn_confirm{padding:0 20px 20px;background:#f3f3f3;margin:0 0 10px}
#sod_frm .btn_submit{width:100%;height:45px;font-size: 1.167em;font-weight: bold;margin:5px 0;border-radius:30px}
#sod_frm .btn_cancel,#sod_frm .btn01{width:100%;height:45px;line-height:43px;font-size:1.167em;font-weight: bold;padding:0;border-radius:30px}

#sod_frm_pay{padding:20px ;background:#f3f3f3}
#sod_frm_pay h2{margin:10px 0;font-size:1.25em}
#sod_frm_pay .cp_btn1,#sod_frm_pay .cp_cancel1{margin-top:0}
.odf_tbl{position:relative}
.odf_tbl table{background:#fff;width:100%;border-collapse:collapse;border-bottom:1px solid #eee;background:#fff}
.odf_tbl table th{border:1px solid #eee;border-right:0;padding: 10px;text-align:left;width:120px;font-weight:normal}
.odf_tbl table td{border:1px solid #eee;border-left:0;padding:7px 10px;text-align:right}

#sod_frm_pt_alert{margin:10px 0;color:#328abd;}

.sod_frm_point {margin-top:10px;clear:both;background:#fff}
.sod_frm_point div{background:#fff;border-bottom:1px solid #eee;padding:10px;text-align:right}
.sod_frm_point div:after {display:block;visibility:hidden;clear:both;content:''}
.sod_frm_point div label{float:left;line-height:30px}
.sod_frm_point div span{display:block;font-size:0.92em}
.sod_frm_point div span:after {display:block;visibility:hidden;clear:both;content:''}
.sod_frm_point div strong{float:left;color:#666;font-weight:normal}
.sod_frm_point #od_temp_point{height:30px;border:1px solid #ccc;text-align:right}

#settle_bank{background:#fff;border-bottom:1px solid #ccc;padding:10px;text-align:right; clear:both}
#settle_bank select{height:30px;margin:0 0 5px;width:100%;}
#settle_bank #od_deposit_name{height:30px;border:1px solid #ccc;text-align:center;}
#settle_bank label{float:left;line-height:30px}
#sod_frm_pt_info{border-bottom:1px solid #ccc}
.od_coupon{position:absolute;top:0;left:0;background:#fff;width:100%;z-index:99;border-radius:0 0 3px 3px;border:1px solid #eee;
-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
box-shadow: 1px 1px 5px rgba(0,0,0,0.4);}
.od_coupon h3{height:45px;line-height:45px;font-size:1.167em;padding:0 15px;text-align:left}
.od_coupon .tbl_head02{margin:0 15px 15px}
.od_coupon .tbl_head02 .btn_frmline {background:#3b67c2;color:#fff;border:0;padding:0 5px;line-height:25px }
.od_coupon .tbl_head02 td{text-align:left;background:#fff !important;border-right:0}
.od_coupon .tbl_head02 th{width:auto !important;border-left:0}
.od_coupon .tbl_head02 .td_mngsmall{width:60px;text-align:center}
.od_coupon .tbl_head02 .td_numbig{width:80px;text-align:right}
.od_coupon .btn_confirm{margin:20px ; }
.od_coupon .btn_confirm .btn_submit{height:40px;font-size:1.167em;font-weight:bold;width:100%;}
.od_coupon .btn_confirm .btn_close{position:absolute;top:0;right:0;width:45px;height:45px;border:0;background:none;color:#333;font-size:1.25em}

.cp_btn ,.cp_btn1{padding:0 7px;border:1px solid #38b2b9;color:#38b2b9;background:#fff;height:23px;line-height:21px;margin:5px 0 0 }
.cp_apply{background:#3b67c2;color:#fff;border:0;padding:0 5px;line-height:25px }
.cp_cancel,.cp_cancel1 {padding:0 7px;border:1px solid #aaa;color:#666;background:#fff;height:23px;line-height:21px;margin:10px 0 0 2px;}

#sod_frm_escrow{margin:10px;}
#sod_frm_escrow h2{font-size:1.25em}
#od_pay_sl h3{font-size:1.25em}

.sod_left{display: table-cell;width:65%;padding:0 10px;vertical-align:top;}
.sod_right{display: table-cell;width:35%;background:#eceff4;padding:20px;vertical-align:top;height:100%}
.sod_right #sod_frm_pay{padding:0 ;background:transparent}
 #sod_frm .sod_right .btn_confirm{padding:0 ;background:transparent;margin:20px 0}

/* 쿠폰 */
#scp_list li{position:relative;padding: 0}
#scp_list .li_pd{position:relative;padding:10px}
#scp_list .li_title{font-weight:bold;font-size:1.167em;}
#scp_list .pd_price{position:absolute;top:10px;right:10px}
#scp_list .pd_price strong{color:#ff006c;font-size:1.5em;}
#scp_list .li_target{color:#666;margin:5px 0 0;background:#f3f3f3;border-top:1px dotted #ccc;padding:5px 10px;}
#scp_list .pd_date{float:right;color:#777}

/* 배송지 목록 */
#sod_addr {}
#sod_addr ul {margin:0;padding:0;list-style:none}
#sod_addr li {position:relative;padding:0;border-bottom:1px solid #e9e9e9}
#sod_addr .addr_title{border-bottom:1px solid #ddd;padding:10px 10px 10px 30px;}
#sod_addr .ad_subject{height:30px ;border:1px solid #bbb;width:100%;padding:0 10px}
#sod_addr .ad_chk{position:absolute;top:17px;left:10px}
#sod_addr .addr_info{padding:15px}
#sod_addr .addr_name{margin:0 0 10px;font-weight:bold;font-size:1.083em}
#sod_addr .addr_addr{line-height:1.5em;margin:5px 0;}
#sod_addr .addr_tel{margin:5px 0;color:#666}
#sod_addr .fa-mobile{font-size:14px}
#sod_addr .addr_btn{border-radius:0 0 3px 3px;padding:10px}
#sod_addr .addr_btn:after {display:block;visibility:hidden;clear:both;content:""}
#sod_addr .sel_address{width:32%;float:left;margin-right:1%;height:30px;background:none;border:1px solid #333;color:#333;;padding:0 5px;}
#sod_addr .del_address{display:block;width:32%;text-align:center;float:left;margin-right:1%;border:1px solid #aaa;background:none;color:#888;padding:0 5px;height:30px;line-height:28px;vertical-align:middle}
#sod_addr input[type="radio"]{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;text-indent:-999px;left: 0;z-index: -1px;}
#sod_addr .add_lb {display: inline-block;float:left;width:32%;text-align:center;border:1px solid #4162ff;color:#4162ff;height:30px;line-height:28px}
#sod_addr input[type="radio"]:checked+.add_lb {;z-index:3;background:#4162ff;color:#fff}

/* 주문내역 */
#sod_v {margin:0 20px}
#sod_v .td_stat {width:100px}
#sod_v_info {margin:0 0 10px;padding:10px;background:#e6d5d2;color:#883d1a;text-align:center;border-bottom:1px solid #c3bcb1}

/* 주문상세내역 */
#sod_list_inq{}
.sod_fin_list .sod_ta_wr{padding:15px;background:#f3f3f3}
.sod_fin_list h2 {position:absolute;border:0;font-size:0;line-height:0;content:""}
.sod_fin_list .prqty_stat{position:absolute;top:0;right:0;padding:3px 5px;background:#6583c5;color:

이 질문에 댓글 쓰기 :

답변 1

드롭다운을 하실려면 

category.php 에 문법에 해당 메뉴를 감싸는 부분과 전체적인 div에 맞는 부분을 잘라내시고,

해당되는 부분에 메뉴를 다시짜넣어서 만드셔야됩니다.

css. .js파일로 메뉴테스트 완료하신다음, 그다음에 잘라낸 부분에 프로그래밍작업을 입히시면 금방되실거에요.

답변을 작성하시기 전에 로그인 해주세요.
전체 3

회원로그인

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