namindonesia - #JagonyaGame Cara Memberikan Navigasi Dibawah Judul Seperti Detik.com

namindonesia - Kali ini admin akan share lagi tutorial cara membuat menu navigasi seperti di situs detik.com. maksudnya navigasi itu apa sih.menu navigasi adalah salah satu komponen penting dalam sebuah website.

Menu navigasi memberikan jendela kedalam kemampuan kreatifitas web desainer untuk menghasilkan elemen fungsional yang sangat penting didalam sebuah website.

Dan lalu apa itu menu navigasi dibawah judul? Yaitu penjelasan diatas tadi namun yang ini letak nya dibawah judul. Ya kita sering melihat menu navigasi di sebuah situs namun kebanyakan mereka menempatkannya di samping judul.

Ya kita bisa jumpai situs yang menggunakan menu navigasi itu adalah situs Detik.com lalu Jalan tikus dan lain lain. Contohnya seperti ini


Situs detik.com menempatkannya di bawah header atau judul, walaupun sudah ada tombol navigasi di atas nya. kelebihan fitur ini yaitu supaya lebih memudahkan pengguna untuk mengakses konten konten yang ada di situs itu.

Kalau kekurangannya kira kira ngga ada sih. Yaudah gaes lanjut saja kita ke tutorialnya cekidod

Tutorial disini:
•Pertama tama kalian buka akun blogger kalian lalu ke dasboard lalu ke bagian tema lalu pilih edit Html. Lalu kalian copy kode dibawah ini dan letakkan di atas kode ]] ></b:skin> untuk mempermudah ketikan ctrl+f.

Kode Disini

/*--- namindonesia 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} 

}

•setelah itu copy kode dibawah dan letakan kode dibawah ini tepat dibawah kode
   </header>
</div>
Atau lihat gambar ini

Kode Sini:

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

Note:

ubah kode diatas yang bertuliskan"Kategori" kalian ubah sesuai keinginan kalian
"#" ubah menjadi link kalian
"Label 1" menjadi judul link kalian
Dan seterusnya sampai label 5.

Untuk menambahkan menu diatas cukup tambahkan kode dibawah ini diatas tag </ul>
<li><a href='#' title='Label 5'>Label 5</a></li>
Gimana cukup mudah kan tutorial diatas oh ya gaes ini hanya berfungsi pada tampilan mobile kalau untuk dekstop ngga bisa.

Penutup:

Oke gaes cukup tutorial kali ini semoga bermanfaat dan semoga kalian paham dengan tutorial diatas terimakasih sudah berkunjung 
Wassalamualaikum Wr Wb. 

Post a Comment

Previous Post Next Post