Menu Navigasi Scroll Samping Seperti Template Textrim

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.

Artikel Terkait

15 komentar

Komentar TIDAK DAPAT DIHAPUS setelah dikirim. Pikirkan sebelum menulis.
  • 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>
  • MasakanBoenda (Dini)
    4/7/22
    Profil: https://www.blogger.com/profile/03854716840156980498
    Mbak bagaimana cara biar biar label otomatis bisa scroll ke samping, minta tutor nya mbak..
  • ⠀
    21/8/21
    Profil: https://www.blogger.com/profile/14861092182195724906
    gagal mbak saya pakai theme viomagz
  • Admin
    1/6/21
    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
      2/6/21
      Profil: https://www.blogger.com/profile/09199170379661896200
      Di atas penutup </b:skin>
  • Bangali
    2/4/21
    Profil: https://www.blogger.com/profile/07222182646899293407
    Template nya bagus mantap mbak,🙏
  • PayuBaco
    19/2/21
    Profil: https://www.blogger.com/profile/02293372772988889351
    Izin bertanya mbak, apakah ini bekerja di Template fiksioner mbak? Terima kasih.
    • Igniel
      2/6/21
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bekerja di semua tema mas.
  • Admin Situsnesia
    12/1/20
    Profil: https://www.blogger.com/profile/10092869083705542890
    Terimakasih banyak mbak, mau dicoba di template igniplex terbaru
  • Deva Setiawan
    16/12/19
    Profil: https://www.blogger.com/profile/01923803235923960447
    Terima Kasih
  • Rizki Artinio
    23/10/19
    Profil: https://www.blogger.com/profile/16282468716594310986
    agar menu tdk menutupi judul halaman bagaimana ya mbak?
    https://hyperlinku.blogspot.com
  • Mas uki
    19/10/19
    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/10/19
    Profil: https://www.blogger.com/profile/00526825525563935443
    Kode css nya sangat sederhana, tapi hasilnya luar biasa.
    Saya lihat demonya keren juga
  • Unknown
    11/10/19
    Profil: https://www.blogger.com/profile/17163696379316304195
    Buat artikel tentang fitur igniplex😆
    • Fafford
      12/10/19
      Profil: https://www.blogger.com/profile/05433012404910216895
      setuju