Sajian Navigasi Scroll Samping Misalnya Template Textrim

Aku bakal kembali membagikan kode asal (source code) dari satu dari template cuma-cuma yang sudah didesain yaitu Textrim. Kalium ini yang bakal dibahas merupakan mengenai sajian navigasi bagian atas. Sajian ini relatif menyita perhatian sekaligus menimbulkan banyak pertanyaan dari pengguna akibat bentuknya yang tidak lazim. Dikenal sebagai demikian akibat bentuknya yang mendorong ke samping serta buat melihat seluruh menunya wajib dilakukan aktifitas gulir (scroll) secara mendatar.

Padahal sajian scroll mendatar sudah digunakan oleh banyak sekali situs besar baik dari Indonesia juga luar negeri. Tetapi jumlahnya tidak sebanyak navigasi biasa (kebanyakan berupa sajian dropdown) sebagai akibatnya tetap kelihatan "aneh" bagi separuh orang. Aku sendiri membentuk sajian scroll ke pinggir ini terinspirasi dari situs Kaskus kok. So kenyataannya lazim serta lumrah, hanya perlu disosialisasikan lebih lanjut pada pengunjung.

Bagi orang yang sungguh belum pernah melihat navigasi gulir samping, sajian bakal kelihatan misalnya terpotong. Padahal tidak. Hanya perlu di-scroll ke kanan serta kiri.

Trik Membentuk Sajian Scroll Mendatar ala Textrim

Buat membentuk navigasi scroll samping misalnya Textrim, yang dibutuhkan hanyalah kreatifitas dalam mengulik kode CSS. Gak perlu tuh Javascript segala. Serta yang aku bagikan ini merupakan kode dasarnya. Dapat so tidak cocok dengan template yang sedang dipergunakan akibat bentrok dengan kode CSS bawaan template. apabila terjadi ketidak-sesuaian dengan demo, silakan ulik serta ubah lagi sendiri ya.

Pertama, simpan kode HTML berikut pada tempat dimana sajian bakal dimunculkan. Umumnya sih pada header ya. Tinggal edit listig serta title yang terdapat pada dalamnya.

<!-- Navigation Sajian Mendatar Scroll by igniel.com -->
<div group="ignielHorizontal">
  <uldangt;
    <lidangt;<a href="https://www.igniel.com/2019/10/#" title="Download">Downloaddanlt;/adangt;</adangt;</lidangt;
    <lidangt;<a href="https://www.igniel.com/2019/10/#" title="Tutorial">Tutorialdanlt;/adangt;</lidangt;
    <lidangt;<a href="https://www.igniel.com/2019/10/#" title="Video">Videodanlt;/adangt;</lidangt;
    <lidangt;<a href="https://www.igniel.com/2019/10/#" title="Subscribe">Subscribedanlt;/adangt;</lidangt;
    <lidangt;<a href="https://www.igniel.com/2019/10/#" title="HTML5">HTML5danlt;/adangt;</lidangt;
    <lidangt;<a href="https://www.igniel.com/2019/10/#" title="CSS3">CSS3danlt;/adangt;</lidangt;
    <lidangt;<a href="https://www.igniel.com/2019/10/#" title="Javascript">Javascriptdanlt;/adangt;</lidangt;
    <lidangt;<a href="https://www.igniel.com/2019/10/#" title="Make Money Online">Make Money Onlinedanlt;/adangt;</lidangt;
    <lidangt;<a href="https://www.igniel.com/2019/10/#" title="Study Case">Study Casedanlt;/adangt;</lidangt;
  </uldangt;
</divdangt;

Kedua, simpan kode CSS berikut supaya menunya dapat scroll ke samping dengan lancar.

/*  Navigation Sajian Mendatar Scroll by igniel.com */
.ignielHorizontal ul {
  background-color: #673ab7; /* Warna background sajian */
  max-width: 100%; /* Lebar maksimal sajian */
  overflow-x: automaat;
}
.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% merupakan lebar maksimal dari sajian yang jumlahnya bakal mengikuti lebar dari induknya. Dalam contoh ini, aku membentuk sebuah halaman dengan lebar maksimal body 600px, maka lebar maksimal sajian pun bakal sama, yaitu 600px.

Efek overflow yang membentuk sajian dapat digeser ke samping baru bakal timbul apabila jumlah keseluruhan listig yang terdapat pada sajian memproduksi lebar yang lebih dari 600px. apabila kurang dari itu, maka sajian bakal kelihatan biasa saja tanpa dapat digeser-geser. So andaikan nantinya efek scroll belum timbul, cek dulu nilai max-width dari header atau induk lain yang sebagai tempat disimpannya sajian ini.

Hasilnya bakal misalnya berikut. Harap diingat ya, ini hanya kode dasar. Lakukan perubahan sesuai template apabila tidak sesuai dengan demo. Jangan takut buat mengulik.

Oke selesai telah wetsartikel sederhana mengenai tutorial membentuk sajian navigasi scroll ke samping ala Textrim Blogger Theme. Bagikan pengalaman engkau dalam memakai kode pada atas pada kolom komentar.

Berbagi :