Snippet Code: Membuat Menu(Atas) Tetap Mengkuti Saat Halaman Discroll

Share:

Halo semuanya, kembali lagi di sahretech. Pada artikel kali ini saya akan berbagi snippet code, untuk membuat menu tetap mengikuti(tidak tenggelam) meski halaman discroll ke bawah. Dan agar pembuatan tampilan lebih cantik dan rapih, saya akan menggunakan bootstrap. Penasaran? ayo ikuti tutorialnya berikut ini.



Buatlah sebuah file baru dengan nama bebas, dan simpan dengan ekstensi .html. Lalu isi file tersebut dengan script di bawah ini.



<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light" style="position:sticky; top:0; z-index:1;"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <br> <div class="container"> <div class="row d-flex justify-content-center"> <div class="col-lg-10"> <div class="container"> <div class="card"> <div class="card-body"> <h1 class="card-title">Daftar Pelajaran</h1> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie, metus a rhoncus dapibus, nisl lorem finibus sapien, eu tincidunt est tellus in urna. Integer lobortis quam sed lectus placerat efficitur. Fusce dictum mattis lacus, ac venenatis ligula aliquet sit amet. Donec faucibus dictum urna non eleifend. Duis a auctor turpis. Fusce semper vulputate vestibulum. In volutpat lacinia venenatis. Pellentesque in turpis convallis, tincidunt neque id, elementum dui. Aenean nec laoreet enim, eget iaculis metus. Vestibulum eget lobortis quam. Aliquam ut arcu nec ligula vestibulum facilisis eu vel nibh. Sed sagittis leo eu mi pharetra interdum. <br><br> Maecenas vitae risus vel ante congue laoreet et at elit. Phasellus luctus accumsan finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet egestas quam, a tincidunt sapien tempor at. Mauris quis semper velit, vel tempus lectus. Proin quis condimentum urna. Pellentesque ut dui nec ex finibus faucibus. Vestibulum eleifend ante nec felis tempus, sit amet imperdiet dui varius. Donec at felis porta quam lobortis pulvinar ut non diam. Cras orci nibh, efficitur in mollis sit amet, vestibulum vitae nunc. In volutpat, tortor vel viverra volutpat, lorem risus interdum sapien, ut aliquet lorem dolor eget nibh. In purus dui, eleifend congue dui rhoncus, feugiat dapibus dolor. Integer semper neque felis, eget bibendum quam pharetra at. Etiam quis dui neque. <br><br> Vestibulum facilisis venenatis ex, quis luctus massa efficitur vitae. Curabitur eu mi faucibus mi rutrum aliquam in sed magna. Nulla bibendum pulvinar mi ac tempus. Maecenas scelerisque consectetur nisl, at vestibulum diam posuere eu. Praesent in aliquet massa, sed fringilla neque. Morbi vehicula lectus mattis, pellentesque erat id, condimentum massa. Aliquam cursus rutrum purus vel vestibulum. Maecenas risus mi, tristique posuere sodales nec, sodales maximus arcu. Quisque porttitor velit quis risus luctus, nec finibus mauris commodo. Vivamus feugiat vulputate turpis eget faucibus. <br><br> Proin dictum, risus et tristique consequat, orci libero commodo metus, pulvinar interdum turpis tellus tempus mauris. Mauris mollis, erat in malesuada finibus, nisi elit convallis elit, ac suscipit leo sem ut magna. Maecenas auctor sem fermentum massa feugiat, a lacinia libero sagittis. Nam eu tortor eget elit lobortis elementum at vel ex. Quisque quis neque et nibh congue venenatis. Etiam pellentesque lorem eu facilisis ultricies. Nulla convallis fringilla vulputate. <br><br> Nam fringilla nisl non felis suscipit vestibulum. Integer eget justo in quam posuere dapibus. Donec faucibus arcu quis lorem pretium, at mattis ex tempor. Aliquam vel orci sem. Donec non sollicitudin orci. Vestibulum tempor, sapien eu porta lacinia, enim purus ornare lorem, vel tincidunt velit augue quis risus. Aliquam nulla nulla, efficitur sit amet libero vel, molestie vestibulum purus. Duis congue, nisl et aliquam auctor, turpis ligula tempor massa, sit amet facilisis nibh lorem vel ex. Integer sed massa a sapien aliquam luctus sit amet in magna. Donec vel eros in velit tincidunt bibendum. Vivamus non velit quis tellus tristique rhoncus sed eu massa. Ut a massa et magna imperdiet tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In cursus sapien non ipsum volutpat, varius rhoncus massa condimentum. Praesent non finibus lacus. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> </div> <!-- Footer --> <br> <footer class="page-footer font-small" style="background-color: #e3f2fd;"> <!-- Copyright --> <div class="footer-copyright text-center py-3">© 2020 Copyright: Bootstrap</div> <!-- Copyright --> </footer> </body> </html>


Lalu save project kalian dan jalankan di browser, maka hasilnya akan tampak seperti gambar di bawah ini. Yaitu sebuah halaman sederhana yang menampilkan menu di bagian atas, dan di bawahnya terdapat content dari halaman yang kita buat, content tersebut berada di tengah layar. Dan diakhir dengan footer.

sahretech
Sticky top menu with bootstrap



Penjelasan



<nav class="navbar navbar-expand-lg navbar-light bg-light" style="position:sticky; top:0; z-index:1;">

