navigasi bar berguna untuk menampilkan beberapa link navigasi yang akan men direct ke halaman lain.
baca juga : Cara membuat jendela Popup sederhana dengan html dan css
oke, kita buat terlebih dahulu untuk html nya.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#home">bagian 1</a></li>
<li><a href="#home">bagian 2</a></li>
<li><a href="#home">bagian 3</a></li>
</ul>
</div>
</body>
</html>
Keterangan :<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#home">bagian 1</a></li>
<li><a href="#home">bagian 2</a></li>
<li><a href="#home">bagian 3</a></li>
</ul>
</div>
</body>
</html>
<div class="nav"> untuk memanggil css class yang bernama 'nav'.
<ul> & <li> berguna untuk membuat list nya.
lalu, tambah kan css.
<style type="text/css">
.nav {
width: 100%;
height: 60px;
}
.nav ul{
width: 1200px;
height: 60px;
position: fixed;
list-style-type: none;
background-color: #29719F;
}
.nav li {
float: left;
}
.nav li a {
text-decoration: none;
display: inline-block;
color: #FFFFFF;
font-family: consolas;
font-size: 18px;
padding: 20px;
}
</style>
Keterangan :.nav {
width: 100%;
height: 60px;
}
.nav ul{
width: 1200px;
height: 60px;
position: fixed;
list-style-type: none;
background-color: #29719F;
}
.nav li {
float: left;
}
.nav li a {
text-decoration: none;
display: inline-block;
color: #FFFFFF;
font-family: consolas;
font-size: 18px;
padding: 20px;
}
</style>
"position: fixed;" agar posisi navigasi tetap saat di scroll.
"list-style-type: none;" menghilangkan style list default.
"float: left;" agar urutan berubah dari kiri ke kanan.
"text-decoration: none;" menghilankan efek dekorasi huruf link.
"display" agar tampilan menjadi ke arah samping.
kenapa ngak bisa di copy paste?
ReplyDelete