Hallo sahabat semua, dalam pertemuan ini saya akan sharing-sharing tentang Cara Membuat Sticky SideNav Menggunakan Bootstrap. Jadi sidenav atau side menu yang ada disebelah kiri akan tetap stay atau posisi fixed saat halaman di scroll. Tentunya kita harus membuat tampilannya menjadi 2 bagian yaitu bagian sidenav dan content.
Apakah sampai sini sahabat sudah mengerti pada konsep yang akan kita buat? Mari kita lanjutkan kembali cara pembuatannya silahkan ikuti langkah berikut ini:
Pertama buat file html baru untuk strukturnya seperti code berikut:
<head> <title>Cara membuat sticky sidenav menggunakan bootstrap/</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.1/css/bootstrap.min.css"> </head>
karena kita menggunakan Bootstrap maka library CSS disisipkan pada bagian tag <title> lalu untuk library JS ditambahkan pada bagian sebelum penutup tag </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </body> </html>
selanjutnya isi content akan seperti dibawah ini :
<div class="container-fluid text-center head">
<h1>Membuat Sticky SideNav Menggunakan Bootstrap</h1>
<h3>Posisi Fixed Menu SideNav saat content di scroll</h3>
<p>Yang membuat menjadi fixed adalah property <b>data-spy="affix"</b></p>
</div>
<br>
<div class="container">
<div class="row">
<nav class="col-sm-3">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="175">
<li class="active"><a href="#home">HOME</a></li>
<li><a href="#profile">PROFILE</a></li>
<li><a href="#service">SERVICE</a></li>
</ul>
</nav>
<div class="col-sm-9 content">
<!-- untuk bagian content saya singkat saja,jadi silahkan buat 3 buah h1 dan p sebagai isi content -->
<h1>Saat di scroll maka akan menjadi fixed Menu SideNav</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam eos perspiciatis aliquid animi a iste atque officia. Distinctio, magni officiis recusandae reprehenderit natus neque voluptatum, atque corporis animi dolor, reiciendis labore voluptatibus eius, veniam! Aspernatur cupiditate fuga mollitia soluta aliquam ad iste repellat veniam corporis at laudantium nihil rerum consequatur quisquam, assumenda modi sequi cum voluptate numquam? Porro molestiae, voluptatem illum ut, quam harum, laborum consectetur minus magni mollitia sapiente. Eius nam nobis eum, accusantium praesentium, quod, nulla harum libero officia perspiciatis ipsam. Dolor, reiciendis laboriosam cumque magni libero officia nisi soluta dolores quae possimus, fuga blanditiis nobis explicabo mollitia.</p>
</div>
</div>
</div>
Kemudian langkah berikutnya tambahkan sedikit style CSS agar lebih manis lagi :
.head{background-color:#21D5F3;color:#fff;height:160px;}
p{font-size: 18px}
.affix {top: 10px;z-index: 9999 !important;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover{background-color: #ff0303;}
.content h1{margin-top:0;}
Jika sudah langsung saja disimpan dan kemudian buka pada browser masing-masing agar langsung mendapatkan hasilnya. Sahabat bisa langsung coba lakukan scroll kebawah maka bagian class=head akan terhide lalu SideNav akan berubah menjadi fixed posisinya berada diatas.
Saya kira cukup dalam pembahasan artikel ini tentang Cara Membuat Sticky SideNav Menggunakan Bootstrap. Semoga dapat menambah referensi belajar sahabat lalu silahkan untuk dikembangkan kembali sesuai kebutuhan pada tampilan website sahabat.
terima kasih.
The post Cara Membuat Sticky SideNav Menggunakan Bootstrap appeared first on Kursus Website Terbaik.