Cara Mudah Membuat Scroll Horizontal Menu Pure Css


Cara Mudah Membuat Scroll Horizontal Menu Pure Css

Pada umumnya sebuah menu yang terdapat pada website atau blog, memang diharuskan. Kenapa diharuskan? Karena berguna untuk memudahkan para pengunjung agar bisa menjelajahi situs kalian dengan mudah bila adanya menu tersebut.

Dapat dipastikan juga, jika para pengunjung itu akan betah berlama-lama disitus kalian apalagi ditambah dengan artikel yang mereka sedang cari, semuanya ada dan lengkap.

Tidak hanya menu bar saja, hampir 100% nya semua website menambahkan sebuah FORM SEARCH dengan kegunaan yang sama seperti menu bar.

Bicara tentang menu bar, pada artikel sebelumnya saya sudah menerangkan bagaimana Cara Membuat Navigation Bar Keren. Namun tidak jauh berbeda dengan artikel yang akan saya bahas kali ini, yang intinya sama-sama menu.

Bagaimanakah Cara Membuat Menu Aktif Horizontal Scroll?

Sangat mudah, tidak sulit sama sekali. Loh koq bisa mudah gitu? Ya memang mudah karena kita hanya perlu membuatnya dengan Css saja tidak perlu javascript ataupun yang lainnya.

Nah, jika kalian tertarik mari kita lanjutkan. Untuk cara dan langkah-langkahnya bisa kalian simak dan perhatikan dibawah.
Sudah tidak sabarkan? Ok kita langsung mulai saja tanpa perlu banyak kata.

Langkah-langkahnya:
1. Masuk ke dashboard Blogger kalian.
2. Setelah itu klik Tema -> Edit Html dan cari kode ]]></b:skin> atau bisa juga </style>.
3. Salin kode CSS berikut ini, dan tempelkan tepat diatas ]]></b:skin>.

div.scrollmenu {
  background-color: #f5f5f5;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: #afafaf;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background:rgba(0,0,0,0.2);
  color:#fff;
  border-bottom: 3px solid #48d1cc;
}

div.scrollmenu a.active {
  border-bottom: 3px solid #48d1cc;
}
4. Klik simpan template.
Setelah selesai dengan langkah pertama, selanjutnya langkah kedua yaitu buat html nya seperti kode dibawah ini:

<div class="scrollmenu">
<a href="" class="active">Home</a>
<a href="">About</a>
<a href="">Contact</a>
<a href="">Disclaimer</a>
<a href="">Privacy</a>
<a href="">Sitemap</a>
<a href="">Tos</a>
</div>
Salin dan tempel dibawah kode </body> atau terserah kalian, mau ditempel dimana, atau bisa juga pada bagian footer.

Jika sudah selesai semua, waktunya kalian untuk melihat hasilnya. Untuk link demo nya bisa dilihat dibawah ini:

Live Demo

Bagaimana jika kita membuatnya bukan diplatform Blogger, melainkan di HTML?

Simak dan perhatikan dibawah ini: Langkah pertama adalah, buat sebuah file Css dan beri nama style.css salin kode berikut:

div.scrollmenu {
  background-color: #f5f5f5;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: #afafaf;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background:rgba(0,0,0,0.2);
  border-bottom: 3px solid #48d1cc;
}

div.scrollmenu a.active {
  border-bottom: 3px solid #48d1cc;
}
Lalu kalian tempel kode css nya didalam file style.css tersebut dan simpan. Selanjutnya buat sebuah file index.

<div class="scrollmenu">
<a href="#home" class="active">Home</a>
<a href="">About</a>
<a href="">Contact</a>
<a href="">Disclaimer</a>
<a href="">Privacy</a>
<a href="">Sitemap</a>
<a href="">Tos</a>
</div>
Jika sudah kalian simpan file tersebut. Untuk pemasangan lebih jelas dan keseluruhannya, bisa dilihat dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Demo Menu Horizontal Scroll</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="scrollmenu">
<a href="" class="active">Home</a>
<a href="">About</a>
<a href="">Contact</a>
<a href="">Disclaimer</a>
<a href="">Privacy</a>
<a href="">Sitemap</a>
<a href="">Tos</a>
</div>
</body>
</html>
Bagaimana menurut kalian, mudah bukan? Tentunya sangat mudah dan simple, jika ingin merubahnya kalian bisa explore dengan mengedit Css nya dan sesuaikan dengan selera kalian masing-masing.

Mungkin saya rasa sudah cukup jelas untuk pembahasan kali ini, kurang atau lebihnya saya mohon maaf semoga artikel ini bermanfaat.

Dan jangan lupa subscribe blog ini, untuk mendapatkan artikel terbaru lainnya. Jika menurut kalian artikel ini bermanfaat, tolong dishare pada yang lain.

Demikianlah Pembahasan kali ini Cara Mudah Membuat Scroll Horizontal Menu Pure Css. Akhir kata saya ucapkan, terimakasih.

Blogger
Disqus
Select your comment system