Cara Membuat Scroll Menu Horizontal di Blogger

Menu navigasi memiliki banyak sekali variasi dan style, diantaranya, Fixed top, affix, sidemenu, scroll menu, dll. Dan kali ini saya akan bagikan cara membuat scroll menu. Sudah siap?
Scroll menu yang dimaksud disini hanya memanfaatkan overflow, tanpa JavaScript, jQuery, maupun kode lainnya. Scroll menu ini berguna sekali pada tampilan mobile. Oke, mari dimulai

CONTOH

HOME ABOUT CONTACT SERVICES BLOG PROJECTS MENU 1 MENU 2 MENU 3 MENU 4 MENU 5 MENU 6

#LANGKAH 1 - HTML

Pertama, buatlah terlebih dahulu markup HTML menu navigasi. Kamu bisa menempatkannya dimana saja, untuk tampilan yang cocok, tempatkan tepat dibawah </header>.

Markup HTML

<div class='scroll-menu'>
  <a href='#'>HOME</a>
  <a href='#'>ABOUT</a>
  <a href='#'>CONTACT</a>
  <a href='#'>SERVICES</a>
  <a href='#'>BLOG</a>
  <a href='#'>PROJECTS</a>
  <a href='#'>MENU 1</a>
  <a href='#'>MENU 2</a>
  <a href='#'>MENU 3</a>
  <a href='#'>MENU 4</a>
  <a href='#'>MENU 5</a>
  <a href='#'>MENU 6</a>
</div>

#LANGKAH 2 - CSS

Sekarang, tinggal tambahkan CSS. Seperti biasa, tempatkan didalam b:skin atau, kalau bingung, tempatkan diatas ]]></b:skin>.

CSS

.scroll-menu {
  background-color: #dddddd;
  white-space: nowrap;
  overflow: auto;
}

.scroll-menu a {
  color: #333;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding: 14px;
  transition: background-color 0.4s ease-in-out;
  -webkit-transition: background-color 0.4s ease-in-out;
}

.scroll-menu a:hover {
  background-color: #eee;
  text-decoration: none;
}

Coba simpan dan lihat hasilnya, resize browser atau kunjungi blog pada smartphone atau perangkat dengan layar kecil.

KETERANGAN

Gunakan nowrap pada white-space agar konten mengabaikan viewport yang ada di template, konten tidak akan wrapping saat dikunjungi pada layar kecil.

Gunakan overflow: auto daripada overflow: hidden agar konten dapat ditampilkan semua dan dapat di scroll.

Good luck..

_____________________
featured image source: stackoverflow.com
content source: w3schools.com