모바일에서 메뉴펼침문의 - 특정메뉴 하나만 펼쳐져 있게 하려 합니다.

모바일에서 메뉴펼침문의 - 특정메뉴 하나만 펼쳐져 있게 하려 합니다.

QA

모바일에서 메뉴펼침문의 - 특정메뉴 하나만 펼쳐져 있게 하려 합니다.

본문

안녕하세요~

모바일버전에서 메뉴를 클릭시에 대분류만 보이고 눌렀을때 아래로 중분류가 나오는 모양입니다.

메뉴 하나를 항상 펼쳐있게 하려면 어디를 수정해야 할까요?? 

고수님들 체크 부탁드립니다. ^^ 

 

모바일에서 봐주세요~

 

 

 

 

2105855762_1597899464.4571.png

 

 

 

2105855762_1597899481.5006.png

 

 

 

 

 

 

소스 입니다.

 

 

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if (G5_IS_MOBILE) {
    include_once(G5_THEME_PATH.'/head.php');
    return;

}
include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
include_once(G5_LIB_PATH.'/latest_group.lib.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
include_once(G5_LIB_PATH.'/groupmenu.lib.php');
?>

<!-- mobile 메뉴 시작 { -->      
<nav class="pushy pushy-left" data-focus="#first-link">
    <?php if ($is_member) { ?>
    <div class="meminfo">
        <span class="profile_img">
            <?php echo get_member_profile_img($member['mb_id']); ?>
            <a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=register_form.php" id="ol_after_info" title="정보수정"><i class="fa fa-cog" aria-hidden="true"></i><span class="sound_only">정보수정</span></a>
        </span>
        <strong><?php echo $nick ?>님</strong>
        <?php if ($is_admin == 'super' || $is_auth) {  ?><a href="<?php echo G5_ADMIN_URL ?>" class="btn_admin btn_04">관리자</a><?php }  ?>
        <ul>
            <li>
                <a href="<?php echo G5_BBS_URL ?>/logout.php" id="ol_after_logout">로그아웃</a>
                <a href="<?php echo G5_BBS_URL ?>/scrap.php" target="_blank" id="ol_after_scrap" class="win_scrap">스크랩</a>
            </li>
        </ul>
    </div>
    <?php }  ?>
    
    <div class="linkmenu">
        <ul>
            <!--<li><a href="<?php echo G5_URL ?>/contents/website-total.php">Website link</a></li>//-->
            <li><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=exhibition">Exhibition / Festival Program</a></li>
        </ul>
    </div>
    <div class="pushy-content">
        <ul>
            <li class="pushy-submenu">
                <a href="<?php echo G5_BBS_URL ?>/group_style.php"><i class="icon-right-open"></i></a>
                <button id="first-link">Style & Trend</button>
                <ul>
                    <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=Fashion">패션</a></li>
                    <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=Beauty">뷰티</a></li>
                    <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=Living">리빙</a></li>
                    <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=Life">라이프/문화</a></li>
                </ul>
            </li>
            
            <li class="pushy-submenu">
                <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=brand" class="mmenu">Brand</a>
            </li>
            
            <li class="pushy-submenu">
                <a href="<?php echo G5_BBS_URL ?>/group_trend.php"><i class="icon-right-open"></i></a>
                <button>Sympathy Trip Cover</button>
                <ul>
                   
                    <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=trendfurniture">유럽</a></li>
                     <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=trendinterior">아시아</a></li>
                    <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=tripame">미주</a></li>
                </ul>
            </li>
            
            <li class="pushy-submenu">
                <a href="<?php echo G5_BBS_URL ?>/group_inspired.php"><i class="icon-right-open"></i></a>
                <button>Space-Time Inspired</button>
                <ul>
                   
                    <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=travellife">Travel life</a></li>
                     <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=dailylife">Daily life</a></li>
                     
                       <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=musiclife">music life</a></li>
                       
                       
                </ul>
            </li>      

            
            <li class="pushy-submenu">
                <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=event"><i class="icon-right-open"></i></a>
                <button>News & Notice</button>
                <ul>
                   <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=event">Event & Info</a></li>
                    <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=notice">News</a></li>
                </ul>
            </li>
            
            
            <li class="pushy-submenu">
                <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=free"><i class="icon-right-open"></i></a>
                <button>Community</button>
                <ul>
                    <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=free">자유게시판</a></li>
                    <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=qa">질문과 답변</a></li>
                    <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=review">사용후기</a></li>
                    <li class="pushy-link"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=visit">방문/체험기</a></li>
                    
                    
                </ul>
            </li>
            
                  
            
            <li class="pushy-submenu">
                <a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=interior1" class="mmenu">Lifestyle ZONE</a>
            </li>
        </ul>
    </div>
</nav>
<div class="site-overlay"></div>  

<!-- PC콘텐츠 시작 { -->
<div id="wrapper">

    <!-- 상단 시작 { -->
    <div id="hd">
        <h1 id="hd_h1"><?php echo $g5['title'] ?></h1>

        <div id="skip_to_container"><a href="#container">본문 바로가기</a></div>

        <?php
        if(defined('_INDEX_')) { // index에서만 실행
            include G5_BBS_PATH.'/newwin.inc.php'; // 팝업레이어
        }
        ?>       
        <div id="hd_wrapper">
            <div id="w_wrapinner">
                <div id="logo">
                    <p><SCRIPT language="JavaScript"> 
                    <!--
                    var today = new Date();
                    var day = today.getDay(); 
                    var year = today.getYear(); 
                    if (year < 2000) year+=1900; 
                    var month = today.getMonth(); 
                    var date = today.getDate(); 
                    var week; 

                    if (day == 0) week = " 편집일:" ; 
                    if (day == 1) week = " 편집일:" ; 
                    if (day == 2) week = " 편집일:" ; 
                    if (day == 3) week = " 편집일:" ; 
                    if (day == 4) week = " 편집일:" ; 
                    if (day == 5) week = " 편집일:" ; 
                    if (day == 6) week = " 편집일:" ; 
                    document.write(""+week+""); 
                    document.write(""+year+"년"+(month+1)+"월"+date+"일"); 

                    //현재 날짜,요일을 표시하는 스크립트 --> 
                    </SCRIPT> 
                    </p>
                    <a href="<?php echo G5_URL ?>"><img src="<?php echo G5_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>"></a>
                </div>

                <div class="hd_sch_wr">
                    <fieldset id="hd_sch" >
                        <legend>사이트 내 전체검색</legend>
                        <form name="fsearchbox" method="get" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);">
                        <input type="hidden" name="sfl" value="wr_subject||wr_content">
                        <input type="hidden" name="sop" value="and">
                        <label for="sch_stx" class="sound_only">검색어 필수</label>
                        <input type="text" name="stx" id="sch_stx" maxlength="20" placeholder="검색어를 입력해주세요">
                        <button type="submit" id="sch_submit" value="검색"><i class="fa fa-search" aria-hidden="true"></i><span class="sound_only">검색</span></button>
                        </form>

                        <script>
                        function fsearchbox_submit(f)
                        {
                            if (f.stx.value.length < 2) {
                                alert("검색어는 두글자 이상 입력하십시오.");
                                f.stx.select();
                                f.stx.focus();
                                return false;
                            }

                            // 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.
                            var cnt = 0;
                            for (var i=0; i<f.stx.value.length; i++) {
                                if (f.stx.value.charAt(i) == ' ')
                                    cnt++;
                            }

                            if (cnt > 1) {
                                alert("빠른 검색을 위하여 검색어에 공백은 한개만 입력할 수 있습니다.");
                                f.stx.select();
                                f.stx.focus();
                                return false;
                            }

                            return true;
                        }
                        </script>
                    </fieldset>
                </div>
                <div class="tnm">
                    <div class="tna">
                        <ul>
                            <!--사이트링크감춤<li><a href="<?php echo G5_URL ?>/contents/website-total.php">Website link</a></li>//-->
                            <li><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=exhibition">Exhibition / Festival Program</a></li>
                        </ul>
                    </div>
                    
                    <div class="tnb">
                        <ul>
                            <li class="m-search"><button data-js="open"><i class="icon-loupe"></i></button></li>
                            <?php if ($is_member) { ?>
                            <li class="join"><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>/register_form.php">Myinfo</a></li>
                            <li class="logout"><a href="<?php echo G5_BBS_URL ?>/logout.php"><i class="icon-men2"></i><span>Logout</span></a></li>
                            
                            <?php } else {  ?>
                            <li class="join"><a href="<?php echo G5_BBS_URL ?>/register.php">Join</a></li>
                            <li><?php echo outlogin('theme/layerLogin'); ?></li>
                            <?php }  ?>
                            <li><button class="menu-btn"><i class="icon-list-menu"></i></button></li>
                        </ul>
                    </div>
                    <div class="tnbadmin">
                        <ul>
                            <?php if ($is_admin) {  ?>
                            <li class="tnb_admin"><a href="<?php echo G5_ADMIN_URL ?>"><b><i class="fa fa-user-circle" aria-hidden="true"></i> 관리자</b></a></li>
                            <?php }  ?>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

<!-- 모바일 검색창 시작 --> 
<div class="popupsearch">
    <fieldset id="hd_sch" >
        <legend>사이트 내 전체검색</legend>
        <form name="fsearchbox" method="get" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);">
            <input type="hidden" name="sfl" value="wr_subject||wr_content">
            <input type="hidden" name="sop" value="and">
            <label for="sch_stx" class="sound_only">검색어 필수</label>
            <input type="text" name="stx" id="sch_stx" maxlength="20" placeholder="검색어를 입력해주세요">
            <button type="submit" id="sch_submit" value="검색"><i class="fa fa-search" aria-hidden="true"></i><span class="sound_only">검색</span></button>
        </form>

        <script>
            function fsearchbox_submit(f)
                {
                if (f.stx.value.length < 2) {
                    alert("검색어는 두글자 이상 입력하십시오.");
                    f.stx.select();
                    f.stx.focus();
                    return false;
                }
                // 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.
                var cnt = 0;
                    for (var i=0; i<f.stx.value.length; i++) {
                    if (f.stx.value.charAt(i) == ' ')
                    cnt++;
                }

                if (cnt > 1) {
                    alert("빠른 검색을 위하여 검색어에 공백은 한개만 입력할 수 있습니다.");
                    f.stx.select();
                    f.stx.focus();
                    return false;
                    }
                return true;
                }
        </script>
    </fieldset>
    <button name="close" class="closebtn">Close</button>
</div>
<script src="<?php echo G5_THEME_URL ?>/js/popsearch.js"></script>    
<!-- //모바일 검색창 끝 -->

        <nav id="gnb">
            <h2>메인메뉴</h2>
            <div class="gnb_wrap">
                <ul id="gnb_1dul">
                    <?php
                    $sql = " select *
                        from {$g5['menu_table']}
                        where me_use = '1'
                        and length(me_code) = '2'
                        order by me_order, me_id ";
                    $result = sql_query($sql, false);
                    $gnb_zindex = 999; // gnb_1dli z-index 값 설정용
                    $menu_datas = array();

                    for ($i=0; $row=sql_fetch_array($result); $i++) {
                        $menu_datas[$i] = $row;

                        $sql2 = " select *
                                    from {$g5['menu_table']}
                                    where me_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);
                        for ($k=0; $row2=sql_fetch_array($result2); $k++) {
                            $menu_datas[$i]['sub'][$k] = $row2;
                        }
                    }

                    $i = 0;
                    foreach( $menu_datas as $row ){
                        if( empty($row) ) continue; 
                    ?>
                    <li class="gnb_1dli" style="z-index:<?php echo $gnb_zindex--; ?>">
                        <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 '<span class="bg">하위분류</span><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"><?php echo $row2['me_name'] ?></a></li>
                        <?php
                        $k++;
                        }   //end foreach $row2

                        if($k > 0)
                            echo '</ul>'.PHP_EOL;
                        ?>
                    </li>
                    <?php
                    $i++;
                    }   //end foreach $row

                    if ($i == 0) {  ?>
                        <li class="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
                    <?php } ?>
                </ul>
            </div>
        </nav>

        <!-- } 상단 끝 -->
    </div>
  
       
