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

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

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");
    });
});

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

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

회원로그인

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