Responsive Navigation Bar with Search | HTML, CSS and JavaScript - ramCoder

byramCoder -
0

 Hello coders, in this article you will learn to create an amazing navigation bar with search option integrated in it. It is simple yet beautiful and responsive navigation bar design with flex-box. I have used a little bit of JavaScript to make the design responsive but mainly this website is crated with pure CSS. This is the written version of the video uploaded on the YouTube channel of ramCoder. I have uploaded the source code of this project in GitHub and also embedded in this article. I have just used fonts from google fonts, icons from font awesome and just pure CSS with a little bit of JavaScript.


In order to create this nav-bar on your own, you will need to follow couple of steps mentioned below.

Step 1

First of all, you will need to create an index.html file and the following source code into it and save the changes to take the effect.

<!DOCTYPE html>
<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" />
    <title>Responsive Navigation Menu with Search Bar - ramCoder</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
      integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <nav>
      <div class="logo">LOGO</div>
      <div class="links">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Services</li>
          <li>Contact</li>
        </ul>
      </div>
      <div class="search">
        <input type="text" placeholder="Search" />
        <i class="fas fa-search"></i>
      </div>
      <div class="burger">
        <i class="fas fa-bars"></i>
      </div>
    </nav>
  </body>
  <script src="./app.js"></script>
</html>{codeBox}

Step 2

After completing with index.html file, you will need to create an style.css file and copy paste the following code.

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Ubuntu", sans-serif;
}
nav {
  height: 60px;
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: rgb(0, 0, 100);
  color: white;
}
.burger {
  display: none;
}
.logo {
  font-size: 2rem;
  font-weight: bold;
}
.links {
  width: 50%;
  font-size: 1.2rem;
}
.links ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  list-style: none;
}
.links ul li {
  cursor: pointer;
  position: relative;
}
.links ul li::after {
  content: "";
  width: 0%;
  height: 2px;
  background-color: white;
  position: absolute;
  bottom: -5px;
  left: 0;
  transition: 0.3s ease;
}
.links ul li:hover::after {
  width: 80%;
}
.search {
  background-color: rgb(47, 47, 153);
  padding: 5px 10px;
  border-radius: 10px;
}
.search input {
  width: 100px;
  height: 30px;
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
}
.search .fa-search {
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  .burger {
    display: block;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    width: 50px;
    transition: 0.2s ease;
  }
  .fa {
    transition: 0.3s ease;
  }
  .links {
    display: none;
  }
  .links-active {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 60px);
    background-color: rgb(0, 0, 100);
  }
  .links-active ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    list-style: none;
  }
  .links-active ul li {
    cursor: pointer;
    position: relative;
  }
  .links-active ul li::after {
    content: "";
    width: 0%;
    height: 2px;
    background-color: white;
    position: absolute;
    bottom: -5px;
    left: 0;
    transition: 0.3s ease;
  }
  .links-active ul li:hover::after {
    width: 80%;
  }
}{codeBox}

Step 3

At the last step, you will need to create an app.js file and copy paste the source code.

const burger = document.querySelector(".fa-bars");
const links = document.querySelector(".links");

burger.addEventListener("click", () => {
  burger.classList.toggle("fa-times");
  links.classList.toggle("links");
  links.classList.toggle("links-active");
});{codeBox}

So, you just created an amazing nav-bar on your own.

Tags:

Post a Comment

Previous Post Next Post