Membuat Navigasi / menu bar pada css - Wavker Blog

Membuat Navigasi / menu bar pada css

Hai gan materi kali ini belajar css, css adalah navigasi bar. Perlu digaris bawahi mempunyai navigasi yang mudah digunakan adalah penting da...

cara menu navigasi

Hai gan materi kali ini belajar css, css adalah navigasi bar.
Perlu digaris bawahi mempunyai navigasi yang mudah digunakan adalah penting dalam suatu web.
Dengan kode css kita dapat mengubah menu yang tidak enak dilihat menjadi tampilan yang keren, Navigasi membutuhkan standar html sebagai dasar nya, di bawah ini akan saya contohkan membuat navigasi menggunakan HTML yang standar.
 List navigasi biasanya berupa link, jadi pada umumnya kita akan menggunakan tag<ul>dan<li>
<ul>
<li><a href="default.asp">home</a></li>
<li><a href="news.asp">news</a></li>
<li><a href="contact.asp">contact</a></li>
<li><a href="about.asp">about</a></li>
Hasil kode diatas adalah
  • home
  • news
  • contact
  • about
 Sekarang kita lengkapkan kode nya menjadi :
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>

<ul>
<ul>
<li><a href="default.asp">home</a></li>
<li><a href="news.asp">news</a></li>
<li><a href="contact.asp">contact</a></li>
<li><a href="about.asp">about</a></li>
</ul>
Setelah kodenya di ketik di notepad lalu save Format ".Html"
Maka hasilnya menjadi :


Unordered list tanpa bullet dengan CSS
Kode dalam contoh diatas adalah kode standar yang digunakan navigasi vertikal dan horizontal.

Navigasi Vertikal

Selain kode standart diatas, untuk membuat navigasi vertikal biasanya memerlukan elemen a :
Contoh 
a
{
display:block;
width:60px;
}
Perhatikan gambar ;
Kode style nya aja kita ganti kode menu gausah biar cepet perhatikan gambar diatas

 Navigasi Horizontal

Masih berlajut kode standart diatas, sekarang menggunakan daftar inline atau float.
li
{
display:inline;
}
lihat gambar, contoh kode nya biar gak keliru


Pas kita save menjadi .Html lalu kita buka maka hasil nya menjadi seperti ini :
Lanjut contoh menu nya dengan float :
li
{
float:left;
}
a
display:block;
width:60px;
}
Nah mudah bukan ?
kurang lebih seperti itu dasar dasar nya membuat navigasi bar. Kalau Agan kreatif banyak sekali modifikasi modifikasi agar tampilan navigasi menu kita keren seperti dengan bermain warna, font dan lain lain.

Yups berikut tips cara membuat navigasi css.
terimakasih.

Artikel Terkait

2 komentar

Histats

Disqus for wavker