Cara Membuat Navigasi Horizontal dan Vertikal

Cara Membuat Navigasi Horizontal dan Vertikal - Datang lagi saya dengan sebuah bekal pengalaman yang akan saya bagikan kepada sobat dengan banyaknya pertanyaan-pertanyaan yang saya baca di grup facebook yaitu bagaimana membuat navigasi horizontal maupun vertikal? maka dari itu saya berusaha untuk mendapatkan jawabannya. Mudah-mudahan dengan adanya posting kali ini saya akan dapat sedikit membatu sobat dalam membuat navigasi tersebut.

Saya juga belajar cara ini dari sebuah website yang bernama w3school, tidak dipungkiri pada awalnya juga saya merasa bingung untuk membuat navigasi horizontal maupun vertikal. Kebetulan saya juga masih dalam tahap belajar dalam dunia blogging saya boleh dikatakan masih pemula. Jadi jika ada yang merasa tidak senang dengan posting saya yang terlihat "sok tau" ini saya mohon maaf sebesar-besarnya.

Membuat Navigasi Horizontal

Menu navigasi horizontal termasuk paling banyak dipakai oleh para blogger, karena sangat mudah untuk di akses oleh pengunjung dan juga enak dilihat. Dalam proses pembuatan navigasi ini termasuk mudah, kita hanya melakukannya dengan 2 langkah besar yaitu memasukan kode di head dan body.

berikut adalah langkah-langkah membuat navigasi horizontal:

Langkah-langkah membuat Navigasi Horizontal

1. Masuk ke blogger sobat lalu pilih template > pilih edit HTML > lalu masukan kode CSS di Head sobat, jika bingung cari kode dan simpan sebelum ]]></b:skin> atau kode </style>langsung saja lihat contoh kodenya seperti di bawah ini:

ul{list-style-type:none;margin:0;padding:0;overflow:hidden;border:1px solid #e7e7e7;background-color:#f3f3f3}
li{float:left}
li a{display:block;color:#666;text-align:center;padding:14px 16px;text-decoration:none}
li a:hover:not(.active){background-color:#ddd}
li a.active{color:white;background-color:#4CAF50}

Setelah itu sobat isikan kode dibawah kode <header> lalu tambahkan kode berikut dibawahnya:

<ul>
  <li><a class="active" href="/">Home</a></li>
  <li><a href="#Menu1">Menu1</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Untuk lebih jelasnya sobat bisa lihat demo:

• DEMO

Membuat Navigasi Vertikal

Menu navigasi vertikal termasuk jarang saya lihat dipakai oleh para blogger, karena saya rasa tata letak kurang efisien untuk menu vertikal dan memakan tempat juga sih. Dalam proses pembuatan navigasi ini termasuk mudah sama seperti menu horizontal, kita hanya melakukannya dengan 2 langkah besar yaitu memasukan kode di head dan body.berikut adalah langkah-langkah membuat navigasi vertikal:

Langkah-langkah membuat Navigasi Vertikal

Langkah membuat menu navigasi vertikal hampir sama dengan membuat menu horizontal perbedaannya hanya terdapat di code CSS dan HTML saja mungkin langkah kita persingkat saja dengan melakukan edit HTML di template sama seperti di atas kita menambahkan kode CSS seperti di bawah ini:

body{margin:0}
ul{list-style-type:none;margin:0;padding:0;width:25%;background-color:#f1f1f1;position:fixed;height:100%;overflow:auto}
li a{display:block;color:#000;padding:8px 0 8px 16px;text-decoration:none}
li a.active{background-color:#4CAF50;color:white}
li a:hover:not(.active){background-color:#555;color:white}

Jika sudah selesai selanjutnya sobat memasukkan kode HTML di bawah kode header sepeerti di atas berikut ini adalah kode tersebut:

<li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Untuk lebih jelas sobat bisa lihat demo berikut ini:

• DEMO

Bagaimana sobat? mudah kan? jika ada pertanyaan atau sobat kurang paham jangan malu untuk bertanya di komentar atau melalui email saya. Saya rasa demikian saja untuk posting tentang cara membuat menu navigasi horizontal maupun vertikal. Semoga kedepannya saya akan dibekali banyak pengalaman untuk dibagikan kepada sobat. Terima kasih