Memberikan efek terpilih (class="active")?

Bagaimana memberikan efek terpilih pada menu, atau dalam bahasa pemrograman adalah menambahkan active pada class yang digunakan, jika menu memiliki dropdown menu dan menggunakan fungsi switch menu pada link ? Sebagai contoh yang seharusnya (dengan efek menu terpilih) adalah sebagai berikut :
            <div class="main-sidebar sidebar-style-2">
                <aside id="sidebar-wrapper">
                    <div class="sidebar-brand">
                        <a href="?page=dashboard">Sarpras</a>
                    </div>
                    <div class="sidebar-brand sidebar-brand-sm">
                        <a href="?page=dashboard">SMAI</a>
                    </div>
// halalam Menu
                    <?php include 'menu.php'
                    ?>
                </aside>
            </div>
// Halaman Content
<div class="main-content">
                <?php include 'konten.php' ?>
            </div>

// halaman menu.php
<ul class="sidebar-menu">
    <li class="menu-header">Dashboard</li>
    <li>
        <a href="?page=dashboard" class="nav-link"><i class="fas fa-fire"></i><span>Dashboard</span></a>
    </li>
    <?php if (cek_status($_SESSION['user']) == 0) : ?>
        <li class="menu-header">Data</li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-database"></i> <span>Data Master</span></a>
            <ul class="dropdown-menu">
                <li>
                    <a class="nav-link" href="?page=guru">Data Guru</a>
                </li>
                <li>
                    <a class="nav-link" href="?page=kelas">Data Kelas</a>
                </li>
                <li>
                    <a class="nav-link" href="?page=siswa">Data Siswa</a>
                </li>
                <!-- <li><a class="nav-link" href="">Data Tahun Ajaran</a></li> -->
                <li>
                    <a class="nav-link" href="?page=mapel">Data Mapel</a>
                </li>
                <li>
                    <a class="nav-link" href="?page=profile">Data Peminjam</a>
                </li>
                <!-- <li><a class="nav-link" href="">Lokasi</a></li> -->
            </ul>
        </li>
        <li>
            <a href="?page=sarpras"><i class="fas fa-toolbox"></i><span>Data Sarpras</span></a>
        </li>
        <li>
            <a href="?page=jadwal"><i class="fas fa-clipboard-list"></i><span>Jadwal</span></a>
        </li>
        <li class="menu-header">Peminjaman</li>
        <l>
            <a class="nav-link" href="?page=pkbm"><i class="fas fa-user-graduate"></i> <span>Pinjaman KBM</span></a>
        </li>
        <li>
            <a class="nav-link" href="?page=pinjaman"><i class="fas fa-book"></i> <span>Pinjaman</span></a>
        </li>
        <li class="menu-header">Pengembalian</li>
        <li ><a class="nav-link" href="?page=kembalikbm"><i class="fas fa-user-graduate"></i> <span>Pinjaman KBM</span></a></li>
        <li><a class="nav-link" href="?page=kembali"><i class="fas fa-book"></i> <span>Pinjaman</span></a></li>
    <?php endif ?>
    <!-- ============================Pimpinan=========================== -->
    <?php if (cek_status($_SESSION['user']) == 1) : ?>
        <li class="menu-header">Setujui Pinjaman</li>
        <li>
            <a href="?page=persetujuan"><i class="fas fa-check"></i><span>Disposisi Peminjaman</span></a>
        </li>
        <li class="menu-header">Laporan Sarana Prasarana</li>
        <li>
            <a href="?page=lapsarpras"><i class="fas fa-toolbox"></i><span>Sarana Prasarana</span></a>
        </li>
        <!-- ================== -->
        <li class="menu-header">Laporan Pinjaman</li>
        <li class="dropdown">
            <a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="far fa-file-pdf"></i> <span>Peminjaman</span></a>
            <ul class="dropdown-menu">
                <li>
                    <a class="nav-link" href="?page=lappinjamankbm">Pinjaman KBM</a>
                </li>
                <li>
                    <a class="nav-link" href="?page=lappinjaman">Pinjaman</a>
                </li>
            </ul>
        </li>
        <!-- ===---=== -->
        <li class="menu-header">Laporan Pengembalian</li>
        <li class="dropdown">
            <a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="far fa-file-pdf"></i> <span>Pengembalian</span></a>
            <ul class="dropdown-menu">
                <li>
                    <a class="nav-link" href="?page=kembalikbm">Pinjaman KBM</a>
                </li>
                <li>
                    <a class="nav-link" href="?page=lapkembali">Pinjaman</a>
                </li>
            </ul>
        </li>
    <?php endif ?>
