Membuat Menu Bar Responsive Mengecil Saat Di Scroll atau Di Gulir Kebawah

komputerdia.com - Dari sekian banyak jenis menu bar yang bisa kalian pasang di situs atau blog, jenis menu bar inilah yang paling banyak dicari para blogger. Pasalanya jenis menu bar ini selain bisa mengecil saat kursor di scroll, menu bar atau menu navigasi ini juga terlihat sangat professional serta user friendly.

Bagi kalian yang menginginkan janis menu bar dengan gaya yang lainnya, kalian dapat mengulasnya pada artikel terkait dibawah ini :

Baca Juga :


Membuat Menu Bar Mengecil Saat Di Scroll

  • Silahkan kalian login ke akun blogger
  • Masuk ke menu template atau thema kemudian cari kode </head> .
  • Copy dan tempelkan kedua kode dibawah ini tepat diatas kode </head> .
<style type='text/css'>
  header1 {
   width: 100%;
   height: 150px;
   overflow: hidden;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
   background-color: #0683c9;
   -webkit-transition: height 0.3s;
      -moz-transition: height 0.3s;
      -ms-transition: height 0.3s;
      -o-transition: height 0.3s;
      transition: height 0.3s;
  }
  
  header1 h1#logo {
   font-family: "Oswald", sans-serif;
   font-size: 60px;
   font-weight: 400;
   line-height: 150px;
   display: inline-block;
   float: left;
   height: 150px;
    margin: 0;
    padding: 0;
   color: #fff;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
  }
  
  header1 nav1 {
    display: inline-block;
    float: right;
  }
  
  header1 nav1 a {
  line-height: 150px;
  margin-left: 20px;
  color: #9fdbfc;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  }
  
  /* smaller nav1 */
  
  header1 nav1 a:hover {
    color: #ffffff;
  }
  
  header1.smaller {
      height: 75px;
  }
  header1.smaller h1#logo {
      width: 150px;
      height: 75px;
      line-height: 75px;
      font-size: 30px;
  }
  header1.smaller nav1 a {
      line-height: 75px;
  }
  
  
  @media all and (max-width: 660px) {
      header1 h1#logo {
          display: block;
          float: none;
          margin: 0 auto;
          height: 100px;
          line-height: 100px;
          text-align: center;
      }
      header1 nav1 {
          display: block;
          float: none;
          height: 50px;
          text-align: center;
          margin: 0 auto;
      }
      header1 nav1 a {
          line-height: 50px;
          margin: 0 10px;
      }
      header1.smaller {
          height: 75px;
      }
      header1.smaller h1#logo {
          height: 40px;
          line-height: 40px;
          font-size: 30px;
      }
      header1.smaller nav1 {
          height: 35px;
      }
      header1.smaller nav1 a {
          line-height: 35px;
      }
  }
</style>
<script type='text/javascript'>
    function init() {
        window.addEventListener('scroll', function(e){
          var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 200,
            header1 = document.querySelector("header1");
          if ((distanceY) > (shrinkOn)) {
            $(header1).addClass("smaller");
          } else { 
            if ($(header1).hasClass("smaller")) {
              $(header1).removeClass("smaller");
            }
          }
      });
    }
    init();
  </script>
  • Selanjutnya cari kode <body> , dan tempelkan kode dibawah ini tepat dibawah kode <body> .
 <header1 class='site-header1'>
      <div class='container clearfix'>
        <h1 id='logo'>
                LOGO
            </h1>
        <nav1>
          <a href=''><b>Home</b></a>
          <a href=''><b>Menu</b></a>
          <a href=''><b>Data</b></a>
        </nav1>
      </div>
    </header1>
  • Langkah terakhir silahkan kalian tekan tombol simpan atau save, dan lihat hasilnya.
  • Bagi kalian yang tidak berhasil membuat menu bar seperti ini, kemungkinan kode template kalian tidak mempunyai struktur kode pemanggil jenis menu bar seperti ini, maka untuk solusinya silahkan kalian tempelkan kode dibawah ini tepat diatas kode </head> .
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>
  • Simpan template kalian dan lihat hasilnya.

Sumber Referensi : https://mastamvan.blogspot.co.id/
.
.

Berlangganan Artikel terbaru (free):

Post a Comment