Menu navigasi adalah sebuah menu yang terdapat pada tampilan blog yang biasa nya terdapat di atas judul menu navigasi ini berguna untuk mempermudahkan pengunjung Melia kategori yang terdapat pada blog sobat, berikut adalah cara membuat menu navigasi horizontal sederhana, cara membuat menu navigasi, membuat menu navigasi horizontal sederhana, membuat menu navigasi horizontal, cara mengatur navigasi blog, cara membuat menu navigasi responsive, membuat menu navigasi horizontal sederhana, cara membuat menu navigasi responsive dengan css, cara membuat menu navigasi dengan html, cara membuat navigasi blog keren

Menu Navigasi Horizontal Sederhana

Cara Membuat Menu Navigasi Horizontal Responsive, menu navigasi yang biasa kita temukan kebanyakan menggunakan navigasi drop down tetapi pada kesempatan kali ini saya akan memberikan cara membuat menu navigasi horizontal dan melakukan scroll kesamping kanan untuk melihat menu yang terdapat pada navigasi tersebut.

Menu navigasi horizontal ini dibuat oleh sesepuh blogger ternama yaitu Mba Igniel, menu navigasi ini sangat jarang sekali digunakan oleh para kalangan blogger karena kebanyakan menggunakan menu navigasi drop down, menu navigasi ini bukan hanya horizontal saja tetapi menu navigasi ini bisa kalian geser ke samping (scroll kesamping) untuk melihat menu lainnya yang terdapat pada menu navigasi horizontal ini.

Bagi beberapa orang yang baru akan mengira bawahsannya menu navigasi horizontal ini terpotong padahal tidak, hanya perlu mengscrool kesamping.

Cara Membuat Menu Navigasi Horizontal Responsive

Menu Navigasi Horizontal ini sangat sederhana tetapi memiliki tampilan yang menarik, ok baiklah bagi kalian yang ingin menyicipi menu navigasi horizontal ini kalian bisa ikuti tutorial dibawah ini.

Pertama kalian buka blog milik kalian kemudian masuk ke bagaian tema => edit html, letakan kode dibawah ini pada tempatnya, biasanya pada bagaian <headaer>

Jangan Lupa Untuk Menghapus Kode Menu Navigasi Yang Terdapat Pada Template Kalian, Agar Tidak Terjadi Bentrok.

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

Kemudian Simpan kode dibawah ini diantara tag <body> dan </body> atau kalian bisa simpan diatas kode </style>

 /*  Navigation Menu Horizontal Scroll by igniel.com */
.ignielHorizontal ul {
  background-color: #673ab7; /* Warna background menu */
  max-width: 100%; /* Lebar maksimal menu */
  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;
  }

Silahkan kalian ganti # dengan Url yang akan kalian gunakan.

Kemudian Save.

Sebenernya Menu Navigasi Horizontal ini digunakan pada template Textrim (~~template yang saya gunakan saat ini~~) sang pembuat templatenya juga Mba Igniel pemilik situs Igniel.com dan Arlina DZGN.

Klik reslut dibawah ini untuk melihat demonya.

See the Pen YzzwVqE by Syaiful Bahri (@ifulb97) on CodePen.

Ok selesai sudah pembahasan mengenai Cara Membuat Menu Navigasi Horizontal Responsive, barang kali ada yang masih bingung bisa kalian tanyakan pada kolom komentar dibawah.