In this article we are going to make a navigation menu with a search bar using html css and javascript. I have already shared articles on responsive navigation menus and search bars. In this article we are going to make a navigation menu that has a search bar.
Navigation menu is an important part of websites that let users easily navigate the website. It enhances the user experience. In this navigation menu. Initially the search bar is hidden, it only appears when the user clicks on the search icon. You’ll find a demo and tutorial in the YouTube video below.
Video Tutorial On Navigation Menu With Search Bar.
Navigation Menu with Search Bar.
File structure:
- Create one folder:
- Open it in your code editor
- Create two files with name index.html and index.css
Let's create this navigation menu with search bar using HTML, CSS and JavaScript.
Step 1: Create basic setup of files.
Add the basic structure of html and link the CSS file.
HTML
<!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>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
<script>
</script>
</html>
CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
Step 2: Create a Navigation menu.
Let’s first create a navigation bar, which has logo text on one side and navbar on another side.
I have added hover effects on list-items that’s why span tag is added here.
HTML
<div class="box">
<div class="navbar">
<div class="logo_text">Maketechstuff</div>
<nav>
<ul>
<li><a href="#">Home</a><span></span></li>
<li><a href="#">Services</a><span></span></li>
<li><a href="#">About Us</a><span></span></li>
<li><a href="#">Contact Us</a><span></span></li>
</ul>
</nav>
</div>
</div>
CSS
.box{
width: 100%;
background: linear-gradient(45deg , #bd62bb , #3542cb);
}
.box .navbar{
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0px auto;
padding: 20px 0px;
}
.box .navbar .logo_text{
font-size: 30px;
color: #fff;
font-weight: bold;
}
.navbar nav{
display: flex;
align-items: center;
position: relative;
}
.navbar nav ul{
display: flex;
margin-right: 10px;
}
.navbar nav ul li{
list-style: none;
margin: 0px 20px;
position: relative;
}
.navbar nav ul li span{
position: absolute;
left: 0;
bottom: -8px;
width: 0;
height: 3px;
background-color: #fff;
border-radius: 200px;
transition: 0.3s;
}
.navbar nav ul li:hover span{
width: 100%;
}
.navbar nav ul li a{
font-size: 25px;
font-weight: bold;
text-decoration: none;
color: #fff;
display: block;
}
Output:
Step 3: Create a search icon.
Inside the navbar let's create a search icon right below the unique list (ul tag) inside nav tag. I have created a search icon using CSS. You can simply use images also.
HTML
<div class="box">
<div class="navbar">
<div class="logo_text">Maketechstuff</div>
<nav>
<ul>
<li><a href="#">Home</a><span></span></li>
<li><a href="#">Services</a><span></span></li>
<li><a href="#">About Us</a><span></span></li>
<li><a href="#">Contact Us</a><span></span></li>
</ul>
<div class="search_icon">
<div class="circle"></div>
<div class="line"></div>
</div>
</nav>
</div>
</div>
CSS
nav .search_icon{
width: 35px;
height: 35px;
cursor: pointer;
}
nav .search_icon .circle{
width: 15px;
height: 15px;
background-color: transparent;
border: 4px solid #fff;
border-radius: 200px;
}
nav .search_icon .line{
width: 15px;
height: 4px;
background-color: #fff;
border-radius: 200px;
transform: translate(14px , -3px) rotate(45deg);
}
Output:
Step 4: Create a search bar.
Now after the search icon let's create a search bar. We create a search bar below the search icon.
Also read: How to create search bar desing with filter options using HTML, CSS and JavaScript.
Also read: How to create dynamic placeholder that change value automatic using html, css and javascript.
HTML
<div class="box">
<div class="navbar">
<div class="logo_text">Maketechstuff</div>
<nav>
<ul>
<li><a href="#">Home</a><span></span></li>
<li><a href="#">Services</a><span></span></li>
<li><a href="#">About Us</a><span></span></li>
<li><a href="#">Contact Us</a><span></span></li>
</ul>
<div class="search_icon">
<div class="circle"></div>
<div class="line"></div>
</div>
<div class="search_box">
<form action="#">
<input type="text" placeholder="Search" required>
<button type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
CSS
nav .search_box{
position: absolute;
top: 150px;
right: 50px;
background-color: transparent;
box-shadow: 0px 3px 10px -5px #000;
transition: all 0.4s cubic-bezier(0.150 , -0.100 , 0.500 , 2.5);
}
nav .search_box form{
display: flex;
}
nav .search_box form input{
font-size: 20px;
padding: 5px 10px;
color: #000;
border: none;
outline: none;
}
nav .search_box form button{
font-size: 25px;
font-weight: bold;
padding: 10px 20px;
background: linear-gradient(45deg , #bd62bb , #3542cb);
color: #fff;
border: none;
cursor: pointer;
}
Output:
As you can see the search bar is created. Now let’s hide it. We only want to show and hide this search bar on click on the search icon.
To show and hide the search bar we'll create an class with name active with CSS property of to show the search bar.
We are going to toggle that (active) class through JavaScript when clicking on the search icon. Means when that class is present inside search bar (class="search_box") the search bar is visible and if it's absent the search bar will hides.
So let's first hide the search bar with CSS property opacity: 0 and pointer-events: none;
CSS
nav .search_box{
position: absolute;
top: 150px;
opacity: 0;
pointer-events: none;
right: 50px;
background-color: transparent;
box-shadow: 0px 3px 10px -5px #000;
transition: all 0.4s cubic-bezier(0.150 , -0.100 , 0.500 , 2.5);
}
Output:
As you can see the search bar is hidden.
Now let's create an active class inside CSS file, that shows the search bar when it's added inside the search bar (class="search_box").
CSS
nav .active{
pointer-events: fill;
opacity: 1;
top: 100px;
}
We are going to toggle this active class on click on search icon using JavaScript.
Toggle active class means on click we'll add active class if not present and remove active class if present in search bar (class="search_box").
Means if active present in search bar (lass="search_box") will show and if active class absent from search bar (lass="search_box") then search bar won't show.
Step 5: Add javascript for show and hide functionality of search bar.
Add javascript to show and hide the search bar when the user clicks on the search icon.
We are going to toggle the class (.active) inside the search bar (class="search_box") that shows and hides the search bar.
By toggle method. When a user clicks on the search icon, if the search box has an active class then it will be removed, and if it has no active class then it will be added.
If an active class is present inside search bar (class="search_box") then only the search bar is visible otherwise it will hide.
JavaScript
let search_box = document.querySelector(".search_box");
let search_icon = document.querySelector(".search_icon");
search_icon.onclick = function(){
search_box.classList.toggle("active");
}
Now when the user clicks on the search icon, if the search bar is hidden then it will appear or visible and if visible then it hides. Means if the search bar has no active class, then it will be added and if it has an active class then it will be removed.
That’s it, see above youtube video for demo.
You may like:
- How to create a responsive navigation menu using HTML, CSS and JavaScript.
- How to create search bar using HTML and CSS.
- How to create menu item selection animation using HTML, CSS and JavaScript.
- How to create animated navigation menu using HTML, CSS and JavaScript.
- How to create dynamic hover or menu item selection effects on navigation menu using HTML, CSS and JavaScript.
- How to create a dropdown menu using HTML and CSS.
Final code:
So that’s how you can create a navigation menu with a search bar using HTML, CSS and JavaScript. If you have any questions or suggestions, feel free to write them in the comment section.
Share your thoughts.