모바일에서 네비게이션 메뉴 접기

모바일에서 네비게이션 메뉴 접기

QA

모바일에서 네비게이션 메뉴 접기

본문

1893393726_1520326740.7843.jpg

 

모바일에서 카테고리를 누르면

중분류까지 다 펼쳐져 보여서

너무 복잡해서요

대분류들만 먼저 보여지고

화살표를 누르면 중분류들이 펼쳐지게 하고 싶은데

 

default.css 에는

#allMenu{position:fixed; display:none; left:0; top:0; bottom:0;   right:0; z-index:99999;  background:rgba(0,0,0,.5);}
#allMenu section{position:absolute; top:224px;  background:#FFF; left:50%; margin-left:-600px; padding:20px; box-shadow:1px 1px 10px rgba(0,0,0,.8);box-sizing:border-box; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
#allMenu section:after {display:block;visibility:hidden;clear:both;content:""}
#allMenu.open{display:block; }
#allMenu:after {display:block;visibility:hidden;clear:both;content:""}
#allMenu .toggleMenu{display:none;}
#allMenu dd{width:32.33%; float:left; margin:.5%; border:1px solid #DDD; height:200px;  box-sizing:border-box; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
#allMenu dd:nth-child(3n+2){clear:both;}
#allMenu ul:after {display:block;visibility:hidden;clear:both;content:""}
 
#allMenu dd > a{  font-size:16px; padding:10px; font-family:'ls'; display:block;  border-bottom:1px solid #EEE; }
#allMenu dd > ul{_display:inline-block;overflow:hidden;padding:10px; line-height:30px; zoom:1}
#allMenu dd > ul:after{display:block;clear:both;content:''; }
#allMenu dd > ul li{float:left; width:50%; }
#allMenu dd > ul li a{ display:block; padding:5px 0; line-height:20px;}
#allMenu dd.dd10 > ul li{width:100%;}
 

이렇게 써있고

 

head.php 에는

 

<div id="allMenu"> 
  <a href="javascript:;" onclick="$('#allMenu').toggleClass('open');" class="closeMenu">닫기</a>
  <section  class="wrap">
  <?
  include(G5_PATH.'/board_menu.php');
  ?>
  </section>
</div>
 

board_menu.php 에는

 <dl>
   <dt><a href="javascript:;" onclick="$('#allMenu').toggleClass('open');" class="toggleMenu">전체메뉴</a></dt><!--
    --><?
   $sql = " select * from {$g5['group_table']} where gr_order !='0' order by gr_order";
   $result = sql_query($sql);
   while ($group_row = sql_fetch_array($result)){
    $sql = " select * from {$g5['board_table']} where gr_id='{$group_row['gr_id']}' and bo_use_search !='' order by bo_order";
    $board_result = sql_query($sql);
    $board_list = array();
    for($i=0; $board_row = sql_fetch_array($board_result); $i++){
     $board_list[$i] = $board_row;
     $board_link[$i] = G5_BBS_URL."/board.php?bo_table=".$board_list[$i][bo_table];
    }
    $link = G5_BBS_URL."/board.php?bo_table=".$board_list[0][bo_table];
   ?><!--
    --><dd class="dd<?=$group_row[gr_id]?>">
    <a href="<?php echo $link ?>"><?=$group_row[gr_subject]?></a>
    <?
    if(count($board_list)){
    ?>
    <ul>
     <? for($i=0; $i<count($board_list); $i++){?>
     <li><a href="<?php echo $board_link[$i] ?>" ><?=$board_list[$i][bo_subject]?></a></li>
     <?}?>
     <? if($group_row['gr_id']==9 && $is_admin){?>
     <li><a href="<?=G5_BBS_URL?>/board.php?bo_table=quick" >빠른 상담신청내역</a></li>
     <li><a href="<?=G5_BBS_URL?>/board.php?bo_table=kakao" >카카오상담내역</a></li>
     
      <?}?>
    </ul>
    <?}?>
   </dd><!--
    --><?}?>
  </dl>

 

요렇게 써있습니다.

대분류만 남기고 중분류를 접었다 펼칠수 있도록 수정할 수 있을까요??

고수님들 도와주세요 ㅠㅜ

이 질문에 댓글 쓰기 :

답변 1

위의 html이

ul > li(대분류) > ul > li(중분류)

라면,

 

간단히 로직만 설명드리자면

기본적으로 중분류를 감싸는 ul의 height 값을 0 으로 두고, overflow:hidden 으로 두시거나

하셔서 기본값으로 없애신 다음에.

 

ul > li(대분류) 클릭시

제이쿼리로 아래 ul의  height 값을 중분류의 ( li 높이 * li 수 ) 만큼 해주시어

animate 해주시면 될 것 같습니다.

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

회원로그인

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