Cara Membuat Menu Navigasi Scroll Bar ke Samping (Horizontal)

Cara Membuat Menu Navigasi Scroll Bar ke Samping (Horizontal)

Indramayu
– Blog yang disukai oleh Google adalah blog yang memiliki menu navigasi yang terstrukur dan tertarget agar memudahkan para pengunjung. Salah satu menu navigasi yang sering digunakan adalah menu navigasi scroll ke samping (horizontal).

Meski tidak semua blog memilik menu navigasi horizontal, tetapi terdapat banyak blog yang menggunakan menu navigasi ini, seprti Jalantikus, Textrim, dan lainnya.

Beberapa blogger kadang menanyakan cara membuat menu navigasi scroll ke samping ini, namun setiap template memiliki ketentuan tertentu dari pembuatnya, sehingga tidak semua template memiliki menu navigasi seperti ini.

Menu navigasi scroll ke samping sendiri memiliki beberapa model atau tampilan, menyesuaikan dengan model template yang digunakan. Fungsinya pun sebenarnya tidak begitu diperlukan, karena menu navigasi sudah ada pada setiap template.

Meskipun begitu, mungkin kamu ingin membuat menu navigasi horizontal ini untuk memperindah dan mempertegas menu navigasi vertikal yang kamu miliki. Jadi, kali ini saya akan membuat tutorial cara membuat menu navigasi scroll ke samping (horizontal).

Cara Membuat Menu Navigasi Scroll ke Samping (Horizontal)

Penempatan menu navigasi ini biasanya ditempatkan dibawah header blog dan menu ini akan tampil di mobile saja seperti pada template Fletro. Berikut langkah-langkah membuat menu navigasinya.

Langkah#1: Masuk ke Dashboard Blog, lalu pilih Edit HTML.
Langkah#2: Dalam mode Edit HTML, cari kode berikut.
</header></div>
Langkah#3: Lalu tambahkan kode berikut tepat di bawahnya.
<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>
Langkah#4: Pada kode HTML di atas, ganti tanda # dengan url tujuan dan Label dengan nama atau title dari kategori tersebut.
Langkah#5: Selanjutnya tambahkan kode CSS berikut tepat di atas kode ini
]]></b:skin>
/*--- teknodermayu 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;
}
}
Langkah#6: Selanjutnya cari kode CSS berikut ini.
@media only screen and (max-width:640px) {
#wrapper {
   padding: 70px 15px 15px;
}
Langkah#7: Lalu ganti dengan kode CSS ini.
@media only screen and (max-width:640px) {
#wrapper {
   padding: 100px 15px 15px;
}
Untuk lebih jelasnya, kamu bisa melihat demonya dibawah ini.
Demo

Penutup

Menu navigasi scroll ke samping ini biasanya diterapkan tepat di bawah header dan tampilannya akan lebih rapi dalam keadaan melayang (sticky), karena saya pun ketika menggunakan template Linkmagz menerapkan menu ini melayang.

Cara ini juga bisa kamu terapkan di template lainnya dan template yang valid AMP karena penerapannya hanya menggunakan HTML dan CSS saja. Jadi, kamu hanya perlu menyesuaikan bagian nama yang harus diubah.

Jika kamu punya pertanyaan perihal menu navigasi scroll ke samping ini, kamu bisa menanyakannya di komentar ya, semoga bermanfaat.

Next Post Previous Post
2 Comments
  • Unknown
    Unknown 21 Januari 2022 09.27

    Sehat slluu loh mas

  • Sendi Septian
    Sendi Septian 21 Januari 2022 09.32

    Aamiin, makasih kak

Add Comment
comment url