Bootstrap Scrollspy
Maret 30, 2017
Assalamualaikum Wr.Wb
1.pendahuluan sekaligus penjelasan
Lagi - lagi bootstrap dan kali ini saya akan membahas Scrollspy,yaitu misalkan kita mempunyai navbar dan bila kita klik salah satu menu dari navbar tersebut kita bisa langsung menuju isi menu tanpa berpindah halaman,ini prinsipnya hampir sama dengan Name Anchor.Baiklah dari pada pusing - pusing karna saya juga bingung mau menjelaskan yang bagaimana lagi mari kita mulai hehe.
2.Alat dan Bahan
- Pc atau Laptop
- file bootsrap
- sublime text
- browser
- masukkan scrip untuk memanggil bootstrap
tuliskan scrip di antara <head> dan </head>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.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>
- Buat stylenya agar lebih menarik
<style>
body{
position: relative;
}
#menu1{padding-top: 55px;height: 500px;color: #fff;background-color: #1e88e5;}
#menu2{padding-top: 55px;height: 500px;color: #fff;background-color: #ff00ff;}
#menu3{padding-top: 55px;height: 500px;color: #fff;background-color: #00cc66;}
#menu41{padding-top: 55px;height: 500px;color: #fff;background-color: #0099ff;}
#menu42{padding-top: 55px;height: 500px;color: #fff;background-color: #009999}
</style>
- Lalu kita buat scrollspy ini saya terapkan pada navbar
<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="#menu1">Menu1</a></li>
<li><a href="#menu2">Menu2</a></li>
<li><a href="#menu3">Menu3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#menu41">Menu4-1</a></li>
<li><a href="#menu42">Menu4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="menu1" class="container-fluid">
<h1>Menu 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--menu1-->
<div id="menu2" class="container-fluid">
<h1>Menu 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--menu2-->
<div id="menu3" class="container-fluid">
<h1>Menu 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--menu3-->
<div id="menu41" class="container-fluid">
<h1>Submenu 4.1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--submenu 4.1-->
<div id="menu42" class="container-fluid">
<h1>Submenu 4.2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
Dan hasilnya seperti berikut
Setelah menu lain di klik maka akan berpindah konten tanpa berpinda halaman
Menu Dropdown
Setelah Dropdown di klik
Jika di lihat dari dari mode responsive
Itu tadi sedikit mengenai bootstrap scrollspy semoga bermanfaat walaupun mungkin penjelasan saya masih belum mudah untuk di pahami untuk itu mohon maaf atas kekurangannya,terimakasih sudah berkunjung sampai jumpa di postingan berikutnya.
5.Referensi:
0 comments