Merhabalar,
herhangi menüyü tıklayınca sidebar menüsünün kapanmasını nasıl sağlarım.
menü kodu:
<div class="m24_main_wrapper">
<div id="sidebar" class="bounce-to-right">
<div id="toggle_close">×</div>
<div id='cssmenu'>
<a href="anasayfa"><img style="width: 200px;" src="<?php echo $site; ?>/panel/uploads/settings_v/1280x720/<?php echo $logo; ?>" alt="logo"></a>
<ul class="sidebb">
<li><a onclick="closeMenu()" data-ajax="true" href='anasayfa'><i class="flaticon-home"></i>ANASAYFA</a></li>
<li class='has-sub'><a id="kurumsal" data-toggle="collapse" href="#collapseMenu1"><i class="flaticon-info"></i> KURUMSAL</a>
<ul id="collapseMenu1">
<?php
$sayfada = 20; // sayfada gösterilecek içerik miktarını belirtiyoruz.
$sorgu=$db->prepare("SELECT * FROM reference");
$sorgu->execute();
$toplam_icerik=$sorgu->rowCount();
$toplam_sayfa = ceil($toplam_icerik / $sayfada);
// eğer sayfa girilmemişse 1 varsayalım.
$sayfa = isset($_GET['sayfa']) ? (int) $_GET['sayfa'] : 1;
// eğer 1'den küçük bir sayfa sayısı girildiyse 1 yapalım.
if($sayfa < 1) $sayfa = 1;
// toplam sayfa sayımızdan fazla yazılırsa en son sayfayı varsayalım.
if($sayfa > $toplam_sayfa) $sayfa = $toplam_sayfa;
$limit = ($sayfa - 1) * $sayfada;
$refsor=$db->prepare("SELECT * FROM reference order by id ASC limit $limit,$sayfada");
$refsor->execute();
while ($refcek=$refsor->fetch(PDO::FETCH_ASSOC)) {
if ($refcek['isActive']==1){
?>
<li>
<a id="sub" data-ajax="true" onclick="closeMenu()" href="sayfa-icerik/<?=seo($refcek['title'])?>"><i class="fas fa-caret-right"></i><?php echo $refcek['title']; ?></a>
</li>
<?php }} ?>
</ul>
</li>
<li><a data-ajax="true" onclick="closeMenu()" href='yayin-akisi'><i class="flaticon-clock"></i>YAYIN AKIŞI</a></li>
<li><a data-ajax="true" onclick="closeMenu()" href='podcast'><i class="flaticon-playlist"></i> PODCAST</a></li>
<li><a data-ajax="true" onclick="closeMenu()" href='yayincilar'><i class="flaticon-playlist"></i> YAYINCILAR</a></li>
<li><a data-ajax="true" onclick="closeMenu()" href='haberler'><i class="flaticon-globe"></i>HABERLER</a></li>
<li class='has-sub'><a id="galeri" data-toggle="collapse" href="#collapseMenu2" href='#'><i class="flaticon-album"></i>GALERİ</a>
<ul>
<li><a data-ajax="true" onclick="closeMenu()" href="video-galeri"> <i class="flaticon-vinyl"></i>VİDEO GALERİ</a></li>
<li><a data-ajax="true" onclick="closeMenu()" href="foto-galeri"><i class="flaticon-playlist-1"></i>RESİM GALERİ</a></li>
</ul>
</li>
<li><a data-ajax="true" onclick="closeMenu()" href='iletisim'><i class="flaticon-internet"></i>BİZE ULAŞIN</a></li>
</ul>
<div class="lang_apply_btn">
<ul>
<li>
<a data-ajax="true" onclick="closeMenu()" href="istekgonder"> <i class="flaticon-play-button"></i>İSTEK GÖNDER</a>
</li>
</ul>
</div>
</div>
</div>
<!-- top navi wrapper end -->
<div class="m24_navi_main_wrapper m24_cover">
<div class="container-fluid">
<div class="m24_logo_wrapper">
<div class="m24_logo_div">
<a data-ajax="true" href="anasayfa">
<img class="mo" style="width: 200px;" src="<?php echo $site; ?>/panel/uploads/settings_v/1280x720/<?php echo $logo; ?>" alt="logo">
<img class="ma" style="width: 170px;margin-top: 10%" src="<?php echo $site; ?>/panel/uploads/settings_v/1280x720/<?php echo $logo; ?>" alt="logo">
</a>
</div>
<a data-ajax="true" class="ma" href="istekgonder" style="margin-top: 2%;margin-left: 30px;position: absolute;width: 200px"><i class="flaticon-play-button"></i> İstek Gönder</a>
<div id="toggle" class="header__btn ma" onclick="check()" style="margin-right: -35%;margin-top: 8%">
<a><i class="flaticon-menu-1"></i></a>
</div>
</div>
<div class="m24_header_right_Wrapper d-xl-block">
<div class="m24_signin_wrapper">
<div class="theme-switch-wrapper" style="margin-top: -20px;">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<span class="slider round"></span>
</label>
</div>
<div class="lang_apply_btn mo" style="margin-left: -5%;margin-top: -3%">
<ul>
<li>
<a data-ajax="true" href="istekgonder"> <i class="flaticon-playlist"></i> İSTEK GÖNDER</a>
</li>
</ul>
</div>
</div>
</div>
<div class="m24_navigation_wrapper">
<div class="mainmenu d-xl-block d-lg-block d-md-none d-sm-none d-none">
<ul class="main_nav_ul">
<li class="has-mega gc_main_navigation"><a data-ajax="true" href="anasayfa" class="gc_main_navigation">Anasayfa </a></li>
<li class="has-mega gc_main_navigation"><a data-ajax="true" href="#" class="gc_main_navigation">Kurumsal <i class="flaticon-down-arrow"></i></a>
<ul class="navi_2_dropdown">
<?php
$sayfada = 20; // sayfada gösterilecek içerik miktarını belirtiyoruz.
$sorgu=$db->prepare("SELECT * FROM reference");
$sorgu->execute();
$toplam_icerik=$sorgu->rowCount();
$toplam_sayfa = ceil($toplam_icerik / $sayfada);
// eğer sayfa girilmemişse 1 varsayalım.
$sayfa = isset($_GET['sayfa']) ? (int) $_GET['sayfa'] : 1;
// eğer 1'den küçük bir sayfa sayısı girildiyse 1 yapalım.
if($sayfa < 1) $sayfa = 1;
// toplam sayfa sayımızdan fazla yazılırsa en son sayfayı varsayalım.
if($sayfa > $toplam_sayfa) $sayfa = $toplam_sayfa;
$limit = ($sayfa - 1) * $sayfada;
$refsor=$db->prepare("SELECT * FROM reference order by id ASC limit $limit,$sayfada");
$refsor->execute();
while ($refcek=$refsor->fetch(PDO::FETCH_ASSOC)) {
if ($refcek['isActive']==1){
?>
<li class="parent">
<a data-ajax="true" href="sayfa-icerik/<?=seo($refcek['title'])?>"><i class="fas fa-caret-right"></i><?php echo $refcek['title']; ?></a>
</li>
<?php }} ?>
</ul>
</li>
<li><a data-ajax="true" href="yayin-akisi" class="gc_main_navigation">Yayın Akışı</a></li>
<li><a data-ajax="true" href="podcast" class="gc_main_navigation">Podcast</a></li>
<li><a data-ajax="true" href="yayincilar" class="gc_main_navigation">Yayıncılar</a></li>
<li><a data-ajax="true" href="haberler" class="gc_main_navigation">Haberler</a></li>
<li class="has-mega gc_main_navigation"><a href="#" class="gc_main_navigation">Galeri <i class="flaticon-down-arrow"></i></a>
<ul class="navi_2_dropdown">
<li class="parent">
<a data-ajax="true" href="video-galeri"><i class="fas fa-caret-right"></i>Video Galeri</a>
</li>
<li class="parent">
<a data-ajax="true" href="foto-galeri"><i class="fas fa-caret-right"></i>Resim Galeri</a>
</li>
</ul>
</li>
<li><a data-ajax="true" href="iletisim" class="gc_main_navigation">Bize Ulaşın</a></li>
</ul>
</div>
<!-- mainmenu end -->
</div>
</div>
</div>
<!-- navi wrapper End -->
<!--
menunun kapanmasi icin -->
<script>
function closeMenu(){
side = document.getElementById("side");
kurumsal = document.getElementById("kurumsal");
cmenu = document.getElementById("collapseMenu1");
cmenu2 = document.getElementById("collapseMenu2");
btn = document.getElementById("header__btn");
galeri = document.getElementById("galeri");
side.classList.remove("sidebar--active");
btn.classList.remove("header__btn--active");
kurumsal.classList.remove("collapsed");
kurumsal.setAttribute("aria-expanded", false);
galeri.classList.remove("collapsed");
galeri.setAttribute("aria-expanded", false);
cmenu.classList.remove("show");
cmenu2.classList.remove("show");
}
function check(){
$('.header__btn').toggleClass('header__btn--active');
$('.sidebar').toggleClass('sidebar--active');
}
</script>