모바일 메뉴클릭시 바로 하위메뉴가 나오게하고싶습니다.

모바일 메뉴클릭시 바로 하위메뉴가 나오게하고싶습니다.

QA

모바일 메뉴클릭시 바로 하위메뉴가 나오게하고싶습니다.

본문

안녕하세요.^^

모바일 메뉴에서 화살표말고 메뉴글씨를 클릭시 하위메뉴가 나오게하고싶습니다.

먼저 주소는 http://camlook.co.kr/shop/ 여기입니다.(모바일버전으로 봐주세요 )

 

d4b1d59ab5e1bbc70e16c5592ef16569_1489648569_7163.png

분류글씨를 클릭하면 바로 하위분류가 나오게하고싶습니다.. 현재는 화살표를 클릭해야만 하위메뉴가 나오는구조인데 어떻게 소스를 변형해야하나요..?

 

제가 메뉴소스 구성을

<?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;
}
?>

<button type="button" id="hd_ct">분류</button>
<div id="category">
    <div class="ct_wr">
        <ul class="cate_tab">
            <li><a href="#" class="ct_tab_sl">CATEGORY</a></li>
            <li><a href="<?php echo G5_SHOP_URL; ?>/mypage.php">MY PAGE</a></li>
            <li><a href="<?php echo G5_SHOP_URL; ?>/cart.php">CART</a></li>
        </ul>
        <?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 id="1">
             <a onclick="1"> 예술인력소</a>

                <button class="sub_ct_toggle ct_op">예술인력소 하위분류 열기</button>
<ul class="sub_cate sub_cate1">
                    <li>
                        <a href="http://camlook.co.kr/bbs/write.php?bo_table=a1">- 예술인력일원되기</a>
       <a href="http://camlook.co.kr/bbs/write.php?bo_table=a2">- 예술인력소이용하기</a>
      
                                            </li>
                </ul>
   
            </li>
<li>
               공모전 +
                <button class="sub_ct_toggle ct_op">내 공모전 설정하기 하위분류 열기</button>
<ul class="sub_cate sub_cate1">
                    <li>
                       <a href="http://camlook.co.kr/bbs/board.php?bo_table=b1">- 현재 공모전</a>
        <a href="http://camlook.co.kr/bbs/board.php?bo_table=b2">- 지원, 교육프로그램</a>
          <a href="http://camlook.co.kr/bbs/board.php?bo_table=b3">- 대외활동</a>
                                            </li>
                </ul>
            </li>
   <li>
                스푼마켓
                <button class="sub_ct_toggle ct_op">스푼마켓 하위분류 열기</button>
<ul class="sub_cate sub_cate1">
                    <li>
                        <a href="http://camlook.co.kr/shop/list.php?ca_id=10">- 스푼마켓</a>
        <a href="http://camlook.co.kr/bbs/board.php?bo_table=c1">- 판매등록신청</a>
          <a href="http://camlook.co.kr/shop/cart.php">- 장바구니</a>
       <a href="http://camlook.co.kr/shop/wishlist.php">- 찜한상품</a>
         <a href="http://camlook.co.kr/shop/orderinquiry.php">- 주문조회</a>                                        
           </li>
</ul>
</li>
            <li>
                공동구매
                <button class="sub_ct_toggle ct_op">ㅇㅇㅇㅇ공동구매 하위분류 열기</button>
<ul class="sub_cate sub_cate1">
                    <li>
                        <a href="http://camlook.co.kr/shop/list.php?ca_id=3010">- 공동구매 신청</a>
     
                                            </li>
           </ul>
           </li>
           <li>
               스푼갤러리
                <button class="sub_ct_toggle ct_op">스푼갤러리 하위분류 열기</button>
<ul class="sub_cate sub_cate1">
                    <li>
                        <a href="http://camlook.co.kr/bbs/board.php?bo_table=e1">- 졸업전시정보</a>
       <a href="http://camlook.co.kr/bbs/board.php?bo_table=e2">- 현재전시정보</a>
                                               </li>
                </ul>
            </li>
      <li>
                커뮤니티
                <button class="sub_ct_toggle ct_op">커뮤니티 하위분류 열기</button>
<ul class="sub_cate sub_cate1">
                    <li>
                        <a href="http://camlook.co.kr/bbs/board.php?bo_table=f1">- 자유게시판</a>
       <a href="http://camlook.co.kr/bbs/board.php?bo_table=f2">- UCC게시판</a>
        <a href="http://camlook.co.kr/bbs/board.php?bo_table=f3">- 팀원모집게시판</a>
          <a href="http://camlook.co.kr/bbs/board.php?bo_table=f4">- 대외활동게시판</a>
                                 </li>
</ul>
</li>
<li>
               고객센터
                <button class="sub_ct_toggle ct_op">고객센터 하위분류 열기</button>
<ul class="sub_cate sub_cate1">
                    <li>
                        <a href="http://camlook.co.kr/bbs/faq.php?fm_id=1">- F&Q</a>
       <a href="http://camlook.co.kr/bbs/qalist.php">- 1:1문의</a>
        <a href="http://camlook.co.kr/bbs/board.php?bo_table=g">- 신고하기</a>
                                 </li>
</ul>
</li>

         
        <?php
        }

        if($i > 0)
            echo '</ul>'.PHP_EOL;
        else
            echo '<p>등록된 분류가 없습니다.</p>'.PHP_EOL;
        ?>
        <button type="button" class="pop_close"><span class="sound_only">카테고리 </span>닫기</button>
    </div>
</div>

<script>
$(function (){
    var $category = $("#category");

    $("#hd_ct").on("click", function() {
        $category.css("display","block");
    });

    $("#category .pop_close").on("click", function(){
        $category.css("display","none");
    });

    $("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();
        }
    });
});
</script> 

이런식으로 하였는데 여기서 수정이 가능할가요? ㅠㅠ

 

두번째로는 메인에 진열되는 상품을 가운데 정렬을 하려면 어떻게 해야할가요..

div에서 float:center를 줘도 정렬이 안되네요 ㅠㅠ

 

번거로우시겠지만 한번만 답변해주시면 정말 감사드리겠습니다. 

이 질문에 댓글 쓰기 :

답변 2

우선 float 은 센터 정렬이 존재 하지 않습니다.

 

일반적으로 div 의 센터를 정렬하는 방법으로는 margin:0 auto; 를 이용하여 치수값을 가지고 가운데 정렬하는 방법이 있고 응용방법등으로는 내부 요소를 하나 만들어 상위 부모 div 또는 ul, li 등이 text-align:center 정렬하는 방법들을 이용할 수 있습니다. (상황에 맞게 응용하셔야 겠지만요 ^^; )

 

버튼식으로 된 제이쿼리 이벤트 코드를 하나의 덩어리로 만들고 싶으신 거라면 

 

$("button.sub_ct_toggle").on("click", function() { <-- 코드를 수정하시는 방법이 있으시겠네요. 


현재는 버튼의 sub_ct_toggle 클래스를 클릭하면 동작하도록 구성된 이벤트로 보여집니다.

버튼의 상위 li 에 클래스를 주시고 $('클래스명').on("click", function() { 으로 변경하시면

무난하게 동작할 것으로 보여집니다.

(실제 적용해보지는 않았습니다.)

            <li class="gnb_1dli">
                    <!--a href="<?php echo $row['me_link']; ?>" class="gnb_1da btn_gnb_op-nav"><?php echo $row['me_name'] ?></a-->
                    <?php
                    $sql2 = " select *
                                            from {$g5['menu_table']}
                                            where me_mobile_use = '1'
                                                and length(me_code) = '4'
                                                and substring(me_code, 1, 2) = '{$row['me_code']}'
                                            order by me_order, me_id ";
                    $result2 = sql_query($sql2);
                    if(!(mysql_num_rows($result2) >= 2)) {
                        echo '<a href="'.$row['me_link'].'" class="gnb_1da btn_gnb_op-nav">'.$row['me_name'].'</a>';
                    } else {
                    echo '<a href="#" class="gnb_1da btn_gnb_op-nav">'.$row['me_name'].'</a>';
                    }

                    for ($k=0; $row2=sql_fetch_array($result2); $k++) {
                            if($k == 0)
                                    echo '<button type="button" class="btn_gnb_op">하위분류</button><ul class="gnb_2dul">'.PHP_EOL;
                    ?>
                            <li class="gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><span></span><?php echo $row2['me_name'] ?></a></li>
                    <?php
                    }

                    if($k > 0)
                            echo '</ul>'.PHP_EOL;
                    ?>
            </li>
 

답변을 작성하시기 전에 로그인 해주세요.
전체 314
QA 내용 검색

회원로그인

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