Menu Navigasi Scroll Samping Seperti Template Textrim

Cara membuat menu navigasi dengan scroll ke samping (horizontal) seperti pada template Blogger Textrim. Efek dibuat hanya menggunakan CSS sederhana.
Horizontal Scroll Menu

Saya akan kembali membagikan kode sumber (source code) dari salah satu template gratis yang telah dibuat yaitu Textrim. Kali ini yang akan dibahas adalah mengenai menu navigasi bagian atas. Menu ini cukup menyita perhatian sekaligus menimbulkan banyak pertanyaan dari pengguna karena bentuknya yang tidak lazim. Disebut demikian karena bentuknya yang mendorong ke samping dan untuk melihat semua menunya harus dilakukan aktifitas gulir (scroll) secara horizontal.

Padahal menu scroll horizontal telah dipakai oleh berbagai situs besar baik dari Indonesia maupun luar negeri. Namun jumlahnya tidak sebanyak navigasi biasa (kebanyakan berupa menu dropdown) sehingga tetap terlihat "aneh" bagi sebagian orang. Saya sendiri membuat menu scroll ke pinggir ini terinspirasi dari situs Kaskus kok. Jadi sebenarnya lazim dan wajar, cuma perlu disosialisasikan lebih lanjut pada pengunjung.

Bagi orang yang benar-benar belum pernah melihat navigasi gulir samping, menu akan terlihat seperti terpotong. Padahal tidak. Cuma perlu di-scroll ke kanan dan kiri.


Cara Membuat Menu Scroll Horizontal ala Textrim

Untuk membuat navigasi scroll samping seperti Textrim, yang dibutuhkan hanyalah kreatifitas dalam mengulik kode CSS. Tidak perlu tuh Javascript segala. Dan yang saya bagikan ini adalah kode dasarnya. Bisa jadi tidak cocok dengan template yang sedang digunakan karena bentrok dengan kode CSS bawaan template. Jika terjadi ketidak-sesuaian dengan demo, silakan ulik dan ubah lagi sendiri ya.

Pertama, simpan kode HTML berikut di tempat dimana menu akan dimunculkan. Biasanya sih di header ya. Tinggal edit link dan title yang terdapat di dalamnya.

<!-- Navigation Menu Horizontal Scroll by igniel.com -->
<div class="ignielHorizontal">
  <ul>
    <li><a href="#" title="Download">Download</a></a></li>
    <li><a href="#" title="Tutorial">Tutorial</a></li>
    <li><a href="#" title="Video">Video</a></li>
    <li><a href="#" title="Subscribe">Subscribe</a></li>
    <li><a href="#" title="HTML5">HTML5</a></li>
    <li><a href="#" title="CSS3">CSS3</a></li>
    <li><a href="#" title="Javascript">Javascript</a></li>
    <li><a href="#" title="Make Money Online">Make Money Online</a></li>
    <li><a href="#" title="Study Case">Study Case</a></li>
  </ul>
</div>

Kedua, simpan kode CSS berikut agar menunya bisa scroll ke samping dengan lancar.

/*  Navigation Menu Horizontal Scroll by igniel.com */
.ignielHorizontal ul {
  background-color: #673ab7; /* Warna background menu */
  max-width: 100%; /* Lebar maksimal menu */
  overflow-x: auto;
}
.ignielHorizontal {
  color: #fff;
  line-height: 0px;
  overflow: hidden;
}
.ignielHorizontal a {
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  padding: 10px 13px;
  line-height: 1.5em;
  display: block;
}
.ignielHorizontal a:hover {
  background-color: rgba(0,0,0,.25);
  color: #fff;
  text-decoration: none;
}
.ignielHorizontal ul, .ignielHorizontal li {
  list-style: none;
  display: inline-block;
  white-space: nowrap;
  margin: 0px;
  padding: 0px;
}
@media screen and (max-width: 480px){
  .ignielHorizontal a {
    font-size: 13px;
    padding: 8px 11px;
  }
}
@media screen and (max-width: 360px){
  .ignielHorizontal a {
    font-size: 12px;
    padding: 7px 10px;
  }
}

PERHATIKAN! Yang ditandai 100% adalah lebar maksimal dari menu yang jumlahnya akan mengikuti lebar dari induknya. Dalam contoh ini, saya membuat sebuah halaman dengan lebar maksimal body 600px, maka lebar maksimal menu pun akan sama, yaitu 600px.

Efek overflow yang membuat menu bisa digeser ke samping baru akan muncul jika jumlah keseluruhan link yang terdapat pada menu menghasilkan lebar yang lebih dari 600px. Jika kurang dari itu, maka menu akan terlihat biasa saja tanpa bisa digeser-geser. Jadi kalau nantinya efek scroll belum muncul, cek dulu nilai max-width dari header atau induk lain yang menjadi tempat disimpannya menu ini.

Hasilnya akan seperti berikut. Harap diingat ya, ini cuma kode dasar. Lakukan perubahan sesuai template jika tidak sesuai dengan demo. Jangan takut untuk mengulik.

Oke selesai sudah artikel sederhana tentang tutorial membuat menu navigasi scroll ke samping ala Textrim Blogger Theme. Bagikan pengalaman kamu dalam menggunakan kode di atas pada kolom komentar.

16
Menu Navigasi Scroll Samping Seperti Template Textrim
Menu Navigasi Scroll Samping Seperti Template Textrim
Cara membuat menu navigasi dengan scroll ke samping (horizontal) seperti pada template Blogger Textrim. Efek dibuat hanya menggunakan CSS sederhana.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn

Artikel Terkait

16 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Mohammad Bulbul Sikder
    30 September, 2023
    Profil: https://www.blogger.com/profile/18400371095466608419
    Dark mode..... Background not change. How to adjust dark mode bg color?
  • Jiじ
    15 November, 2022
    Profil: https://www.blogger.com/profile/09886452788688705534
    Mba kalau mau nambahin menu dropdown di scrool samping itu gimana caranya?
  • Admin@technologydevelopment.info
    04 Juli, 2022
    Profil: https://www.blogger.com/profile/03854716840156980498
    Mbak bagaimana cara biar biar label otomatis bisa scroll ke samping, minta tutor nya mbak..
    • Admin@saluraninformasi.com
      06 Juli, 2022
      Profil: https://www.blogger.com/profile/12205759475056448050
      iya saya juga butuh
  • ⠀
    21 Agustus, 2021
    Profil: https://www.blogger.com/profile/14861092182195724906
    gagal mbak saya pakai theme viomagz
  • PCNU LANDAK
    01 Juni, 2021
    Profil: https://www.blogger.com/profile/08754639297409746138
    kebetulan saya pakai template igniplex premium tutor ini sya terapkan dan gagal kk.... yg mau sya tnyakan html letakkan di bawah dan cssnya apakah diletakkan di atas skin???? sya pakai cara ini dn ggal diterapkan di igniplex.... cek munzalan.com
    • Igniel
      02 Juni, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Di atas penutup </b:skin>
  • Bangali
    02 April, 2021
    Profil: https://www.blogger.com/profile/07222182646899293407
    Template nya bagus mantap mbak,🙏
  • PayuBaco
    19 Februari, 2021
    Profil: https://www.blogger.com/profile/02293372772988889351
    Izin bertanya mbak, apakah ini bekerja di Template fiksioner mbak? Terima kasih.
    • Igniel
      02 Juni, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bekerja di semua tema mas.
  • Admin Situsnesia
    12 Januari, 2020
    Profil: https://www.blogger.com/profile/10092869083705542890
    Terimakasih banyak mbak, mau dicoba di template igniplex terbaru
  • Deva Setiawan
    16 Desember, 2019
    Profil: https://www.blogger.com/profile/01923803235923960447
    Terima Kasih
  • Rizki Artinio
    23 Oktober, 2019
    Profil: https://www.blogger.com/profile/16282468716594310986
    agar menu tdk menutupi judul halaman bagaimana ya mbak?
    https://hyperlinku.blogspot.com
  • Iamuki
    19 Oktober, 2019
    Profil: https://www.blogger.com/profile/17216426145973668268
    Mba request artikel cara membuat background pada huruf pertama di Header, seperti di template ignplex. Mohon direspon trimakasih
  • Djangkaru Bumi
    15 Oktober, 2019
    Profil: https://www.blogger.com/profile/00526825525563935443
    Kode css nya sangat sederhana, tapi hasilnya luar biasa.
    Saya lihat demonya keren juga