Saya akan memberikan tutorial cara membuat navbar horizontal dengan Html dan Css. Banyak yang sudah tahu bahwa dalam html ada tag <nav>, dalam kesempatan ini saya akan menggunakan tag <nav> tersebut untuk membuat navbar.
Siapkan text editor untuk menuliskan source code html dan css.
Step 1
Buatlah file index.html yang akan digunakan untuk halaman utama, dan tuliskan source code seperti yang dibawah ini.
<!DOCTYPE html> <html> <head> <title>Tutorial Navigasi</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="nav"> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>
Maka hasilnya akan seperti gambar dibawah ini.
Step 2
Buatlah folder css untuk menyimpan file style.css, karena di file index.html tadi kita menuliskan <link rel=”stylesheet” type=”text/css” href=”css/style.css”> dimana “href=”css/style.css” itu digunakan untuk memanggil file css yang kita buat. Dibawah ini merupakan source code cssnya.
body {
margin: 0;
padding: 0;
}
.nav {
background-color: #03535e;
}
.nav ul {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
}
.nav ul li {
float: left;
}
.nav ul li a {
display: block;
text-decoration: none;
color: #fff;
font-family: arial;
padding: 15px 20px;
}
.nav ul li a:hover {
background-color: #000;
}
.nav ul li a.active {
background-color: #000;
color: #fff;
}
.nav ul li a.active:hover {
background-color: #000;
color: #fff;
}
Simpan di folder css, dan beri nama style.css. Maka nanti saat dibuka tampilan nya akan seperti ini.
Nah dengan tutorial ini semoga anda dapat membuat navbar horizontal dengan html dan css.
~Selamat Mencoba~
***PIU***
