Cara Membuat Menu Tetap Muncul Saat Discroll  Cara buat blog itu- 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 aba-aba CSS dan Javascript.

Tutorial ini terdiri dari dua, yakni menimbulkan 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 aba-aba berikut ini di atas aba-aba ]]></b:skin>

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

3. Copas aba-aba Javascript berikut ini di atas aba-aba </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 aba-aba warna merah (navbar). Ganti dengan nama aba-aba 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 aba-aba CSS berikut ini di atas aba-aba ]]></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 aba-aba HTML berikut ini di bawah aba-aba </header> atau di atas aba-aba 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 aba-aba javascript berikut ini di atas aba-aba </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.carabuatblogitu.com).


Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours