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

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

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

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

본문

안녕하세요.^^

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

먼저 주소는 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를 줘도 정렬이 안되네요 ㅠㅠ

 

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

이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기 이 글을 내 구글플러스 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 1

채택됨

내가누구야님의 답변

우선 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() { 으로 변경하시면

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

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

주소복사
채택됨
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 54,820 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중인 포인트경매

  1. 첨단보안 역해킹과 해커박스

    참여9 회 시작17.12.15 10:22 종료17.12.20 10:22
  2. 홈플러스 모바일 쿠폰 50,000원

    참여77 회 시작17.12.13 22:51 종료17.12.18 22:51
  3. MySQL Advanced Class (그누보드5는 MySQL을 사용합니다.)

    참여14 회 시작17.12.13 10:17 종료17.12.18 10:17

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT