Cara Membuat Scrollspy Dengan Menggunakan Bootstrap
Di panduan kali ini kamu akan belajar bagaimana cara merancang scrollspy dengan menggunakan bootstrap.
Hallo semuanya para pembaca setia artikel-artikel di blog Source Code Aplikasi 🙂 oke bagi kali ini saya akan memberikan bahan mengenai bootrap yaitu cara merancang scrollspy dengan menggunakan bootstrap.
Apa itu scrollspy ? scrollspy di bootrap yaitu merancang scroll di situs ketika kita mengklik fitur. sederhnannya websitenya yaitu bertipe situs one page jadi kita tak perlu scrol kebawah hany cuk mengklik navigasi di fitur.
seketika saja kita coba membuatnya :
<!DOCTYPE html>
<html>
<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.3.7/css/bootstrap.min.css>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js></script>
<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
</style>
</head>
<body data-spy=scroll data-target=.navbar data-offset=50>
<nav class=navbar navbar-inverse navbar-fixed-top>
<div class=container-fluid>
<div class=navbar-header>
<button type=button class=navbar-toggle data-toggle=collapse data-target=#myNavbar>
<span class=icon-bar></span>
<span class=icon-bar></span>
<span class=icon-bar></span>
</button>
<a class=navbar-brand href=#>WebSiteName</a>
</div>
<div>
<div class=collapse navbar-collapse id=myNavbar>
<ul class=nav navbar-nav>
<li><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>
</div>
</div>
</div>
</nav>
<div id=section1 class=container-fluid>
<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>
<div id=section2 class=container-fluid>
<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>
<div id=section3 class=container-fluid>
<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>
<div id=section41 class=container-fluid>
<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>
<div id=section42 class=container-fluid>
<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>
oke setelah kalian salin silahkan coba di jalankan pad browser , mak hasilnya akan seperti ini :
bik seperti itulah tadi panduan cara merancang scrollspy dengan menggunakan bootstrtap , semoga dapat menambah pengetahuan kalian, dan hingga bertemu di artikel berikutnya .
Sumber https://kursuswebsite.org
