Menerapkan Scrollspy pada Bootstrap 4

Hallo semuanya, pada kesempatan kali ini kita kembali membahas bootstrap versi terbaru, yaitu versi 4, dimana sudah sangat banyak peningkatan fitur bootstrap dari bootstrap 3 menuju bootstrap 4 mengalami banyak sekali penambahan fitur yang tentunya sangat berguna ketika kita akan membangun sebuah website responsive. Dengan bootstrap 4 kita bisa menggunakan banyak hal seperti menggunakan system grid terbaru, tab content, collapsible content dan masih banyak yang lainnya.

Salah satu fitur yang sama dengan bootstrap versi 3 adalah scrollspy, scrollspy adalah fitur atau plugin yang memiliki cara kerja sebagai indicator pada sebuah halaman, biasanya plugin ini akan digunakan pada sebuah website one page atau landing page yang hanya memiliki satu halaman navigasi.

Fitur Scrollspy ini sudah sangat popular pada website parallax yang memang dibuat untuk memanjakan pengalaman pengunjung saat mengunjungi website yang telah dibuat.

Bootstrap sendiri telah menyediakan sebuah template scrollspy untuk bisa kita gunakan pada website kita. Untuk struktur dasarnya dengan navigasi sidebar bisa kita lihat dibawah ini.

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

 

Pengembangan scrollspy pada bootstrap 4 juga memungkinkan kita membuat navigasi nested sebagai fitur tambahan. Berikut adalah contoh navigasi scrollspy nested:

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item2</a>
    <a class="nav-link" href="#item-3">Item3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

Diatas adalah struktur navigasi nested scrollspy yang bisa kalian gunakan untuk memperkaya fitur pada website kalian. Demikian artikel kali ini yang membahas tentang menerapkan scrollspy pada bootstrap 4 semoga bermanfaat

 

19 September 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat