Seperti yang telah kita semua ketahui, bahwa bootstrap adalah salah satu framework CSS yang populer saat ini. Framework ini memberikan kita kemudahan dalam membuat tampilan website yang rapih dan bagus walau tanpa memiliki bakat desain yang mumpuni. Selain mempermudah, bootstrap ini mempunyai kelebihan yaitu cocok untuk disegala media sehingga tampilan website kita akan dijamin rapih selalu. Dalam boostrap banyak sekali class CSS yang dapat kalian pergunakan, salah satunya yang akan kita bahas adalah menu affix pada Bootstrap.
Menu affix ini adalah perintah untuk membuat suatu menu pada saat kita scroll kebawah, otomatis secara langsung menu tersebut akan menempel di atas browser. Berbeda dengan menu fixed, jika menu fixed sudah sejak awal selalu menempel diatas, sedangkan affix pada saat discroll saja baru menempel diatas. Untuk lebih jelasnya kita langsung coba praktekkan saja. Kalian bisa salin contoh code berikut ini.
affix.html
<!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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:red;color:#fff;height:200px;">
<h1> Contoh Menggunakan class Affix </h1>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Basic Topnav</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>Contoh Text dummies</h1>
<h1>Contoh Text dummies</h1>
<h1>Contoh Text dummies</h1>
<h1>Contoh Text dummies</h1>
<h1>Contoh Text dummies</h1>
<h1>Contoh Text dummies</h1>
<h1>Contoh Text dummies</h1>
<h1>Contoh Text dummies</h1>
<h1>Contoh Text dummies</h1>
<h1>Contoh Text dummies</h1>
<h1>Contoh Text dummies</h1>
<h1>Contoh Text dummies</h1>
</div>
</body>
</html>
Jika sudah kalian simpan file tersebut dengan format HTML. Untuk melihat hasilnya kalian cukup membuka file htmlnya saja pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.
Tampilan diatas adalah tampilan awal. Posisi menu berada dibawah banner merah. Sekarang kalian coba scroll kebawah dan lihat hasilnya.
Menu tersebut secara otomatis menempel diatas. Mudah bukan ?
Sekian pembahasan mengenai bagaimana cara membuat menu affix pada Bootstrap. Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar