Cara Membuat Responsive Navbar hanya dengan menggunakan html CSS dan JavaScript

Baiklah terima kasih telah mengklik judul ini, projects pertama yang saya bagikan adalah renponsive navbar ketika di klik pake ikon menu yang garis 3 dikiri ataupun disebelah kanan. Intinya seperti gambar diatas oke.

Sekedar memastikan saja, jika ada yang bilang "bang kenapa pas dimode dekstop navigasi nya gak keliatan" yah karena judul saya sudah bilang, ini adalah responsive navbar ketika di klik ikon yah.

Dibawah ini sudah ada contoh codenya, bagi kalian yang tidak ingin capek-capek copy paste. Kalian bisa pergi ke bawah konten ini, disitu saya sudah menyiapkan file lengkap nya berupa link menuju mediafire. Jadi, kalian tinggal download saja. Terima kasih.

Kode HTML :

Catatan "Dikarenakan code snippet html nya rada-rada jadi saya menggunakan manual dulu, kalau gak mau ribet bisa gulir ke bawah aja"

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Responsive</title>
<link rel="stylesheet" href="NavbarResponsive.css" type="text/css" media="all" />
<link rel="shortcut icon" href="asset/Logo icon.jpg" type="image/x-icon" />

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alata&family=Anton&family=Carter+One&family=Mochiy+Pop+One&family=Poppins:wght@600&family=Rubik+Mono+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.6.0/fonts/remixicon.css" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</head>

<body>

<header>
<div class="logo">
<img src="Logo icon.jpg" alt="" />
<a href="#">Sicoding Turu</a>
</div>
<nav>
<ul class="nav-menu">
<li><a href="#" class="on">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="burger"><i class="bi bi-filter-right"></i></div>
</header>

<script src="NavbarResponsive.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Kode CSS :

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins';
list-style: none;
text-decoration: none;
}

body{
background: #fff;
}

header{
background: #007aff;
width: 100%;
padding: 20px 35px;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo{
display: flex;
align-items: center;
justify-content: center;
}

.logo img{
width: 50px;
border-radius: 50%;
}

.logo a{
color: white;
font-size: 28px;
font-weight: 700;
cursor: pointer;
margin-left: 10px;
}

#burger i{
position: relative;
z-index: 100;
font-size: 40px;
color: white;
transition: all .5s;
}

#burger i:hover{
background: #555;
border-radius: 5px;
}

.nav-menu{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100vh;
flex-direction: column;
background: #101010;
transition: all .50s;
display: flex;
overflow: hidden;
}

.nav-menu li{
margin-left: 30px;
margin-right: 30px;
}

.nav-menu li a{
font-size: 20px;
font-weight: 500;
color: white;
cursor: pointer;
display: block;
padding: 15px 0 17px 0;
text-align: center;
transition: all .5s ;
}

.nav-menu li a:hover{
background: grey;
border-radius: 50px;
}

.nav-menu li a.on{
margin-top: 90px;
}

.nav-menu.active{
width: 100%;
}

Kode Javascript :

const menu = document.querySelector('#burger');
const navmenu = document.querySelector('.nav-menu');

menu.onclick = () => {
navmenu.classList.toggle('active');
};

Hasil dari codingan bisa diliat disitu :

Seperti yang saya katakan tadi diatas, jika kalian pusing dengan kodenya. Tunggu jangankan kalian, saya aja yang buatnya pusing banget hadeh. Bisa klik link dibawah, tenang link nya aman kok mwehehe...

Klik sini yaaa...

Terima kasih karena sudah mengunjungi blog saya, maaf karena walaupun yang datang hanya 1 atau 2 tapi saya akan tetap menyambut dengan hangat.

Mungkin disetiap blog saya akan cantumkan link menuju mediafire biar tidak memakan waktu luang anda. Terima kasih

Daftar projek yang lainnya : List Projects

Tentang saya : About me

Hubungi saya : Contact