PpVYjUNPJxHpgz48ODtJ762UUZTduUYkOHyHjNeZ
Bookmark

Cara Membuat Navigasi Bar Responsif Dengan Fitur Dark-Light Mode.



Bagi setiap individu yang menggunakan maupun mengembangkan situs web, Bilah Navigasi telah menjadi salah satu komponen yang paling penting. Apakah kamu menyadari bahwa elemen utama dalam suatu situs web dapat dihasilkan melalui penggunaan kode HTML, CSS, dan JavaScript yang sederhana?

Jika kamu mencari Navigasi Bar responsif dengan kotak pencarian, maka kamu berada di tempat yang tepat. Bahkan jika kamu hanya mengetahui dasar-dasar HTML dan CSS, kamu juga dapat membuat bilah navigasi diblog ini.

Apa itu Navbar

Navigasi bar atau bilah navigasi adalah bagian yang terletak di bagian atas situs web dan berisi logo, tautan navigasi penting, dan item lain yang diperlukan untuk berbagai multifungsionalitas situs web. Intinya, navigasi memfasilitasi arus pengguna dari satu halaman ke halaman lainnya.

Sebagai contoh anda dapat melihat navigasi bar saya tepatnya diatas blog ini. dengan bila navigasi itu orang yang mengunjungi blog ini dapat lebih mudah menemukan artikel dengan kotak pencarian yang terdapat pada navigasi bar tersebut. Bahkan orang bisa pergi ke kategori tertentu dengan menggunakan opsi menu didalam navbar tersebut.

Seperti apa Navigasi Bar yang akan kita buat?

Lihatlah sekilas pada demo dan pratinjau berupa gambar dibawah. kamu bisa melihat bahwa kita akan membuat navigasi bar responsive pada tampilan mobile dan juga dekstop. dan bukan hanya itu kita akan membuatnya dengan berbagai elemen didalamnya yang multifungsionalis. seperti fitur dark light mode yang berfungi untuk mengubah mode malam atau siang pada website, kotak pencarian yang berfungsi untuk mencari artikel atau konten pada website, menu dropdown yang berfungsi untuk menyimpan sub menu didalam menu, dan links page dan icon sosial  media yang jika diklik akan menuju halaman atau ke medsos kita.

Cara membuat navigasi bar responsive dengan fitur Dark-Light Mode

Untuk membuat Navigation Bar HTML, CSS & JS, ikuti langkah-langkah yang diberikan baris demi baris:

1. Buka editor kodemu kemudian buat folder baru, kamu dapat menamainya dengan sesuka kamu. Didalam folder ini, buat file - file yang disebutkan.

2. Buat file index.html.  Nama file harus index dan extensinya harus .html

3. Buat file style.css. Nama file harus style dan ekstensinya harus .css

4. Buat file  javascript.css. Nama file harus javascript dan ekstensinya harus .js


Setelah kamu membuat file-file ini, copy dan pastekan kode yang diberikan ke dalam file yang ditentukan. Jika kamu tidak ingin ribet, gulir ke bawah dan unduh Bilah Navigasi HTML CSS & JavaScript dengan mengeklik tombol download yang diberikan. 


Copy atau salin kode html berikut kemudian pastekan didalam file index.html sebelumya yang telah kita buat.

<!DOCTYPE html>
<!-- === Coding by CodingLab | www.codinglabweb.com === -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ===== CSS ===== -->
    <link rel="stylesheet" href="style.css">
        
    <!-- === font awesome === -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    
    <!-- ===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
    <title>Membuat navbar responsif | arsauve</title>
    <!--<title>Responsive Navigation Menu Bar</title>-->
</head>
<body>
  <div class="container-wrap" id="header">
    <nav>
        <div class="arsa-navbar">
            <i class='bx bx-menu sidebarOpen' ></i>
            <span class="logo navLogo"><a href="www.arsauve.com">Arsa Uve</a></span>

            <div class="menu">
              <div class="logo-nav">
                <div class="logo-toggle">
                    <span class="logo"><a href="www.arsauve.com">Arsa Uve</a></span>
                    <i class='bx bx-x sidebarClose'></i>
                </div>
              </div>

                <ul class="arsa-navlinks">
                   <li><a href="">HOME</a></li>
                    <li>
                      <a href="#">HTML & CSS</a>
                      <i class='bx bxs-chevron-down htmlcss-arrow arrow  '></i>
                      <ul class="htmlCss-sub-menu sub-menu">
                        <li><a href="#">Desain Web</a></li>
                        <li><a href="#">Login Forms</a></li>
                        <li><a href="#">Card Design</a></li>
                        <li class="more">
                          <span><a href="#">Lainya</a>
                          <i class='bx bxs-chevron-right arrow more-arrow'></i>
                          </span>
                          <ul class="more-sub-menu sub-menu">
                            <li><a href="#">Bilah Navigasi</a></li>
                            <li><a href="#">Sidebar</a></li>
                            <li><a href="#">Desain tombol</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                    
                    <li>
                      <a href="#">JAVASCRIPT</a>
                      <i class='bx bxs-chevron-down js-arrow arrow '></i>
                      <ul class="js-sub-menu sub-menu">
                        <li><a href="#">Jam dinamik</a></li>
                        <li><a href="#">Validasi Formulit</a></li>
                        <li><a href="#">Card slider</a></li>
                        <li><a href="#">Web Program</a></li>
                      </ul>
                     </li>
                     <li><a href="#">PHP </a></li>
                     <li><a href="#">Pyhton</a></li>
                   <div class="sosial-links">
                     <div class="sl">
                      <ul class="links-page">
                         <li><a href="">Home</a></li>
                         <li><a href="">About</a></li>
                         <li><a href="">Contact</a></li>
                         <li><a href="">Site Map</a></li>
                      </ul>
                      <ul class="sosial-media">
                           <li><a href="https://www.facebook.com/profile.php?id=100094412448380&mibextid=2JQ9oc"><i class="fab fa-facebook"></i></a></li>
                           <li><a href=""><i class="fab fa-youtube"></i></a></li>
                           <li><a href=""><i class="fab fa-twitter"></i></a></li>
                           <li><a href=""><i class="fab fa-instagram"></i></a></li>
                           <li><a href=""><i class="fab fa-tiktok"></i></a></li>
                      </ul>
                    </div>
                  </div>
            </div>
            

            <div class="darkLight-searchBox">
                <div class="dark-light">
                    <i class='bx bx-moon moon'></i>
                    <i class='bx bx-sun sun'></i>
                </div>

                <div class="searchBox">
                   <div class="searchToggle">
                    <i class='bx bx-x cancel'></i>
                    <i class='bx bx-search search'></i>
                   </div>

                    <div class="search-field">
                        <input type="text" placeholder="Search...">
                        <i class='bx bx-search'></i>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>
<script src="javascript.js"></script>
</body>
</html>

Selanjutnya copy kode  css berikut kemudian pastekan didalam file style.css sebelumnya yang telah kita buat

/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    transition: all 0.4s ease;;
}


/* ===== Colours ===== */
:root{
    --body-color: #E4E9F7;
    --nav-color: #7c00ed;
    --side-nav: #010718;
    --text-color: #FFF;
    --search-bar: #F2F2F2;
    --search-text: #010718;
    --title-post: #ab2cfb;
}

body{
    height: 1000vh;
    background-color: var(--body-color);
}

body.dark{
    --body-color: #18191A;
    --nav-color: #242526;
    --side-nav: #242526;
    --text-color: #CCC;
    --search-bar: #242526;
}
.container-wrap {
  height: 1000vh;
  width: 100%;
}
nav{
    position: sticky;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background-color: var(--nav-color);
    z-index: 100;
    box-shadow:1px 1px 5px #80808073
}