<div id="container">
    <?php if (!defined("_INDEX_")) { ?><h2 id="container_title"><span title="<?php echo get_text($g5['title']); ?>"><?php echo get_head_title($g5['title']); ?></span></h2><?php }

 

이 질문에 댓글 쓰기 :

답변 1

pushy-submenu-open

pushy-submenu-closed

로 제어를 하시는것같은데

다른 메뉴를 눌렀을때 open이 closed가 되면서 닫히겠죠?

그럼 현재메뉴는 open을 유지시켜주도록 처리를 하거나

only 등 추가로 클래스를 만들어서 closed가 되도 닫히지 않도록 처리해주시면 되겠네요

현재 접속한 페이지와 메뉴의 링크를 비교해서 해당 메뉴에 추가적으로 클래스를 주고
해당 클래스에 open에 적용된 css를 넣어주면 해당 메뉴에 closed클래스가 들어가더라도 추가클래스로 적용시킨 css가 메뉴가 유지가 될거에요
소스로 풀기엔 php와 css 두가지가 다 적용되야하는 부분이라 무리가 있어보이네요
스킨쪽에서 현재메뉴에 클래스 유지하는방법 한번 찾아보시고 클래스추가와 css추가만 해주시면 잘될거에요~

현재 제작되어있는 lnb쪽 소스 참고하셔서 현재메뉴의 이름이 어떻게 뿌리지는지 확인하신 후 비슷한 방식으로 gnb에도 현재메뉴에 추가클래스를 넣어주시고 open에 사용된 css를 추가클래스에 입혀주시면 될거같네요 ^^

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

회원로그인

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