Cara Membuat Scrollspy pada Bootstrap 4 – Hai ketemu lagi dengan saya. Setelah sebelumnya saya sudah membahas tentang Cara Membuat Corousel/Slider Image Responsive Menggunakan Bootstrap 4, sekarang saya akan membahas tentang scrollspy. Pernahkah sobat melihat template atau sebuah website yang biasanya One Page Website, saat kita scroll maka pada bagian navigasi menu akan aktif sesuai sectionnya. Itu yang akan saya bahas disini.
|
1 2 3 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> |
Karena untuk keperluan demo jadi saya mencontohkan menggunakan librari online, namun jika sobat ingin menggunakan untuk keperluan development tentunya sobat harus mendownloadnya terlebih dahulu atau sobat bisa mendownloadnya bersama dengan project ini diakhir postingan.
1. Navigasi diatas
Contoh penggunaannya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav class="navbar navbar-expand-sm bg-primary navbar-dark fixed-top"> <a class="navbar-brand" href="#">Dewan Komputer</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#section1">Section 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">Section 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Section 3</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Section 4 </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#section41">Link 1</a> <a class="dropdown-item" href="#section42">Link 2</a> </div> </li> </ul> </div> </nav> <div id="section1" class="container-fluid" style="padding-top:70px;padding-bottom:70px"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div><hr> <div id="section2" class="container-fluid" style="padding-top:70px;padding-bottom:70px"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div><hr> <div id="section3" class="container-fluid" style="padding-top:70px;padding-bottom:70px"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div><hr> <div id="section41" class="container-fluid" style="padding-top:70px;padding-bottom:70px"> <h1>Section 4 Submenu 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div><hr> <div id="section42" class="container-fluid" style="padding-top:70px;padding-bottom:70px"> <h1>Section 4 Submenu 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> </body> </html> |
Penjelasan :
Pada body kita perlu menambahkan kode dibawah
|
1 |
data-spy="scroll" data-target=".navbar" data-offset="50" |
Dan pada href kita tuliskan seperti ini href=”#section1″ yang menandakan jika diklik skan menuju section dengan id=”section1″.
Tampilannya :
2. Navigasi disamping
Sebenarnya sama seperti contoh diatas namun kali ini kita akan menampilkan navigasinya di samping. Berikut adalah cara penggunaannya :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <style> ul.nav-pills { top: 20px; position: fixed; } div.col-sm-9 div { min-height: 350px; } @media screen and (max-width: 810px) { #section1, #section2, #section3, #section41, #section42 { margin-left: 150px; } } </style> </head> <body data-spy="scroll" data-target="#myScrollspy" data-offset="20"> <div class="container"> <div class="row"> <nav class="col-sm-3" id="myScrollspy"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#section41">Section 4-1</a></li> <li><a href="#section42">Section 4-2</a></li> </ul> </li> </ul> </nav> <div class="col-sm-9"> <div id="section1"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> <p>Try to scroll this section and look at the navigation list while scrolling!</p> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div><hr> <div id="section2"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> <p>Try to scroll this section and look at the navigation list while scrolling!</p> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div><hr> <div id="section3"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> <p>Try to scroll this section and look at the navigation list while scrolling!</p> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div><hr> <div id="section41"> <h1>Section 4-1</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> <p>Try to scroll this section and look at the navigation list while scrolling!</p> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div><hr> <div id="section42"> <h1>Section 4-2</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> <p>Try to scroll this section and look at the navigation list while scrolling!</p> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div> </div> </div> </div> </body> </html> |
Tampilannya :
Sekian postingan saya tentang Cara Membuat Scrollspy pada Bootstrap 4. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah. Kunjungi juga postingan saya lainnya untuk menambah ilmu sobat.
Artikel Tentang Bootstrap Lainnya :
Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah
Macam-macam Form Input pada HTML dan Bootstrap
Cara Membuat SweetAlert dan Macam-Macamnya pada PHP
Membuat Bootstrap Modal dan Animasinya pada PHP
Membuat Badges Menggunakan Bootstrap 4
Membuat Alert pada HTML menggunakan Bootstrap 4
Mengenal Bootstrap Typography pada HTML dan Bootstrap 4
Menggunakan Tooltip pada HTML dan Bootstrap 4
Membuat Nested Media Object pada Bootstrap 4
Membuat Navbar dengan Bootstrap 4 dengan Mudah
Membuat Border Menggunakan Bootstrap 4
Membuat Progress Bar dengan Bootstrap 4
Simple Pagination Pada Bootstrap 4
Cara Membuat Corousel/Slider Image Responsive Menggunakan Bootstrap 4
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :