Materi kali belajar css ini adalah navigasi bar. Perlu digaris bawahi mempunyai navigasi yang gampang digunakan adalah penting dalam suatu web. Dengan kode CSS dapat mengubah menu yang tidak enak dilihat menjadi tampilan yang sangat keren. Navigasi membutuhkan standar html sebagai dasarnya, dibawah ini akan saya contohkan membuat navigasi menggunakanliat html yang standar.
List navigasi biasanya berupa link, so.. gunakanlah <ul> dan <li> :
1
2
3
4
5
6
7
8
9
10
11
| <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> |
Hasil dari kode diatas adalah :
• Home
• News
• Contact
• About
Sekarang hilangkan tanda lingkaran, margin, dan padding :
1
2
3
4
5
6
7
8
9
10
11
| ul{list-style-type:none;margin:0;padding:0;} |
Hasilnya :
Home
News
Contact
About
Kode dalam contoh di atas adalah kode standar yang digunakan navigasi vertikal dan horizontal.
Navigasi Vertikal
Selain kode standar di atas, untuk membuat navigasi vertikal memerlukan elemen a :
Contoh :
1
2
3
4
5
6
7
8
9
| a{display:block;width:60px;} |
0 comments:
Post a Comment