Cara Membuat Hidden Navigasi Menggunakan Javascript

Hallo Sahabat, bagaimana kabar kalian? semoga selalu dalam keadaan sehat dan tetap semangat belajar. Oke dalam kesempatan kali ini kita akan belajar tentang bagaimana cara membuat hidden navigasi menggunkan Javascript. Jadi navigasi ini nanti akan kita hidden saat melakukan scroll halaman.Oke sekarang langsung saja kita membuatnya, yuk ikuti langkah-langkah berikut ini.

Langkah Pertama

Coba sahabat buat file html seperti dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Hide Navigasi Dengan Javascript</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div id="nav">
			<a href="">Home</a>
			<a href="">About</a>
			<a href="">Product</a>
			<a href="">Service</a>
			<a href="">Contact</a>
		</div>
		<div class="content">
			<h1>Membuat Hide Menu Navigasi Dengan Javascript</h1>

			<img src="car.jpg" class="frame">
			<p>lorem.....</p> <!-- isi dari web lorem ipsum sebagai text dummy -->

jika sahabat sudah mengikuti code diatas selanjutnya kita tambahkan style dari CSS seperti dibawh ini:

body{
	margin:0;
	padding:0;
}

#nav{
	background-color: darkorange;
	position: fixed;
	top:0;
	width: 100%;
	text-align: center;
	transition: top 0.8s;
}

#nav a{
	color:#ffffff;
	display: inline-block;
	text-decoration: none;
	margin:30px 40px;
	font-size: 16px;
	text-transform: uppercase;
}

.content{
	margin: 120px 150px;
	text-align: justify;
}

h1{
	font-weight: bold;
	text-align: center;
}

.frame{
	width: 100%;
	margin: 40px auto;
}

p{
	color: grey;
	line-height: 30px;
}

Langkah Kedua

Apabila sahabat sudah mengetikkan code html dan css berikutnya adalah tinggal menambahkan script dari javascript seperti berikut ini:

<script>
		var downScroll = window.pageYOffset;
		window.onscroll = function(){
			var curveScroll = window.pageYOffset;
			if(downScroll > curveScroll) {
				document.getElementById("nav").style.top = "0";
			}else{
				document.getElementById("nav").style.top = "-100px";
			}
			downScroll = curveScroll;
		}
	</script>

Baiklah jika sudah coba simpan lalu jalankan pada browser lalu lihat hasilnya jika benar akan seperti tampilan berikut ini:

saya kira cukup dalam pembhasan kita kali ini tentang Cara Membuat Hidden Navigasi Menggunakan Javascript. Semoga bermanfaat dan sampai jumpa dengan pembhasan lainnya.

terima kasih.