Membuat Navigation Bar Menggunakan HTML dan CSS – Pada artikel ini kita akan belajar untuk membuat navigation bar menggunakan HTML dan CSS. Kalian hanya perlu menyiapkan file index.html dan style.css. Selain itu, kita akan menggunakan fontawesome icon untuk membuat icon yang terdapat pada setiap menu yang ada di navigation bar. Simak kode dibawah ini untuk mengetahui cara membuat navigation bar menggunakan HTML dan CSS.

Daftar Isi

Membuat Navigation Bar Menggunakan HTML dan CSS

Kode CSS

Berikut ini kode css untuk membuat navigation bar menggunakan HTML dan CSS.

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 330px;
	height: 70px;
	background: #0159ab;
	box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 -1px 4px rgba(0,0,0,.2);
	overflow: hidden;
	border-radius: 30px;
}

ul{
	list-style: none;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

li{
	display: block;
	width: calc(330px/4);
	height: 70px;
	text-align: center;
	line-height: 70px;
}

.fa{
	font-size: 1.3rem;
	transition: .5s;
	color: #fff
}

span{
	display: block;
	font-size: .8rem;
	color: #fff;
	transform:translateY(-20px);
	transition: .5s cubic-bezier(.75,-1,0,1.15);
}

li:hover .fa{
	transform: translateY(-100px);
}

li:hover span{
	transform: translateY(-70px);
}

.text-owner{
	position: absolute;
	top: 42%;
	left: 45%;
}

Kode HTML

Berikut ini kode html untuk membuat navigation bar menggunakan HTML dan CSS dan dijalankan pada browser pada perangkat komputer atau laptop yang anda gunakan.

<!DOCTYPE html>
<html>
<head>
	<TITLE>Navigation Bar</TITLE>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="https://kit.fontawesome.com/e25b852c87.js" crossorigin="anonymous"></script>
</head>
<body>
	<div class="text-owner">
		Created by Inpows.com
	</div>
	<div class="container">
		<ul>
			<li>
				<i class="fa fa-home" aria-hidden="true"></i>
				<span>Home</span>
			</li>
			<li>
				<i class="fa fa-search" aria-hidden="true"></i>
				<span>Search</span>
			</li>
			<li>
				<i class="fa fa-comments" aria-hidden="true"></i>
				<span>Discussions</span>
			</li>
			<li>
				<i class="fa fa-user" aria-hidden="true"></i>
				<span>Account</span>
			</li>
		</ul>
	</div>
</body>
</html>

Hasil yang diperoleh

Berikut ini hasil yang dapat kalian peroleh saat dijalankan pada browser yang digunakan.

Gimana? Apakah berhasil kalian jalankan? Terlepas dari UX yang masih kurang menurut saya, saya pikir navigation bar yang telah dibuat ini memiliki desain yang keren dan simpel. Temukan source code menarik lainnya hanya di Inpows.