Sticky Menu adalah sebuah menu navigasi website yang dikunci pada tempatnya sehingga tidak hilang ketika pengguna menggulirkan mousenya ke bawah halaman, dengan kata lain dapat diakses dengan mudah karena selalu terlihat. Dibuat dengan mudah menggunakan Murni Javascript berukuran kecil serta sentuhan CSS minimalis dan tanpa JQuery.

Banyak blog atau website populer menambahkan fungsi navigasi menu ini agar tetap terlihat di bagian atas. Ketika pengguna menggulirkan mouse ke bawah halaman dan bagian atas menu navigasi tetap menempel dan tetap terlihat. Ini bermaksud untuk memudahkan kepada pengunjung dan tidak harus kembali menggerakan mousenya ke bagian atas untuk menjelajahi halaman yang lainnya.

DEMO Sticky Menu Responsive

Teknik sticky ini sebenarnya dapat diterapkan untuk elemen lainnya, seperti bagian samping (sidebar), tombol atau media social sharing/like, dan bagian footer. Namun tentu saja cara mengaplikasikannya berbeda-beda. Dibawah ini penjelasan yang difokuskan pada menu navigasi utama menggunakan javascript.

Cara Membuat Sticky Menu Responsive:

Masukan kode CSS style dibawah ini pada bagian <head> atau sebelum </head>.

<style>
body {
overflow: hidden;
}
#header-main nav {
  position: relative;
}

@media (max-width:768px) {
  #header-main nav.menu-active {
    display: block;
    clear: both;
  }
}

.menu-main {
  border-bottom: 1px solid #9ba1ce;
  border-top: 1px solid #dde7ff;
}

.menu {
  margin: 0 auto;
  max-width: 1180px;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: inline-block;
  color: #19316d;
  font-weight: 700;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: .3s;
  font-size: 15px;
  text-transform: uppercase;
}

ul.topnav li a:hover {
  color: #f2f2f2;
  background-color: #059c09;
  text-shadow: 2px 1px #172035;
}

ul.topnav li.icon {
  display: none;
}

@media screen and (max-width:800px) {
  #header-main {
    background: #244e79;
  }

  .navi {
    padding: 0!important;
    margin: 0;
  }

  ul.topnav li:not(:first-child) {
    display: none;
  }

  ul.topnav li.icon {
    float: right;
    display: inline-block;
    background: #059c09;
    height: 46px;
  }

  ul.topnav li a {
    color: #f2f2f2;
    text-shadow: none;
  }

  ul.topnav.responsive {
    position: relative;
  }

  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
    height: 44px;
  }

  ul.topnav.responsive li.icon a {
    border: none;
  }

  ul.topnav.responsive li.icon a:hover {
    background-color: transparent;
  }

  ul.topnav.responsive li {
    float: none;
    display: inline;
  }

  ul.topnav.responsive li a {
    display: block;
    text-align: left;
    border-bottom: 1px solid #839bbb;
  }
}

@media screen and (min-width:801px) {
  #header-main.active nav ul.topnav li a {
    color: #f2f2f2;
    text-shadow: none;
  }
}

#header-main.active {
  z-index:99;
  background-color: #142e5f;
  position: fixed;
  top: 0;
  width: 100%;
  margin-bottom: 0;
  -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,.38);
  -moz-box-shadow: 0 3px 3px 0 rgba(0,0,0,.38);
  -ms-box-shadow: 0 3px 3px 0 rgba(0,0,0,.38);
  -o-box-shadow: 0 3px 3px 0 rgba(0,0,0,.38);
  box-shadow: 0 3px 3px 0 rgba(0,0,0,.38);
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  -ms-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
}

#header-main.active ul.topnav li a {
  font-size: 13px;
  padding: 12px 15px;
}

@media screen and (max-width:800px) {
  #header-main.active ul.topnav li a {
    font-size: 13px;
    padding: 10px 15px;
  }

  #header-main.active ul.topnav li.icon,#header-main.active ul.topnav li.icon img {
    height: 35px;
  }
}
</style>

Masukan kode HTML dibawah ini dibagian yang sepantasnya suatu Menu Navigasi berada, misalnya dibawah Header.

<div class="ads-top ads-site adZone sponsor-promo" id="header-main">
  <nav class="menu-main">
    <div class="menu">
  <ul class="topnav" id="myTopnav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
      <li><a href="#">Privacy Policy</a></li>
      <li><a href="#">Kontak</a></li>
      <li><a href="#">Disclaimer</a></li>
      <li><a href="#">Kategori</a></li>
  <li class="icon"><a class="navi" href="javascript:void(0);" onclick="myFunction()"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAMAAAANxBKoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAAAKUlEQVR42mJgJAUwjKoehqoZ8ICRqnoQxeVo7IzmtNG4HFVNR9UAAQYAX8EF85Z3JE8AAAAASUVORK5CYII=" alt="menu"></a></li>
  </ul>
    </div>
  </nav>
</div>

Gantilah Link dan Nama Menu pada HTML tersebut dengan Link dan Nama Menu Tautan yang dikehendaki sesuai keinginan yang sebagimana mestinya, agar dapat mengarahkan pengunjung ke halaman yang benar.

Masukan kode dibawah ini dibaris paling bawah suatu “template” atau “theme” atau sebelum </body>

<script>
function myFunction(){var x = document.getElementById("myTopnav");if (x.className === "topnav"){x.className += " responsive"}else{x.className = "topnav"}};!function(){function a(){b(e,i,f)}function b(a,b,c){y=pageYOffset,y>c?a.className=b: a.className=""}function c(a,b){a.className=a.className?"": b}function d(a){return document.getElementById(a)}var e=d("header-main"),f=300,g=d("menu-main"),h="menu-active",i="active";window.addEventListener("scroll",a),onclick=function(){c(g,h)}}();
</script>

Selesai.

Catatan: Panduan pemasangan Sticky Menu Navigasi tersebut diatas dapat dimodifikasi dibagian CSS style agar bisa lebih dipercantik atau kelihatan lebih bagus sesuai dengan keinginan.

Kebanyakan desainer atau webmaster akan setuju bahwa menu navigasi merupakan salah satu komponen yang paling penting dari sebuah website. Meskipun demikian, tidak selalu mudah untuk menggunakan atau mengaksesnya. Secara umum, pengguna harus menggulirkan mouse kembali ke atas website untuk mengakses menu navigasi, dengan catatan HTML Menu tersebut memiliki lebar 100%.