레이아웃 사이드메뉴 열고 펼침 질문 드립니다

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
레이아웃 사이드메뉴 열고 펼침 질문 드립니다

QA

레이아웃 사이드메뉴 열고 펼침 질문 드립니다

본문

31429059_1716457839.0267.jpg


현재 사이드 메뉴가 이런식으로 되어있습니다 

메인 - 공지사항

   서브1 - 공지사항

   서브2 - 이벤트

 

 

메인-공지사항 옆에 버튼을 추가하여 서브1,2메뉴가 접히고 펼쳐지도록 만들고 싶습니다

열렸을경우
공지사항 ↑


닫혔을경우 
공지사항 ↓



코드는 아래와 같습니다 

 

파일위치 : theme/themename/layout/sidebar

siderbar.css
------------------------------------------------------------

#nt_sidebar,
#nt_sidebar_mask
{transition:all .16s cubic-bezier(.7,0,.3,1);transform:all .16s cubic-bezier(.7,0,.3,1);-webkit-transition:all .16s cubic-bezier(.7,0,.3,1);}

/* sidebar Box */
#nt_sidebar.active {left:0;}
#nt_sidebar {position:fixed; background:#ebebeb; z-index:500; top:0; width:280px; box-shadow:0 0 5px 5px rgba(50, 60, 70, 0.15); -webkit-box-shadow:0 0 5px 5px rgba(50, 60, 70, 0.15); -moz-box-shadow:0 0 5px 5px rgba(50, 60, 70, 0.15);}
#nt_sidebar .sidebar-head {}
#nt_sidebar .sidebar-head h3 {height:36px;}
#nt_sidebar .sidebar-head h3 a {font-size:20px;}
#nt_sidebar .sidebar-head h3 a.logo {font-size:14px;}
#nt_sidebar .sidebar-content {height:calc(100vh - 36px); overflow-x:hidden;-webkit-overflow-scrolling:touch;}
#nt_sidebar .sidebar-content .widget {padding:10px; margin:10px; background:#fff; border-radius:10px; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);}


@media (min-width:768px) {
    #nt_sidebar {left:-320px;}
}
@media (max-width:767px) {
    #nt_sidebar {left:-320px;}
}

/* Mask */
#nt_sidebar_mask.active {display:block;}
#nt_sidebar_mask {display:none; position:fixed; z-index:499; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75);}
------------------------------------------------------------

 

sidebar.js

------------------------------------------------------------

// Sidebar

$(document).ready(function () {

    $(document).on('click', '#fullNavi , #fullTopNavi', function (e) {
        e.preventDefault();
        $('html, body').css({'overflow': 'hidden', 'height': '100%'});
        $('#nt_sidebar').addClass("active");
        $('#nt_sidebar_mask').addClass("active");
    });

    // Sidebar Close
    $(document).on('click', '.sidebar-close', function (e) {
        e.preventDefault();
        $('html, body').css({'overflow': '', 'height': ''});
        $('#nt_sidebar').removeClass("active");
        $('#nt_sidebar_mask').removeClass("active");

    });

});
//(사이드메뉴를 열어주는 버튼을 열고닫는 스크립트 입니다)

------------------------------------------------------------

 

 

sidebar.php

------------------------------------------------------------
            <div id="nt_sidebar_menu" class="menuBox">
                <ul>
                <?php for ($i=0; $i < $menu_cnt; $i++) {
                    $me = $menu[$i];
                ?>
                <li>
                    <a href="<?php echo $me['href'];?>" class="line <?php echo ($me['on']) ? 'active' : ''; ?>" target="<?php echo $me['target'];?>">
                        <i class="fa <?php echo $me['icon'] ?> fa-fw" aria-hidden="true"></i>
                        <?php echo $me['text'];?>
                    </a>
                    <?php if(isset($me['s'])) { //Is Sub Menu ?>
                        <ul>
                        <?php for($j=0; $j < count($me['s']); $j++) {
                                $me1 = $me['s'][$j];
                        ?>
                            <li>
                                <a href="<?php echo $me1['href'];?>" class="<?php echo ($me1['on']) ? 'active' : ''; ?>" target="<?php echo $me1['target'];?>">
                                    <i class="fa <?php echo $me1['icon'] ?> fa-fw" aria-hidden="true"></i>
                                    <?php echo $me1['text'];?>
                                </a>
                            </li>
                        <?php } //for ?>
                        </ul>
                    <?php } //is_sub ?>
                </li>
                <?php } //for ?>
                <?php if(!$menu_cnt) { ?>
                    <li>
                        <a class="me-a" href="javascript:;">메뉴를 등록해 주세요.</a>
                    </li>
                <?php } ?>
                </ul>
            </div>
        </div>

------------------------------------------------------------

 

 

어떻게 수정해야 할까요 ?

 

 

 

이 질문에 댓글 쓰기 :

답변 1

// Sidebar

$(document).ready(function () {
    const sidebar = $('#nt_sidebar');
    const sidebarMask = $('#nt_sidebar_mask');

    $(document).on('click', '#fullNavi , #fullTopNavi', function (e) {
        e.preventDefault();
        $('html, body').css({'overflow': 'hidden', 'height': '100%'});
        sidebar.addClass("active");
        sidebarMask.addClass("active");
    });

    // Sidebar Close
    $(document).on('click', '.sidebar-close', function (e) {
        e.preventDefault();
        $('html, body').css({'overflow': '', 'height': ''});
        sidebar.removeClass("active");
        sidebarMask.removeClass("active");
    });
});

이렇게 수정이되어야 하지않을까요? 테스트해보세요 될련지몰르겠네요

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

회원로그인

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