Skip to main content

MEMBUAT TAMPILAN NAVBAR PADA SEBUAH WEBSITE DENGAN MENGGUNAKAN BAHASA PEMROGRAMAN JAVASCRIPT

          


              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.
























            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.





















            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!!! 😉😇

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

PENGERTIAN DAN MANFAAT PEREGANGAN STATIS DAN DINAMIS DALAM DUNIA OLAHRAGA

                          Dalam Gerakan peregangan meliputi peregangan statis dan dinamis. Peregangan statis dilakukan setelah latihan, sedangkan peregangan dinamis dilakukan sebelum latihan. Kedua jenis peregangan ini memiliki manfaatnya masing-masing.Peregangan (stretching) sebaiknya dilakukan sebelum  berolahraga. Bagi anda yang belum tahu,  peregangan termasuk peregangan statis dan dinamis. Keduanya memiliki fungsi dan keunggulan masing-masing.            Peregangan Statis adalah jenis peregangan yang dilakukan di akhir latihan. Ini memiliki pola peregangan berbeda yang terjadi selama periode waktu tertentu dan tidak ada gerakan. Pemanasan statis memungkinkan otot tubuh bagian atas untuk rileks sambil meningkatkan fleksibilitas dan rentang gerak.Berikut manfaat peregangan stastis: * Peningkatan fleksibilitas dan rentang gerak          ...
Post a Comment
Read more

Komponen & Gerak Dasar Kebugaran Jasmani Dalam Berolahraga

               Kebugaran jasmani adalah alat pembelajaran Pendidikan Jasmani Olahraga dan Kesehatan, selain itu merupakan upaya untuk meningkatkan dan mengembangkan kesehatan dan kebugaran tubuh.               Kebugaran jasmani atau physical fitness dapat diartikan sebagai kondisi jasmani yang menggambarkan kebugaran jasmani atau dapat pula diartikan sebagai kemampuan seseorang untuk melakukan suatu pekerjaan tertentu dengan baik tanpa mengalami kelelahan yang berarti. Komponen kebugaran jasmani, di antaranya adalah sebagai berikut.   1. Kelenturan adalah kemampuan sendi untuk melakukan gerakan secara maksimal.   2. Keseimbangan merupakan kemampuan sikap dan posisi tubuh pada saat tertentu.    3. Kecepatan adalah kemampuan berpindah dari satu tempat ke tempat lain dalam waktu yang singkat.        4. Kelincahan merupakan kemampuan mengubah arah dengan ...
Post a Comment
Read more

MEMBUAT DIGITAL CLOCK DENGAN MENGGUNAKAN BAHASA PEMROGRAMAN C++

                              Pembahasan kali ini akan mengulas tentang cara membuat Digital Clock dengan menggunakan bahasa pemrograman C++.Untuk menjalankan codingan atau programnya saya menggunakan software Dev C++.Saya menggunakan software ini karena sangat cocok untuk mengcompile serta menjalankan bahasa pemrograman c++.Jika anda belum memiliki software Dev C++ silahkan download di situs website resminya  https://sourceforge.net/projects/orwelldevcpp/ .               Setelah anda download silahkan install seperti software pada umumnya,Berikut tampilan atau gambar software Dev c++ setelah di install dan dibuka.                 Setelah anda buka software Dev C++ langkah selanjutnya adalah tuliskan code berikut ini: #include<iostream> #include<conio.h> #include<dos.h>  #include <win...
Post a Comment
Read more