Langkah - Langkah Membuat Navigation Bar Sederhana
Pada dasarnya jika kita ingin membuat daftar pada sebuah web HTML menggunakan elemen UL dan LI akan terlihat kaku, seperti contoh dibawah ini :<html> <head> </head> <body> <ul> <li><a href="#">HOME</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Sitemap</a></li> <li><a href="#">Privacy Policy</a></li> </ul> <body> </html>
Sekarang kita harus menghapus titik dan mengatur margin dan padding dengan kode CSS :
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
<body>
</html>
Penjelasan kode :
list-style-type: none; digunakan untuk menghapus titik disamping daftar dan jika penjelasan kode.
margin dan padding ke 0 digunakan untuk menghapus jarak default browser sehingga tampak menjadi merapat ke sisi kiri, jika ingin lebih lanjut tentang margin dan padding mungkin kalian bisa baca disini
kita akan menambahkan style elemen <a> kedalam kode tersebut :
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
display: block;
width: 100px;
color: #FFFFFF;
background-color: #009999;
}
</style>
</head>
<body>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
<body>
</html>
Penjelasan kode :
display: block; = Menampilkan link sebagai elemen blok membuat daerah keseluruhan link bisa diklik.
width: = Mengatur lebar elemen block .
color: = Mengatur warna text link.
background-color: = Mengatur warna backgroud pada elemen block.
Agar tampak lebih hidup kita akan menambahkan kode seperti berikut :
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
display: block;
width: 100px;
color: #FFFFFF;
background-color: #009999;
}
a:hover {
background-color:#006B6B;
}
</style>
</head>
<body>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
<body>
</html>
Penjelasan kode :
hover = digunakan jika pointer mengarah pada link tersebut akan melakukan aski dimana block pada link akan merubah warna dengan kode background-color.
Selanjutnya kita akan membuat navigation bar menjadi horizontal.
Ada dua cara untuk membuat navigation var menjadi horizontal yaitu menggunakan inline dan floating list
Kedua metode bekerja dengan baik, tetapi jika Anda ingin link menjadi ukuran yang sama, kalian harus menggunakan metode floating, jadi kita akan menggunakan metode floating saja.
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
width: 100px
color: #FFFFFF;
background-color: #009999;
}
a:hover {
background-color:#006B6B;
}
</style>
</head>
<body>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
<body>
</html>
Penjelasan kode :
Floating = digunakan utnuk mendapatkan unsur-unsur blok meluncur samping satu sama lain
Perhatian ! Cobalah langsung perakterk dirumah dan kalian akan lihat hasil yang lebih sempurna dibanding hasil dari contoh diatas.
Gan batuin cara nampilin "Home » CSS » CSSDasar » CSSLanjutan » Langkah Cara Membuat Navigation Bar Sederhana Menggunakan CSS".. seperti punya agan diatas gimana ya?
ReplyDeleteolo
ReplyDeleteMantul om, makasih ilmunya
ReplyDelete