</ul>
// halaman content.php
<?php
switch ($_GET['page']) {
    case 'dashboard':
        include 'page/dashboard.php';
        break;
        //================= Page data guru =================
    case 'guru':
        include 'page/guru/guru.php';
        break;
    case 'addguru':
        include 'page/guru/addguru.php';
        break;
    case 'editguru':
        include 'page/guru/editguru.php';
        break;
    case 'delguru':
        include 'page/guru/delguru.php';
        break;
        //=================  Page/admin data kelas ================= 
    case 'kelas':
        include 'page/kelas/kelas.php';
        break;
    case 'addkelas':
        include 'page/kelas/addkelas.php';
        break;
    case 'editkelas':
        include 'page/kelas/editkelas.php';
        break;
    case 'delkelas':
        include 'page/kelas/delkelas.php';
        break;
        // =================  Page/admin data mapel ================= 
    case 'mapel':
        include 'page/mapel/mapel.php';
        break;
    case 'addmapel':
        include 'page/mapel/addmapel.php';
        break;
    case 'editmapel':
        include 'page/mapel/editmapel.php';
        break;
    case 'delmapel':
        include 'page/mapel/delmapel.php';
        break;
        //=================  Page/admin data siswa ================= 
    case 'siswa':
        include 'page/siswa/siswa.php';
        break;
    case 'addsiswa':
        include 'page/siswa/addsiswa.php';
        break;
    case 'editsiswa':
        include 'page/siswa/editsiswa.php';
        break;
    case 'delsiswa':
        include 'page/siswa/delsiswa.php';
        break;
        //================= Page/admin data jadwal ================= 
    case 'jadwal':
        include 'page/jadwal/jadwal.php';
        break;
    case 'addjadwal':
        include 'page/jadwal/addjadwal.php';
        break;
    case 'editjadwal':
        include 'page/jadwal/editjadwal.php';
        break;
    case 'deljadwal':
        include 'page/jadwal/deljadwal.php';
        break;
        //=================  Page/admin data sarpras ================= 
    case 'sarpras':
        include 'page/sarpras/sarpras.php';
        break;
    case 'addsarpras':
        include 'page/sarpras/addsarpras.php';
        break;
    case 'editsarpras':
        include 'page/sarpras/editsarpras.php';
        break;
    case 'delsarpras':
        include 'page/sarpras/delsarpras.php';
        break;
    case 'cetaksarpras':
        include 'page/sarpras/cetaksarpras.php';
        break;
    case 'barcode':
        include 'page/sarpras/barcode.php';
        break;
        //=================  Page/admin Pkbm ================= 
    case 'pkbm':
        include 'page/pkbm/pkbm.php';
        break;
    case 'addpkbm':
        include 'page/pkbm/addpkbm.php';
        break;
    case 'editpkbm':
        include 'page/pkbm/editpkbm.php';
        break;
    case 'delpkbm':
        include 'page/pkbm/delpkbm.php';
        break;
        // =================  page pinjman ================= 
    case 'pinjaman':
        include 'page/pinjaman/pinjaman.php';
        break;
    case 'exsexusi':
        include 'page/pinjaman/exsexusi.php';
        break;
    case 'detailpinjaman':
        include 'page/pinjaman/detailpinjaman.php';
        break;
    case 'cetakpinjaman':
        include 'page/pinjaman/cetakpinjaman.php';
        break;
    case 'delpinjaman':
        include 'page/pinjaman/delpinjaman.php';
        break;
        // case 'barcode':
        //     include 'page/pinjaman/barcode.php';
        //     break;
        // ==========================================
    case 'kembali':
        include 'page/kembali/kembali.php';
        break;
        // =================  page pinjman ================= 
        // ================= Page Pimpinan ================= 
    case 'lapsarpras':
        include 'page/pimpinan/lapsarpras.php';
        break;
    case 'lappinjamankbm':
        include 'page/pimpinan/lappinjamankbm.php';
        break;
    case 'lapkembali':
        include 'page/pimpinan/lapkembali.php';
        break;
    case 'persetujuan':
        include 'page/pimpinan/persetujuan.php';
        break;
    case 'lappinjaman':
        include 'page/pimpinan/lappinjaman.php';
        break;
        // ============================================= //
    case 'error':
        include 'page/error/error.php';
        break;
        // ============================ //
    case 'profile':
        include 'page/user/profile.php';
        break;
    case 'delmember':
        include 'page/user/delmember.php';
        break;
    default:
        include 'page/dashboard.php';
        break;
}



avatar arifrohman

@arifrohman

18 Kontribusi 4 Poin


Jawaban Terpilih

Mungkin kalau menggunakan PHP dari menu.php nya langsung.

Caranya di dalam tiap atrribute class tambahin inline php script. Kayak gini
class="nav-link <?php echo $_GET['page'] == 'guru' ? 'active' : '';   ?>"

Dan seterusnya disesuaiakan aja.


Atau mungkin bisa lewat javascript dalam sekali jalan.
<script>
  let halaman = "<?php echo $_GET['page']; ?>";
  
  //Jika DOM
  document.querySelector("a[href='?page="+halaman+"']").classList.add("active");

  //Jika Jquery
  $("a[href='?page="+halaman+"']").addClass("active");

</script>

Bukan cara yang menawan tapi setidaknya menurut ku bekerja aja 😂😂
avatar GrennKren

@GrennKren

61 Kontribusi 45 Poin

Jawaban

Mungkin kalau menggunakan PHP dari menu.php nya langsung.

Caranya di dalam tiap atrribute class tambahin inline php script. Kayak gini
class="nav-link <?php echo $_GET['page'] == 'guru' ? 'active' : '';   ?>"

Dan seterusnya disesuaiakan aja.


Atau mungkin bisa lewat javascript dalam sekali jalan.
<script>
  let halaman = "<?php echo $_GET['page']; ?>";
  
  //Jika DOM
  document.querySelector("a[href='?page="+halaman+"']").classList.add("active");

  //Jika Jquery
  $("a[href='?page="+halaman+"']").addClass("active");

</script>

Bukan cara yang menawan tapi setidaknya menurut ku bekerja aja 😂😂
avatar GrennKren

@GrennKren

61 Kontribusi 45 Poin

  • untuk caranya di dalam tiap atrribute class tambahin inline php script ini bisa dugunakan.... Terima Kasih Jazakumullah Khairan - @arifrohman


Login untuk gabung berdiskusi