Di sesi kali ini saya ingin berbagi sedikit pengetahuan tentang cara membuat tampilan navbar pada sebuah website dengan menggunakan bahasa pemrograman javascript.Untuk Text editornya saya menggunakan SoftwareVisual Studio Kode,disini saya tidak harus mematokkan anda menggunakan software ini.Anda bisa juga menggunakan Software Editor yang lain seperti;Notepad,Notepad++,Subleme Text,Atom dan yang lain-lain.Akan tetapi Software Visual studio code punya keunggulan tersendiri diantara software yang lainnya,dan sangat cocok dipakai bagi anda yang sedang belajar bahasa pemrograman komputer.Jika anda belum memiliki software Visual Studio Code,anda dapat mendownload dan menginstallnya di situs website resmi Visual Studio Code.Untuk gambar atau tampilan Visual Studio Code seperti berikut.
.png)
Setelah anda download dan menginstal software Visual studio code,maka langkah selanjutnya anda dapat mendownload atau menyimpan gambar berikut ini dan kemudian anda simpan di folder yang sama.
.png)
Setelah anda menyimpan gambar yang diatas di dalam folder yang sama maka langkah selanjutnya anda dapat menuliskan code berikut ini.
Berikut Untuk Code HTML nya:
<!DOCTYPE html>
<html>
<head>
<title>Navbar Animation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<div class="menu">
<span></span>
<span></span>
<span></span>
</div>
<li>HOME</li>
<li>SERVICES</li>
<li>PROJECTS</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</nav>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Berikut Untuk Code CSS nya:
*{
margin: 0;
font-family: sans-serif;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav{
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
nav ul{
list-style: none;
width: 420px;
background-color: #eeaacc;
padding: 24px 0;
height: 100vh;
clip-path: circle(10% at 10% 5%);
}
nav ul .menu{
width: 48px;
height: 40px;
position: relative;
margin-bottom: 24px;
margin-left: 24px;
cursor: pointer;
}
nav ul .menu span{
position: absolute;
left: 0;
background-color: white;
padding: 2px;
width: 48px;
border-radius: 4px;
}
nav .menu span:nth-child(1){
top: 0;
}
nav .menu span:nth-child(2){
top: 18px;
width: 28px;
}
nav .menu span:nth-child(3){
bottom: 0px;
width: 40px;
}
nav ul.active .menu span:nth-child(1){
top: 0;
left: 23px;
width: 4px;
height: 40px;
}
nav ul.active .menu span:nth-child(2){
width: 40px;
left: 5px;
}
nav ul.active .menu span:nth-child(3){
padding: 0px;
width: 0;
}
nav ul.active .menu {
transform: rotateZ(45deg);
}
nav ul li{
padding: 24px 47px;
color: white;
text-transform: uppercase;
}
nav ul li:hover{
background-color: #dd99bb;
padding-left: 56px;
}
nav ul.active{
clip-path: circle(100% at -45% 10%);
}
Berikut Untuk Code JAVASCRIPT nya:
menu=$("nav ul");
toggle=$("nav ul .menu")
toggle.on("click",function(){
if(menu.hasClass("active")){
menu.removeClass("active");
}
else{
menu.addClass("active");
}
});
Setelah anda menuliskan code nya maka langkah selanjutnya simpan code tersebut di folder yang sama.Jika anda sudah menyimpannya,silahkan jalankan atau RUN Program tersebut.Maka hasil nya seperti Gambar berikut ini.
SELAMAT MENCOBA!!! 😉😇
Comments
Post a Comment