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

Navigasi sajian yang tetap tampil ketika 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, yakni instruksi CSS dan Javascript.

Tutorial ini terdiri dari dua, yakni mengakibatkan sajian yang ada menjadi stricky atau melayang dan satu lagi menciptakan sajian statis --termasuk menciptakan menunya.

Lihat Demo

Cara Menjadikan Menu Tetap Muncul Saat Discroll 

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

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

3. Copas instruksi Javascript berikut ini di atas instruksi </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 instruksi warna merah (navbar). Ganti dengan nama instruksi navigasi sajian di template Anda, contohnya 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 menciptakan navigasi menunya. Bisa diterapkan bagi blog Anda yang belum punya menu, menyerupai template bawaan blogger.

1.Tema >  Edit HTML
2. Copas instruksi CSS berikut ini di atas instruksi ]]></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 kafe gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

3. Copas instruksi HTML berikut ini di bawah instruksi </header> atau di atas instruksi menyerupai <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 instruksi javascript berikut ini di atas instruksi </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.idtutorial.com).


Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours