Cara Membuat Menu Navigation part.1

Teknik 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.!!

8 comments:

  1. mantep nih gan,,
    kapan2 ane coba deh,,, di bookmarks dolo gan..

    ReplyDelete
  2. ini cara membuat menu yang paling mudah dari semua yang pernah saya temukan.. keren, makasih!

    ReplyDelete
  3. wah tutorialnya keren.. jadi betah nih nungguin blog ini

    ReplyDelete
  4. salam kenal, artikel yang menarik. tapi kalau agan sempat, tolong dibuatkan video tutorial nya dong. kayaknya akan lebih mudah dimengerti untuk orang awam sekalipun. terima kasih.

    ReplyDelete
    Replies
    1. tunggu saja tutorial dalam bentuk video. masih dalm perkembangan. :^D^:

      Delete
  5. ditunggu tutorial video nya gan

    ReplyDelete
  6. gan itu naruh script2nya di bagian mana gan, bingung nih.

    ReplyDelete
  7. Google Hermes++
    makasih banyak bos
    sy coba deh tips nya moga berhasil..

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top