Cara Membuat Menu Tetap Muncul Saat Discroll

Cara Membuat Menu Tetap Muncul Saat Discroll - Navigasi menu yang tetap tampil saat halaman discroll ke bawah disebut juga static menu (menu statis),  floating menu (menu melayang), atau fixed menu.

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

Cara Membuat 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

<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. Simpan..

Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar)
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. Kemudian Klik Simpan Template.

Demikian adalah cara membuat menu navigasi tetap muncul pada saat di Scroll Ke bawah, Semoga Artikel ini bermanfaat.

Share this post