Script  position:sticky;  di atas kita gunakan agar menu tetap mengikuti saat halaman discroll ke atas atau ke bawah. Lalu kita set  top:0;  agar tidak ada spasi antara header dengan menu. Lalu  z-index:1;  kita gunakan untuk membuat menu berada di atas content.




<nav class="navbar navbar-expand-lg navbar-light bg-light" style="position:sticky; top:0; z-index:1<nav class="navbar navbar-expand-lg navbar-light bg-light" style="position:sticky; top:0; z-index:1;"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>;">

Adapun cara membuat menunya, kita menggunakan script di atas. Script di atas adalah contoh bawaan menu dari bootstrap. Kalian bisa menemukan contoh-contoh lain untuk membuat menu-menu yang berbeda.




<div class="row d-flex justify-content-center"> <div class="col-lg-10"> <div class="container"> <div class="card"> <div class="card-body"> <h1 class="card-title">Daftar Pelajaran</h1> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie, metus a rhoncus dapibus, nisl lorem finibus sapien, eu tincidunt est tellus in urna. Integer lobortis quam sed lectus placerat efficitur. Fusce dictum mattis lacus, ac venenatis ligula aliquet sit amet. Donec faucibus dictum urna non eleifend. Duis a auctor turpis. Fusce semper vulputate vestibulum. In volutpat lacinia venenatis. Pellentesque in turpis convallis, tincidunt neque id, elementum dui. Aenean nec laoreet enim, eget iaculis metus. Vestibulum eget lobortis quam. Aliquam ut arcu nec ligula vestibulum facilisis eu vel nibh. Sed sagittis leo eu mi pharetra interdum. <br><br> Maecenas vitae risus vel ante congue laoreet et at elit. Phasellus luctus accumsan finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet egestas quam, a tincidunt sapien tempor at. Mauris quis semper velit, vel tempus lectus. Proin quis condimentum urna. Pellentesque ut dui nec ex finibus faucibus. Vestibulum eleifend ante nec felis tempus, sit amet imperdiet dui varius. Donec at felis porta quam lobortis pulvinar ut non diam. Cras orci nibh, efficitur in mollis sit amet, vestibulum vitae nunc. In volutpat, tortor vel viverra volutpat, lorem risus interdum sapien, ut aliquet lorem dolor eget nibh. In purus dui, eleifend congue dui rhoncus, feugiat dapibus dolor. Integer semper neque felis, eget bibendum quam pharetra at. Etiam quis dui neque. <br><br> Vestibulum facilisis venenatis ex, quis luctus massa efficitur vitae. Curabitur eu mi faucibus mi rutrum aliquam in sed magna. Nulla bibendum pulvinar mi ac tempus. Maecenas scelerisque consectetur nisl, at vestibulum diam posuere eu. Praesent in aliquet massa, sed fringilla neque. Morbi vehicula lectus mattis, pellentesque erat id, condimentum massa. Aliquam cursus rutrum purus vel vestibulum. Maecenas risus mi, tristique posuere sodales nec, sodales maximus arcu. Quisque porttitor velit quis risus luctus, nec finibus mauris commodo. Vivamus feugiat vulputate turpis eget faucibus. <br><br> Proin dictum, risus et tristique consequat, orci libero commodo metus, pulvinar interdum turpis tellus tempus mauris. Mauris mollis, erat in malesuada finibus, nisi elit convallis elit, ac suscipit leo sem ut magna. Maecenas auctor sem fermentum massa feugiat, a lacinia libero sagittis. Nam eu tortor eget elit lobortis elementum at vel ex. Quisque quis neque et nibh congue venenatis. Etiam pellentesque lorem eu facilisis ultricies. Nulla convallis fringilla vulputate. <br><br> Nam fringilla nisl non felis suscipit vestibulum. Integer eget justo in quam posuere dapibus. Donec faucibus arcu quis lorem pretium, at mattis ex tempor. Aliquam vel orci sem. Donec non sollicitudin orci. Vestibulum tempor, sapien eu porta lacinia, enim purus ornare lorem, vel tincidunt velit augue quis risus. Aliquam nulla nulla, efficitur sit amet libero vel, molestie vestibulum purus. Duis congue, nisl et aliquam auctor, turpis ligula tempor massa, sit amet facilisis nibh lorem vel ex. Integer sed massa a sapien aliquam luctus sit amet in magna. Donec vel eros in velit tincidunt bibendum. Vivamus non velit quis tellus tristique rhoncus sed eu massa. Ut a massa et magna imperdiet tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In cursus sapien non ipsum volutpat, varius rhoncus massa condimentum. Praesent non finibus lacus. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div>

Untuk membuat konten berada di tengah, saya menggunakan class  d-flex justify content-center . Dan untuk ukuran columnnya adalah  col-lg-10  dimana jika kita menggunakan bootstrap maka panjang maksimal column adalah  col-lg-12  Kemudian untuk mempercantik tulisan di dalamnya, saya menggunakan card bootstrap.


Ok, itulah Snippet Code: Membuat Menu(Atas) Tettap Mengikuti Saat Halaman Discroll. Semoga bermanfaat, bagi kalian yang masih bingun dengan penjelasan saya di atas, silahkan ditanyakan di kolom komentar di bawah ini. Sampai jumpa di tutorial keren lainnya, Happy Coding 


No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik