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 banyak 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.