Cara menggunakan membuat sidebar dengan php

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat sidebar keren dengan menggunakan bootstrap. Penasaran?, ayo ikuti selengkapnya di bawah ini.

Saat ini banyak sekali contoh-contoh sidebar yang bisa kalian tiru baik menggunakan bootstrap atau tidak menggunakan bootstrap. Tapi jika kalian penasaran, artikel ini bisa membantu kalian untuk membuat sendiri sidebar versi kalian.

Pada kesempatan kali ini kita akan membuat sidebar sederhana yang bisa di-toggle. Karena bisa di-toggle disini kita akan menggunakan sedikit javascript. Saya akan memberikan source code yang mudah dipahami bagi kalian semua. Silahkan scroll ke bagian paling bawah untuk melihat hasil akhirnya.

1. Buatlah sebuah file baru dengan nama index.html di tempat yang kalian inginkan. Lalu copy script di bawah ini dan jalankan di browser.

    

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap Demo</title>
        
        <link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css"
          integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK"
          crossorigin="anonymous"
        />
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm//font/bootstrap-icons.css"
        />
      </head>
      <body>
        <div>
          <div class="sidebar p-4 bg-primary" id="sidebar">
            <h4 class="mb-5 text-white">SuperVideo</h4>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-house mr-2"></i>
                Dashboard
              </a>
            </li>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-fire mr-2"></i>
                Populer
              </a>
            </li>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-newspaper mr-2"></i>
                News
              </a>
            </li>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-bicycle mr-2"></i>
                Sports
              </a>
            </li>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-boombox mr-2"></i>
                Music
              </a>
            </li>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-film mr-2"></i>
                Film
              </a>
            </li>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-bookmark mr-2"></i>
                Bookmark
              </a>
            </li>
          </div>
        </div>
        <section class="p-4" id="main-content">
          <button class="btn btn-primary" id="button-toggle">
            <i class="bi bi-list"></i>
          </button>
          <div class="card mt-5">
            <div class="card-body">
              <h4>Lorem Ipsum</h4>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque
                animi maxime at minima. Totam vero omnis ducimus commodi placeat
                accusamus, repudiandae nemo, harum magni aperiam esse voluptates.
                Non, sapiente vero?
              </p>
            </div>
          </div>
        </section>
      </body>
    </html>

Jika kalian jalankan, maka tampilan desainnnya akan tampak seperti di bawah ini. Tampilan di bawah ini masih sangat berantakan, untuk itu kita perlu menambahkan css agar sidebar berada di posisi kiri.

Tampilan Tanpa CSS

2. Copy script css di bawah ini dan paste di atas tag </head>.

<style>
    li {
        list-style: none;
        margin: 20px 0 20px 0;
    }

    a {
        text-decoration: none;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: fixed;
        margin-left: -300px;
        transition: 0.4s;
    }

    .active-main-content {
        margin-left: 250px;
    }

    .active-sidebar {
        margin-left: 0;
    }

    #main-content {
        transition: 0.4s;
    }
</style>

3. Saat script di atas dijalankan kembali, maka sidebar sudah tidak terlihat. Untuk membuatnya dapat terlihat dan ditutup(toggle) maka kita perlu menambahkan javascript. Silahkan copy dan paste script di bawah ini sebelum tag </body>

<script>

    document.getElementById("button-toggle").addEventListener("click", () => {

        
        document.getElementById("sidebar").classList.toggle("active-sidebar");

        
        document.getElementById("main-content").classList.toggle("active-main-content");
    });
</script>

Semua tahapan sudah kita jalankan. Saatnya kita uji coba kembali. Hasilnya bisa kalian lihat seperti gambar di bawah ini.

Hasil Akhir

Script Lengkap

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap 5 Side Bar Navigation</title>
        
        <link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css"
          integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK"
          crossorigin="anonymous"
        />
        
        
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm//font/bootstrap-icons.css"
        />
        <style>
          li {
            list-style: none;
            margin: 20px 0 20px 0;
          }
    
          a {
            text-decoration: none;
          }
    
          .sidebar {
            width: 250px;
            height: 100vh;
            position: fixed;
            margin-left: -300px;
            transition: 0.4s;
          }
    
          .active-main-content {
            margin-left: 250px;
          }
    
          .active-sidebar {
            margin-left: 0;
          }
    
          #main-content {
            transition: 0.4s;
          }
        </style>
      </head>
    
      <body>
        <div>
          <div class="sidebar p-4 bg-primary" id="sidebar">
            <h4 class="mb-5 text-white">SuperVideo</h4>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-house mr-2"></i>
                Dashboard
              </a>
            </li>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-fire mr-2"></i>
                Populer
              </a>
            </li>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-newspaper mr-2"></i>
                News
              </a>
            </li>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-bicycle mr-2"></i>
                Sports
              </a>
            </li>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-boombox mr-2"></i>
                Music
              </a>
            </li>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-film mr-2"></i>
                Film
              </a>
            </li>
            <li>
              <a class="text-white" href="#">
                <i class="bi bi-bookmark mr-2"></i>
                Bookmark
              </a>
            </li>
          </div>
        </div>
        <div class="p-4" id="main-content">
          <button class="btn btn-primary" id="button-toggle">
            <i class="bi bi-list"></i>
          </button>
          <div class="card mt-5">
            <div class="card-body">
              <h4>Lorem Ipsum</h4>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque
                animi maxime at minima. Totam vero omnis ducimus commodi placeat
                accusamus, repudiandae nemo, harum magni aperiam esse voluptates.
                Non, sapiente vero?
              </p>
            </div>
          </div>
        </div>
    
        <script>
    
          
          document.getElementById("button-toggle").addEventListener("click", () => {
    
            
            document.getElementById("sidebar").classList.toggle("active-sidebar");
    
            
            document.getElementById("main-content").classList.toggle("active-main-content");
          });
    
        </script>
      </body>
    </html>

Wah keren gak?, setelah kalian tahu cara membuat sidebar toogle, saat nya kalian melakukan improvisasi agar sidebar yang kalian terlihat lebih cantik lagi. Ikuti tutorial saya yang lain di link berikut ini.

Ok, sekian tutorial cara cepat membuat sidebar dengan bootstrap. Semoga bermanfaat. Jika ada yang ingin didiskusikan silahkan didiskusikan di kolom komentar di bawah ini. Sekian dan terima kasih.

kode php

Cara menggunakan membuat sidebar dengan php

Script Lengkap

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social