0,00 Rp

Tidak ada produk di keranjang.

CSS Navbar Horizontal

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.

C:\Users\O\AppData\Local\Microsoft\Windows\INetCache\Content.Word\step 1.png

Nah dengan tutorial ini semoga anda dapat membuat navbar horizontal dengan html dan css.

~Selamat Mencoba~

***PIU***

 

Reviews

Related Articles