Cara Membuat Hidden Navigasi Menggunakan Javascript

Hallo Rekan-rekan, bagaimana kabar kalian? semoga selalu pada keadaan sehat dan tetap semangat belajar. Oke pada kesempatan kali ini kita akan belajar mengenai bagaimana cara merancang hidden navigasi menggunkan Javascript. Jadi navigasi ini nanti akan kita hidden ketika mengerjakan scroll halaman.Oke kini seketika saja kita membuatnya, yuk ikuti strategi berikut ini.



Langkah Pertama-tama



Coba sobat bikin file html seperti dibawah ini :



<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Membangun 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>Membangun Hide Fitur Navigasi Dengan Javascript</h1>

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


seandainya sobat telah mengikuti code diatas berikutnya 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 sobat telah mengetikkan code html dan css berikutnya ialah tinggal menambahkan script dari javascript seperti berikut ini:



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


Baiklah seandainya telah coba simpan lalu jalankan di browser lalu lihat hasilnya seandainya benar akan seperti tampilan berikut ini:



saya kira lumayan pada pembhasan kita kali ini mengenai Cara Membangun Hidden Navigasi Menggunakan Javascript. Semoga bermanfaat dan hingga jumpa dengan pembhasan lainnya.



terima kasih.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more