Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar)

Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar)

Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar)
Berikut ini Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar).

Navigasi menu yang tetap tampil saat halaman discroll ke bawah ini disebut juga static menu (menu statis),  floating menu (menu melayang), atau fixed menu.

Cara membuatnya mudah.

Hanya memasang dua jenis kode, yaitu kode CSS dan Javascript.

Tutorial ini terdiri dari dua, yaitu menjadikan menu yang ada menjadi stricky atau melayang dan satu lagi membuat menu statis --termasuk membuat menunya.

Lihat Demo

Cara Menjadikan Menu Tetap Muncul Saat Discroll 

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

.sticky {position: fixed;top: 0;width: 100%;}
.sticky + .content {padding-top: 60px;}

3. Copas kode Javascript berikut ini di atas kode </body>

<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

Perhatikan kode warna merah (navbar). Ganti dengan nama kode navigasi menu di template Anda, misalnya navmenu, menunav, main-menu, topmenu, dan semisalnya. 

4. Save!

Cara Membuat Menu Tetap Muncul Saat Discroll

Berikut ini Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar) termasuk membuat navigasi menunya. Bisa diterapkan bagi blog Anda yang belum punya menu, seperti template bawaan blogger.

1.Tema >  Edit HTML
2. Copas kode CSS berikut ini di atas kode ]]></b:skin>

/* Style the navbar */
#navbar {
  overflow: hidden;
  background-color: #333;
}
/* Navbar links */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
/* Page content */
.content {
  padding: 16px;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

3. Copas kode HTML berikut ini di bawah kode </header> atau di atas kode seperti <div id='content-wrapper'>  atau <div id='main-wrapper'>

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

4. Copas kode javascript berikut ini di atas kode </body>

<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

5. Save! Simpan Template.

Demikian Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar). Good Luck & Happy Blogging! (www.contohblog.com).


Thanks for reading Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar) | Labels: Blogging, Desain Blog

2 komentar on Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar)

  1. Apakah hasilnya mirip sama template viomags? Ane pake template speed up bmaz, kira-kira header sama menunya bisa dirubah mirip kaya template viomag gak ya om? Terimakasih

    ReplyDelete

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *