Saya akan pulang menunjukkan kode asal (source code) dari galat satu template gratis yang telah dibuat yaitu Textrim. Kali ini yang akan dibahas adalah tentang menu navigasi bagian atas. Menu ini relatif menyita perhatian sekaligus menyebabkan banyak pertanyaan berdasarkan pengguna lantaran bentuknya yg tidak lazim. Disebut demikian karena bentuknya yang mendorong ke samping
Cara Membuat Menu Scroll Horizontal ala Textrim
<!-- 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>
/* 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; } }
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.
Hasilnya akan seperti berikut. Harap diingat ya, ini cuma kode dasar. Lakukan perubahan sesuai template jika tidak sesuai dengan demo. Jangan takut untuk mengulik.
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.
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.
Kedua, simpan kode CSS berikut agar menunya bisa scroll ke samping dengan lancar.
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.
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.
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.
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.
