레이아웃 사이드메뉴 열고 펼침 질문 드립니다
본문
현재 사이드 메뉴가 이런식으로 되어있습니다
메인 - 공지사항
서브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");
});
});
이렇게 수정이되어야 하지않을까요? 테스트해보세요 될련지몰르겠네요
