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.
 |
| 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
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi