Cara Membuat Navbar Responsive Dengan HTML, CSS dan Javascript

Restu Kersana

18 Mar, 2023

Cara membuat navbar responsive dengan html, css dan javascript bisa kamu temukan di infokuy.

Pembuatan navbar responsivenya pun sangat mudah kok, kamu tidak perlu menggunakan framework css untuk membuat navbar responsive.

Untuk itu, pastikan kamu mengikuti cara membuat navbar html sampai akhir ya.

Oh iya, sebelumnya saya sudah membagikan cara membuat form login responsive dengan HTML & CSS. Kali ini, saya akan membagikan cara membuat navbar responsive dengan HTML, CSS dan Javasript.

Salah satu komponen penting dalam pembuatan website adalah Navbar. Biasanya navbar disimpan di bagian atas website untuk menyimpan logo dan menu websitenya.

Tentu pembuatan navbar website harus responsive agar bisa diakses oleh pengguna dekstop, tablet dan mobile.

Pembuatan navbar yang akan saya bagikan memang designnya biasa saja, namun saya fokus membuat navbar agar bisa responsive di semua device.

Tapi bagi kamu yang menyukai design navbar yang clean, mungkin navbar yang akan saya bagikan ini cocok untuk kamu.

Terlepas dari itu, bagi kamu yang baru mulai mempelajari HTML & CSS, saya sangat menyarankan untuk mempelajari responsive pada website.

Kedepannya, saya akan membagikan tutorial membuat landing page responsive dengan HTML, CSS dan Javascript untuk meningkatkan kemampuan HTML, CSS dan Javascript kamu.

Daripada penasaran, langsung aja kuy masuk ke pembuatan navbar responsive dengan html, css dan javascript versi infokuy.

Perlu kamu ketahui, setiap orang memiliki cara tersendiri untuk membuat navbar atau komponen apapun, jadi kamu bisa mengimprovisasi kembali codingan yang saya berikan agar sesuai dengan yang kamu inginkan.

Persiapan Untuk Membuat Navbar Responsive

Sebelum mulai membuat navbar responsivenya, ada beberapa persiapan yang harus kamu lakukan, diantaranya :

Siapkan Text Editor (Saya sendiri menggunakan Sublime Text)

Siapakan Browser (Saya menyarankan Chrome atau Firefox)

Buat folder project dengan nama navbar-responsive / bebas

Buat file HTML dengan nama file index.html atau sesuai keinginan kamu

Buat file CSS dengan nama file style.css atau sesuai keinginan kamu

Buat file Javascript dengan nama file app.js atau sesuai keinginan kamu

Jika semua persiapan untuk membuat navbar responsive sudah kamu lakukan, silahkan ikuti langkah selanjutnya dibawah ini.

Cara Membuat Navbar Responsive

Apakah kamu sudah siap ? Silahkan buka text editor kesayangan kamu, saya sendiri akan menggunakan Sublime Text 3.

Deklarasikan File HTML

Jika kamu sudah membuat folder + file projectnya. Silahkan buka file index.html dan deklarasikan file html dengan menekan tombol !, lalu tekan TAB.

Pastikan kamu sudah menginstall Emmet di text editor yang sedang digunakan, agar kamu bisa menggunakan snippet yang saya contohkan tadi.

Untuk pengguna Sublime Text 3 kamu bisa mencari package Emmet di package control dan untuk pengguna Visual Studio Code kamu bisa mencarinya di Extensions dengan nama Elm Emmet.

Koneksikan File CSS

Setelah mendeklarasikan file html nya, kemudian kamu bisa mengkoneksikan file HTML dengan file CSS.

Tambahkan tag <link rel="stylesheet" href="style.css"> atau pada bagian href nya isi sesuai dengan nama file CSS yang kamu tulis sebelumnya.

Pastikan kamu menabahkan file koneksi tersebut di dalam tag <head>tambahkan pada bagian ini...</head>

Koneksikan File Javascript

Lanjut mengkoneksikan file HTML dengan file Javascript. Caranya sangat mudah kok, kamu tinggal menambahkan tag <script src="app.js"></script> atau sesuai dengan nama file Javascript yang kamu buat sebelumnya.Pastikan kamu menambahkan tag script sebelum tag </body> .

Membuat Kerangka Navbar Dengan HTML

Setelah semua file sudah terhubung, langkah selanjutnya kamu bisa membuat kerangka file HTMLnya. Berikut kerangka HTMLnya bisa kamu ikuti seperti dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Responsive</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap" rel="stylesheet">
</head>
<body>
  <div class="wrapper">
    <nav>
      <div class="container-flex">
        <div class="brand">
            <a href="">Infokuy</a>
         </div>
         <div class="burger">
            <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
         </div>
         <div class="bg-sidebar"></div>
         <ul class="sidebar">
            <li><a href="#about">About</a></li>
            <li><a href="#service">Service</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#login">Log In</a></li>
         </ul>
      </div>
    </nav>
  </div>

<script src="app.js"></script>
</body>
</html>

Menambahkan Styling Untuk Navbar Dengan CSS

Setelah membuat kerangka HTMLnya, langkah selanjutnya yang harus kamu lakukan adalah memberikan styling agar lebih menarik ketika dilihat. Berikut CSS yang harus tambahkan pada file style.css.



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

body {
  font-family: 'Work Sans', sans-serif;
  background-color: #FEFEFE;
}

/* burger icon */

.burger {
  display: inline-block;
  cursor: pointer;
  z-index: 2;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
  border-radius: 5px;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
  background-color: white;
}

.change .bar2 {opacity: 0;   background-color: white;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
    background-color: white;
}

/* wraper */

.wrapper {

}

.container-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav {
  padding: 10px 20px;
  box-shadow: 1px 2px 10px 2px rgba(0,0,0,.1);
  background-color: white;
}

nav .brand a {
  font-size: 1.4rem;
  text-decoration: none;
  font-weight: 550;

}

.bg-sidebar {
  top: 0;
  right: -100%;
  bottom: 0;
  width: 100%;
  position: fixed;
  background: rgba(0,0,0,.1);
  transition: .3s;
  visibility: hidden;
}

.bg-sidebar.change {
  right: 0;
  visibility: visible;
  display: block;
}

nav ul {
    display: flex;
    position: fixed;    
    background-color:#505050;
    top: 0;
    bottom: 0;
    right: -300px;
    width: 300px;
    transition: .5s;
    align-items: flex-start;
    flex-direction: column;
}

nav ul.change {
    right: 0;
    transition: .5s;
}

nav ul li {
  list-style: none;
  padding: 20px 15px;
}

nav ul li a {
  color: white;
  font-size: 1.2rem;
    text-decoration: none;
}

@media screen and (min-width: 960px) {

  .bg-sidebar.change {
   right: 0;
   visibility: hidden;
   display: none;
  }

  .burger {
    display: none;
  }

  nav {
    position: relative;
  }

  nav ul {
    display: flex;
      position: relative;    
      background-color:unset;
      top: unset;
      bottom: unset;
      right: unset;
      width: unset;
      flex-direction: row;
  }

  nav ul li {
    padding: 10px 15px;

  }

  nav ul li:hover::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    transition: .3s;
    background-color: black;
    transform: translateY(20px);
  }


  nav ul li a {
    color: black;
    font-size: 1.1rem;
  }

  nav ul li:last-child {
    font-weight: 550;
  }
}

@media screen and (min-width: 1200px) {
  .container-flex {
   width: 100%;
   max-width: 1024px;
   margin: auto;
   display: flex;
  justify-content: space-between;
  align-items: center;
  }

Menambah Javascript Untuk Navbar

Terakhir, tambahkan sedikit syntax javascript agar menu untuk melihat sidebarnya pada mobile bisa berjalan. Berikut kode Javascript yang harus kamu tambahkan pada file app.js.


const burger = document.querySelector('.burger')
const sidebar = document.querySelector('.sidebar')
const bgSidebar = document.querySelector('.bg-sidebar')

burger.addEventListener('click', function() {
  this.classList.toggle('change')
  sidebar.classList.toggle('change')
  bgSidebar.classList.toggle('change')
})

bgSidebar.addEventListener('click', function() {
  this.classList.remove('change')
  sidebar.classList.remove('change')
  burger.classList.remove('change')
})

Lihat Hasilnya

Setelah semua tahap dilakukan, berikut tampilan Navbar Responsive versi infokuy.

Versi Dekstop

Versi Mobile & Tablet

Memang dari segi tampilan atau design navbar yang saya buat terlihat sederhana. Namun dari fungsionalitasnya saya rasa ini cukup bagus untuk kamu implemetasikan pada project yang kamu miliki.

Selain itu, navbar yang saya buat ini sudah responsive untuk semua device, jadi ini bisa menjadi referensi untuk kamu ketika membuat navbar yang responsive.

Penutup

Berikut pembahasan mengenai cara membuat navbar responsive dengan HTML, CSS dan Javascript versi infokuy.

Bagaimana menurut kamu mengenai artikel diatas, apakah pembuatan navbar resposive ini bisa bermanfaat untuk kamu ? Silahkan berikan tanggapannya di kolom komentar.

Terimakasih telah berkunjung ke infokuy, nantikan artikel menarik lainnya seputar CSS hanya di infokuy.

Restu Kersana

Calon Jenazah, pengen hidup enak tapi gini - gini aja.

Dickythedev.Com 18 Mei 2021 pukul 17.56

Kok gak bisa ya code javascript nya
- Restu Kersana 20 Mei 2021 pukul 09.41
  
  Udah dikonekkin di file html nya?
Anonim 2 Juni 2021 pukul 20.26

Terimaksih mba, ilmunya sangat bermanfaat
- Restu Kersana 3 Juni 2021 pukul 06.45
  
  Baik , sama - sama kak. Btw saya cowo ya hehe
- Feri Hidayat 15 Desember 2021 pukul 14.53
  
  hahahaha
learning 9 Juni 2022 pukul 10.05

gan cara tulisan bar about dll pindah ke sebelah kanan tanpa pakai infokuy gimana ya gan