Cara Membuat Menu Navigation part.1

Under88 - Tentu dengan cara membuat sebuah blog atau web tidak akan lepas dengan yang namanya Menu Navigation, nah bagaimana kalau menu navigation bisa kita buat sendiri, terutama bagi yang baru belajar Membuat Blog. tentu itu akan menjadi ilmu tersendiri dalam memodifikasi sebuah blog..
Yang akan kita behas ini masih dalam bentuk sederhana (default blog).
menu navigation di bagi du macam yaitu :
1. menu horizontal.
2. menu vertikal.
Sekarang kita akan membuat menu horizontal dulu atau tegak lurus ke samping seperti menu pada umumnya.

Teknik awal membuat navigation halaman dengan karya sendiri, hal utama adalah membuat List Nav.

HTML

<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Login</a></li>
</ul>

ul adalah pembungkus list. (bisa di tambahkan id atau class)
li adalah list untuk item (bisa di tambahkan id atau class)

CSS

ini hal penting untuk membentuk menu menjadi horizontal .
1. pertama kita buat box pembungkus untuk seluruh list.
yang kita gunakan adalah id="nav"

#nav{
 margin: 0;
 font-size: 90%;
 background-color: #aaa;
 padding: 2px 0;
}

kita gunakan CSS standar saja sebelum melakukan ke tingkat menengah.
pembungkus tidak ada spesifikasi yang berubah.
padding: 2px 0; - gunakan selalu padding untuk mengatur jarak pembatas di setiap list.

2. Pengaturan list agar bentuk menjadi horizotal.

#nav li{
 display: inline; 
 list-style-type: none; /* menghilangkan icon dengan none */
 padding-left: 30px; /* jarak pembatas ke kiri. */
}

display: inline - untuk membentuk tiap list menjadi horizontal.
list-style-type - Untuk menghilangkan tiap icon list di setiap list item. (bisa di biarkan)
padding-left - untuk memberi jarak di setiap list item. (ubah dan sesuaikan)

bentuk menu horizontal sudah selesai. kita berlanjut ke pengaturan item dalam masing-masing list.

3. Pengaturan Item text dengan metode URL Link.

#nav a:link, #nav a:visited{
 color: #333; /* warna pada tulisan */
 background-color: transparent;  /* latar belakang */
 text-decoration: none; /* decoration */
}

tanpa menggunakan css ini pun tidak akan berpengaruh dalam pembentukan horizontal. ini hanya untuk mengubah settingan dalam template blogsecara mandiri.

#nav a:hover, #nav a:active{
 color: #fff; /* warna pada tulisan */
 background-color: #333; /* latar belakang */
}

:hover - untuk merubahan warna dan background saat mouse di arahkan pada item list.
:active - untuk teknik standar penggunaan active adalah untuk merubah warna text dan background jika item list di klik.
(:active bisa di gunakan untuk menandai item list yang sedang di gunakan,namun ini di haruskan penggunaan Javascript. itu akan di bahas nanti.)

Ini masih Tutorial Menu Navigation Tingkat Pemula.. Terima kasih atas kunjungannya.!!