Cara membuat menu navigasi scroll horizontal

Menu navigasi sebuah blog pada dasarnya berfungsi mempermudah user atau para membaca blog dalam mencari artikel yang di inginkan, dengan begitu interaksi antara pengguna dengan blog memiliki kesan positif bagi para pengguna. Selain itu, mempunyai menu navigasi yang rapi dan responsive serta friendly juga menambah nilai keprofesionalitas dimata pengguna. Sudah siap mempraktekkan tutorial kali ini? Sebelum itu simak penjelasannya dibawah ini.

Penerpan navigasi scroll ke samping mungkin hanya dapat kalian temukan di beberapa blog, karena memang penerapannya berbeda di tiap template blog. Admin sendiri menerapkan pada template besutan mas sugeng yang sudah populer dan familiyar dikalangan blogger yaitu Viomagz. Cara membuat/penerapan menu navigasi scroll ke samping bisa di bilang cukup mudah, hanya menambahkan beberapa code html dan css yang sudah admin sediakan untuk anda.

Catatan penting:
Menu navigasi scroll kesamping pada tutorial kali ini hanya muncul saat blog berada pada mode mobile. Dalam artian bahwa menu tersebut tidak akan muncul pada mode tablet dan desktop.

Cara membuat menu navigasi scroll kesamping
  • Masuk ke dashboard blog milik anda
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode </header> </div> lalu tambahkan kode dibawah ini tepat dibawah kode tadi
<div class='second-menu'>
  <ul>
   <li class='satu1'><span>KATEGORI :</span></li>
   <li><a href='#' title='Label 1'>Label 1</a></li>
   <li><a href='#' title='Label 2'>Label 2</a></li>
   <li><a href='#' title='Label 3'>Label 3</a></li>
   <li><a href='#' title='Label 4'>Label 4</a></li>
   <li><a href='#' title='Label 5'>Label 5</a></li>
  </ul>
</div>
  • Pada kode # diatas silahkan ganti dengan url yang anda inginkan, dan pada kata label diatas silahkan ganti dengan kata yang anda inginkan.
  • Selanjutnya tambahkan CSS Code berikut ini tepat diatas kode ]]></b:skin>
/*--- faronesia nav-scroll ---*/
.second-menu{left:0;right:0;top:48px;display:none;max-width:100%;overflow:scroll;overflow-y:hidden;position:fixed;z-index:5;background:#fff;height:35px;line-height:12.5px;font-size:13.5px;font-weight:500;box-shadow:0 2px 6px 0 rgba(0,0,0,.1)}
.second-menu ul{width:max-content;margin:0 0 0 90px}
.second-menu ul li{float:left;font-size: 12px;padding:6px 8px;display:block;text-align:center;text-transform:uppercase}
.second-menu ul li a:hover{color:#49ACE1;border-bottom:2px solid #49ACE1}
.second-menu ul li a{color:#444;padding: 8px 5px;}
.second-menu ul li.satu1 {padding: 0;position:fixed;left:-1px}
.second-menu ul li.satu1 span{background: #444;padding:11.5px 10.5px 10px;color:#fff;vertical-align: -6px;}
.second-menu ul li.satu1:after{content:'';display:inline-block;position:absolute;border-left:12px solid #444;border-top:8px solid transparent;border-bottom:8px solid transparent;right:-10px;top:4px}
@media screen and (max-width: 640px){
.second-menu{display:block}
}
  • Lalu simpan tema
Demo, lihat gambar dibawah ini
Semoga tutorial singkat Cara membuat menu navigasi scroll kesamping ini bermanfaat, jangan lupa share dan komentar dibawah.

3 komentar dari postingan "Cara membuat menu navigasi scroll horizontal"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Website ini dilindungi oleh Google DMCA. Dilarang keras menyalin (copy/paste) sebagian atau keseluruhan isi blog tanpa mencantumkan sumber link aktif dari website www.faronesia.com