Responsive Dropdown Menu Bar with Search Field using HTML & CSS

10
Responsive Dropdown Menu Bar with Search Field using only HTML & CSS

Hey friends, today in this blog you’ll learn how to create a Responsive Dropdown Menu Bar with Search Field using only HTML & CSS. You may know, I have shared many videos or blogs related to Navigation Bars. If you still haven’t watched them click here to watch them all now. But still, I haven’t created a video or blog on how to create a Responsive Dropdown Menu Bar with Search Box and our many viewers have requested it multiple times so I decided to create it.

The Dropdown menu is important in web design and without it, your website is incomplete. A dropdown menu (sometimes called a pull-down menu or list) is a horizontal list of options/links that each contain a vertical menu to help visitors find a particular page or post on your website. And, A search box, search field, or search bar is a graphical control element used in every website. Search Box is an input field for a query or search term from the user to search and get related data, content from the database.

In our Dropdown Menu design. there is the navigation bar which contains a logo, navigation links to the left side, and a search icon to the right side. When you hover on the particular link, there is appears the dropdown menu of that hovered link and there is also a sub dropdown menu that also appears on the drop menu hover as you can see in the preview image. After that, there is a search icon, and when you click on this icon, the logo, nav links disappear and the search field appears where you can type queries.

Video Tutorial of Responsive Dropdown Menu Bar with Search Box

In the video, you’ve seen the responsive dropdown menu with a search bar and how I created this using only HTML & CSS. I believe you have understood the codes behind creating this dropdown menu bar because it is a pure CSS program and if you’re a beginner then you can also create this type of design after watching this video tutorial.

To show or hide search bar, I used HTML <input type=”checkbox”> and <label> tags and I used same tags for show or hide menu bar on mobile devices. To make this dropdown menu responsive, I used CSS @media property that’s it.

You might like this:

Responsive Dropdown Menu with Search Bar [Source Code]

To create this program [Dropdown Menu with Search Field]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this Dropdown Menu from the below download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.


Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

That’s all, now you’ve successfully created a Responsive Dropdown Menu Bar with Search Field using only HTML & CSS. If your code not work or you’ve faced any errors/problems then please download the source code files from the given download button. It’s free and a .zip file will be downloaded and you’ve extracted it.

 

Previous articleDrag & Drop or Browse – File upload Feature using HTML CSS & JavaScript
Next articleChat Web Application using PHP with MySQL & JavaScript Ajax
CodingNepal is a blog where we post blogs related to HTML, CSS, JavaScript & PHP along with creative coding stuff.

10 COMMENTS

  1. bro for me the code is not working properly
    the search bar is not showing up and the navigation is not responsive what to do?

    When i try to decrease the size of the window the navigation bar content in vanishing.
    Please help me out with this

LEAVE A REPLY

Please enter your comment!
Please enter your name here