body.dark nav{
    border: 1px solid #393838;

}

nav .arsa-navbar{
    position: relative;
    height: 100%;
    max-width: 1250px;
    width: 100%;
    background-color: var(--nav-color);
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav .arsa-navbar .sidebarOpen{
    color: var(--text-color);
    font-size: 30px;
    cursor: pointer;
    display: none;
}

nav .arsa-navbar .logo a{
    font-size: 25px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
}

.arsa-navbar .menu{
  line-height: 50px;
  height: 100%;
}

.arsa-navbar .sosial-links {
  display: none;
}
.arsa-navbar .arsa-navlinks{
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.menu .logo-toggle{
    display: none;
}

nav .arsa-navbar .arsa-navlinks li{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px ;
}

.arsa-navlinks li a{
   white-space: nowrap;
    font-size: 14px;
    height: 100%;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    max-height: 50px;
}


.arsa-navlinks li:hover .htmlcss-arrow,
.arsa-navlinks li:hover .js-arrow{
  transform: rotate(180deg);
  }

nav .arsa-navbar .arsa-navlinks li .arrow{
  /* background: red; */
  height: 100%;
  width: 22px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  color: var(--text-color);
  transition: all 0.3s ease;
}
nav .arsa-navbar .arsa-navlinks li .sub-menu{
  position: absolute;
  top: 70px;
  left: 0;
  line-height: 40px;
  background: var(--side-nav);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
}
nav .arsa-navbar .arsa-navlinks li:hover .htmlCss-sub-menu,
nav .arsa-navbar .arsa-navlinks li:hover .js-sub-menu{
  display: block;
}
.arsa-navbar .arsa-navlinks li .sub-menu li{
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.arsa-navbar .arsa-navlinks li .sub-menu a{
  color: var(--text-color);
  font-size: 15px;
  font-weight: 500;
}
.arsa-navbar .arsa-navlinks li .sub-menu .more-arrow{
  line-height: 40px;
}
.arsa-navbar .arsa-navlinks li .htmlCss-more-sub-menu{
  /* line-height: 40px; */
}
.arsa-navbar .arsa-navlinks li .sub-menu .more-sub-menu{
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}
.arsa-navlinks li .sub-menu .more:hover .more-sub-menu{
  display: block;
}

.arsa-navbar .darkLight-searchBox{
    display: flex;
    align-items: center;
}

.darkLight-searchBox .dark-light,
.darkLight-searchBox .searchToggle{
    height: 40px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
}

.dark-light i,
.searchToggle i{
    position: absolute;
    color: var(--text-color);
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dark-light i.sun{
    opacity: 0;
    pointer-events: none;
}

.dark-light.active i.sun{
    opacity: 1;
    pointer-events: auto;
}

.dark-light.active i.moon{
    opacity: 0;
    pointer-events: none;
}

.searchToggle i.cancel{
    opacity: 0;
    pointer-events: none;
}

.searchToggle.active i.cancel{
    opacity: 1;
    pointer-events: auto;
}

.searchToggle.active i.search{
    opacity: 0;
    pointer-events: none;
}

.searchBox{
    position: relative;
}

.searchBox .search-field{
    position: absolute;
    bottom: -85px;
    right: 0px;
    height: 50px;
    width: 300px;
    display: flex;
    align-items: center;
    background-color: var(--nav-color);
    padding: 3px;
    border-radius: 6px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.searchToggle.active ~ .search-field{
    bottom: -74px;
    opacity: 1;
    pointer-events: auto;
}

.search-field::before{
    content: '';
    position: absolute;
    right: 14px;
    top: -4px;
    height: 12px;
    width: 12px;
    background-color: var(--nav-color);
    transform: rotate(-45deg);
    z-index: -1;
}

.search-field input{
    height: 100%;
    width: 100%;
    padding: 0 45px 0 15px;
    outline: none;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--search-text);
    background-color: var(--search-bar);
}

body.dark .search-field input{
    color: var(--text-color);
}

.search-field i{
    position: absolute;
    color: var(--nav-color);
    right: 15px;
    font-size: 22px;
    cursor: pointer;
}

body.dark .search-field i{
    color: var(--text-color);
}

/* == top-bar link and sosial media css == */

@media (max-width:920px) {
  nav .arsa-navbar{
    max-width: 100%;
    padding: 0 25px;
  }

  nav .arsa-navbar .logo a{
    font-size: 27px;
  }
  nav .arsa-navbar .arsa-navlinks li{
    padding: 0 10px;
    white-space: nowrap;
  }
  nav .arsa-navbar .arsa-navlinks li a{
    font-size: 15px;
  }
}
@media (max-width:800px){
  nav{
    /* position: relative; */
  }
  
    nav .arsa-navbar .sidebarOpen{
        display: block;
    }

    nav.active .menu{
        left: -0%;
    }
    
    .menu .logo-toggle{
        display: block;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo-toggle .sidebarClose{
        color: var(--text-color);
        font-size: 24px;
        cursor: pointer;
    }

  
  .arsa-navbar .bx-menu{
    display: block;
  }
  
  nav .arsa-navbar{
    padding: 15px;
  }
  
  nav .arsa-navbar .menu{
    position: fixed;
    top: 0;
    left: -100%;
    max-width: 270px;
    background:  var(--side-nav);
    line-height: 40px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    z-index: 1000;
    overflow: scroll;
  }
  .arsa-navbar .menu .sidebar-logo{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-logo .logo-name{
    font-size: 25px;
    color: #fff;
  }
    .sidebar-logo  i,
    .arsa-navbar .bx-menu{
      font-size: 25px;
      color: #fff;
    }
  nav .arsa-navbar .arsa-navlinks{
    display: block;
    margin-top: 20px;
    /*background: red;*/
    height: auto;
  }
nav .arsa-navbar .sosial-links {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 230px;
  margin: 0 auto;
  height: 10
}

nav .arsa-navbar .sosial-links .sl {
  position: relative;
  margin-top: 20px;
}

.arsa-navbar .sosial-links .sl .sosial-media {
  position: relative;
  align-items: center;
  justify-content: space-between;
  display: flex;
  margin: 0 auto;
}

.arsa-navbar .sosial-links .sl .sosial-media li {
  list-style: none;
}

.arsa-navbar .sosial-links .sl .sosial-media li a{
  list-style: none;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  font-size: 20px;
  display: flex;
  color: var(--text-color);
  text-decoration: none;
}


.arsa-navbar .sosial-links .sl .links-page {
  position: relative;
  display: block;
  align-items: center;
  margin: 0 auto;
}

.arsa-navbar .sosial-links .sl .links-page li{
  display: inline-block;
  list-style: none;
  margin: 0 auto;
  padding: 2px;
}

.arsa-navbar .sosial-links .sl .links-page li a {
  text-decoration: none; 
  width: auto;
  height: auto;
  color: red;
  border-radius: 5px;
  background: #eeeeee;
  font-size: 10px;
  padding: 0 2px;
}

  nav .arsa-navbar .arsa-navlinks li .arrow{
    line-height: 40px;
  }
  
nav .arsa-navbar .arsa-navlinks li{
    display: block;
  }
nav .arsa-navbar .arsa-navlinks li .sub-menu{
  position: relative;
  top: 0;
  box-shadow: none;
  display: none;
}
nav .arsa-navbar .arsa-navlinks li .sub-menu li{
  border-bottom: none;

}
.arsa-navbar .arsa-navlinks li .sub-menu .more-sub-menu{
  display: none;
  position: relative;
  left: 0;
}
.arsa-navbar .arsa-navlinks li .sub-menu .more-sub-menu li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.arsa-navlinks li:hover .htmlcss-arrow,
.arsa-navlinks li:hover .js-arrow{
  transform: rotate(0deg);
  }
  .arsa-navbar .arsa-navlinks li .sub-menu .more-sub-menu{
    display: none;
  }
  .arsa-navbar .arsa-navlinks li .sub-menu .more span{
    /* background: red; */
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }

  .arsa-navlinks li .sub-menu .more:hover .more-sub-menu{
    display: none;
  }
  nav .arsa-navbar .arsa-navlinks li:hover .htmlCss-sub-menu,
  nav .arsa-navbar .arsa-navlinks li:hover .js-sub-menu{
    display: none;
  }
.arsa-navbar .menu.show1 .arsa-navlinks .htmlCss-sub-menu,
  .arsa-navbar .menu.show3 .arsa-navlinks .js-sub-menu,
  .arsa-navbar .menu.show2 .arsa-navlinks .more .more-sub-menu{
      display: block;
    }
    .arsa-navbar .menu.show1 .arsa-navlinks .htmlcss-arrow,
    .arsa-navbar .menu.show3 .arsa-navlinks .js-arrow{
        transform: rotate(180deg);
}
    .arsa-navbar .menu.show2 .arsa-navlinks .more-arrow{
      transform: rotate(90deg);
    }

}
@media (max-width:370px){
  nav .arsa-navbar .menu{
  max-width: 100%;
} 
}

Terakhir, copy kode javascript berikut kemudian pastekan didalam file javascript.js tadi yang telah kita buat

const body = document.querySelector("body"),
      nav = document.querySelector("nav"),
      modeToggle = document.querySelector(".dark-light"),
      searchToggle = document.querySelector(".searchToggle"),
      sidebarOpen = document.querySelector(".sidebarOpen"),
      siderbarClose = document.querySelector(".siderbarClose");

      let getMode = localStorage.getItem("mode");
          if(getMode && getMode === "dark-mode"){
            body.classList.add("dark");
          }

// js code to toggle dark and light mode
      modeToggle.addEventListener("click" , () =>{
        modeToggle.classList.toggle("active");
        body.classList.toggle("dark");

        // js code to keep user selected mode even page refresh or file reopen
        if(!body.classList.contains("dark")){
            localStorage.setItem("mode" , "light-mode");
        }else{
            localStorage.setItem("mode" , "dark-mode");
        }
      });

// js code to toggle search box
        searchToggle.addEventListener("click" , () =>{
        searchToggle.classList.toggle("active");
      });
 
      
//   js code to toggle sidebar
sidebarOpen.addEventListener("click" , () =>{
    nav.classList.add("active");
});

body.addEventListener("click" , e =>{
    let clickedElm = e.target;

    if(!clickedElm.classList.contains("sidebarOpen") && !clickedElm.classList.contains("menu")){
        nav.classList.remove("active");
    }
});

// sidebar open close js code
let navLinks = document.querySelector(".menu");
let menuOpenBtn = document.querySelector(".arsa-navbar .sidebarOpen");
let menuCloseBtn = document.querySelector(".menu .sidebarClose");
menuOpenBtn.onclick = function() {
navLinks.style.left = "0";
}
menuCloseBtn.onclick = function() {
navLinks.style.left = "-100%";
}


// sidebar submenu open close js code
let htmlcssArrow = document.querySelector(".htmlcss-arrow");
htmlcssArrow.onclick = function() {
 navLinks.classList.toggle("show1");
}
let moreArrow = document.querySelector(".more-arrow");
moreArrow.onclick = function() {
 navLinks.classList.toggle("show2");
}
let jsArrow = document.querySelector(".js-arrow");
jsArrow.onclick = function() {
 navLinks.classList.toggle("show3");
}


Jika kamu mengalami kesulitan saat membuat navigasi bar ini atau mungkin kode tidak berfungsi seperti yang diharapkan, kamu bisa langsung mengunduh file kode sumber ini  dengan mengklik tombol download.

Posting Komentar

Posting Komentar