모바일 2차 메뉴
본문
안녕하세요 현재 스카이라이퍼님이 올려주신 채러티비즈니스테마를 이용중입니다.
PC버전에서는 아무 문제가 없지만 모바일에서는 2차메뉴 들이 열리지 않아서 문의글 남깁니다.
초보지만 아무리열심히 해도 안되네요 고수님들 도와주세요ㅠㅠ
현재 아래와 같이 되어있습니다.
PC버전<head.php>:146줄내용
<li>
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"><?php echo $row['me_name'] ?></a>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
if($k == 0)
echo '<span class="bg"><i class="ion-ios-plus-empty visible-xs"></i></span><ul class="sub-nav">'.PHP_EOL;
?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></li>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
Mobile버전<head.php>:40줄내용
<?php
$menu_datas = get_menu_db(1, true);
$i = 0;
foreach( $menu_datas as $row ){
if( empty($row) ) continue;
?>
<li class="gnb_1dli">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
if($k == 0)
echo '<button type="button" class="btn_gnb_op"><span class="sound_only">하위분류</span></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>
답변 1
일단 따로 알려주시던 주소대로 확인해본결과 모바일에서는 메뉴1차를 클릭하면 2차가 펼치는 동시에 페이지가 이동이 되는것같은데
일단 해결 방법은 두가지입니다. (이 예시는 모바일에서만 적용한다는 과정에 설명드려요)
첫번째 방법은 메뉴를 그대로 쓰실거면 서브 메뉴가 달려 있는 1차 메뉴에 링크를 빼시면 될것같아요 그러고 클릭 했을때 펼침메뉴로 만들면 되요 즉 1차 메뉴의 링크 빼고 서브 메뉴에 또 추가를 합니다. 예를들어 회사소개 가 1차 메뉴일경우 그 밑에 서브메뉴도 회사소개를 한번 더 추가를 해서 링크 이동을 하면 될거에요 1차 메뉴에 회사 소개는 링크에 #을 추가하시고 클릭했을때 event.preventdefault(); 로 누르지 않도록 유도하면되요
두번째 방법은 반응형 페이지니까 반응형 메뉴를 새로 추가 하면됩니다. 이게 피씨에서는 그대로 위에 메뉴를 쓰시고 모바일로 들어가면 반응형 메뉴를 보여드려서 하면되요 그니까 미디어 쿼리를 쓰셔서 786정도 사이즈를 줄이게 되면 피씨에서 쓰셨던 메뉴를 감추고 새로 반응형 메뉴를 보임 처리하면 될거에요 약간 좀 비효율적이지만 이렇게 쓰는 방법도 있습니다.
릴보이즈님 답변 대단히 감사합니다.
감동이에요 ㅠㅠ
제가 초보라 알려주신대로 차근히 해보겠습니다 복많이받으세요!!
오!! 성공했어요!!ㅠㅠㅠㅠㅠ감사합니다 !!( ^ ^ )( _ _ )♥
