Membuat Animasi Hover Pada Navigasi Menu Menggunakan HTML dan CSS – Pada artikel kali ini kalian akan mempelajari cara membuat animasi hover pada navigasi menu menggunakan HTML dan CSS. Seperti yang kita tahu, Navigasi bar (navigation bar) atau navigasi menu atau biasanya disebut dengan navbar merupakan komponen penting dan ada pada banyak website di dunia. Navigasi menu digunakan sebagai menu yang berisi kumpulan link yang bersifat umum pada suatu website. Dalam kasus ini kita akan membuat menu-menu yang terdiri atas Home, Info, Java, Javascript, dan Kotlin. Simak artikel dan source code dibawah ini untuk membuat animasi hover pada navigasi menu menggunakan HTML dan CSS.

Daftar Isi

Kode CSS

Berikut ini adalah kode CSS untuk membuat animasi hover pada navigasi menu menggunakan HTML dan CSS.

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

body{
	height: 100vh;
	background: linear-gradient(to right, #0159ab, #3c1053);
}

.top-menu{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.top-menu a{
	color: rgb(233, 233, 233);
	text-decoration: none;
	font-size: 1.5rem;
	margin: 20px;
	padding: 15px, 30px;
	background: rgba(255, 255, 255, 0.1);
	position: relative;
	transition: all .4s;
}

.top-menu a:hover{
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.24);
}

.top-menu a::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0%;
	background:  linear-gradient(to top, #0159ab, #3c1053);
	z-index: -1;
	transition: all .4s;
}

.top-menu a:hover::before{
	height: 50%;
}

Kode HTML

Berikut ini adalah kode HTML untuk membuat membuat animasi hover pada navigasi menu menggunakan HTML dan CSS.

<!DOCTYPE html>
<html>
<head>
	<TITLE>Efek Hover Pada Navigasi Menu</TITLE>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="top-menu">
		<a href="#">Home</a>
		<a href="#">Info</a>
		<a href="#">Java</a>
		<a href="#">Javascript</a>
		<a href="#">Kotlin</a>
	</div>
</body>
</html>

Hasil yang diperoleh

Berikut ini adalah hasil yang diperoleh saat menjalankan source code HTML dan CSS diatas pada browser di komputer atau laptop kalian.

Membuat Animasi Hover Pada Navigasi Menu Menggunakan HTML dan CSS - Inpows — Membuat Animasi Hover Pada Navigasi Menu Menggunakan HTML dan CSS – Inpows

Simak video dibawah ini untuk melihat hasilnya.

Temukan source code HTML dan CSS lainnya hanya di Inpows.

Migrasi ke Gradle Kotlin DSL

Menyembunyikan Action Bar Pada Android

Konversi Milidetik ke Detik dan Menit di Kotlin

Memahami Read Write dan Menampilkan Gambar Menggunakan OpenCV di Python