Cara Membuat Menu Navigasi Scroll Horizontal Kesamping di Blogger

Jagoandzgn.com - Pada artikel kali ini saya akan membagikan bagaimana Cara Membuat Menu Navigasi Scroll Kesamping di Blogger, fitur ini adalah salah satu fitur yang digunakan oleh textrim yang dibuat oleh mbak igniel. Menu ini cukup menyita perhatian sekaligus banyak menimbulkan pertanyaan dari pengguna karena bentuknya sangat langkah untuk ditemukan kata mbak igniel. Disebut demikian dikarenakan bentuknya yang mendorong kesamping dan melihatkan semua menu dan aktivitas scroll secara horizontal.

Menu ini telah sering dipakai oleh berbagai situs indonesia maupun dari luar negeri pun juga menggunakan. Namun jumlahnya yang tidak sebanyak navigasi biasa, sehinggah terlihat aneh oleh sebagian orang.

Cara Membuat Menu Navigasi Scroll Kesamping di Blogger

Untuk membuat menu navigasi ini seperti template textrim yang dibutuhkan hanyalah kreatifitas dalam mengulik kode - kode CSS. tidak perlu menggunakan kode JS yang membuat template kamu menjadi berat. Menu ini bisa saja tidak cocok dengan template yang kamu gunakan dikarenakan bentrok dengan CSS bawaan template.

Contoh Navigasi

1. Silahkan buka menu Tema > Edit HTML > Simpan kode berikut ini dimana menu kamu akan dimunculkan biasanya dibagian Header. Tinggal klick edit Link dan title yang terdapat didalam kode dibawah ini.

<!-- Navigation Menu Horizontal Scroll by J
jagoandzgn.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>

2. Simpan kode CSS berikut agar menunya bisa scrool kesamping dengan lancar, tapat DIATAS kode ]]></b:skin>

/*  Navigation Menu Horizontal Scroll by jagoandzgn.com */
.ignielHorizontal ul {
  background-color: #673ab7;
  max-width: 100%;
  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 bisa membuat menu digeser kesamping baru akan muncul apabila jumlah keseluruhan link yang terdapat pada menu menghasilkan lebar lebih dari 600px. Jika kurang dari itu maka menu akan terlihat seperti biasa tidak bisa digeser-geser . Jika nantinya efek menu scroll kesamping belum muncul cek dulu nilai max-width dari header atau indux header yang lainnya yang disimpan di menu ini.

Demikian artikel tentang Cara Membuat Menu Navigasi Scroll Kesamping di Blogger apabila ada kekurangan atau error dalam kode, silahkan komentar dikolom koment, Terima kasih.