Cara Mudah Membuat Menu Scroll Horizontal di HTML
Seotechman.com, Bogor 21/01/2019. 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 scroll horizontal, pada artikel sebelumnya saya sudah menerangkan bagaimana Cara Membuat Navigation Bar. Namun tidak jauh berbeda dengan artikel yang akan saya bahas kali ini, yang intinya sama-sama menu.
Bagaimanakah Cara Membuat Menu Aktif Scroll Horizontal Di HTML?
Sangat mudah, tidak sulit sama sekali. Loh koq bisa mudah gitu? Ya memang mudah karena kita hanya perlu membuatnya dengan HTML & Css saja.
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.
Cara Membuat Scroll Horizontal
Langkah-langkahnya:
1. Masuk ke dashboard Blogger
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>
Kode CSS
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:Kode HTML
<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.
Bagaimana jika kita membuatnya bukan diplatform Blogger, melainkan di HTML?
Cara Membuat Menu Scroll Horizontal di HTML
Simak dan perhatikan dibawah ini: Langkah pertama adalah, buat sebuah file Css dan beri nama style.css salin kode berikut:
Kode CSS
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;
}
Kode HTML
<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 tutorial, cara mudah membuat menu scroll horizontal. Akhir kata saya ucapkan, terimakasih.
