As you know there are many websites available on the Internet, where you will get to learn something that will help you a lot in future, so the same website also includes the learndesigntutorial.com website, so you must bookmark this website. Because in the future, many of my articles are coming in such a way that will help you a lot in your career, and if you have any questions and doubts from people, then they can share with me, then whenever I get time, I will definitely write articles and videos on it. will make.
So now let’s talk about expanding the search box i.e. Transforming a navigation bar into a search form using jQuery. So come, friends, many people get into a lot of problems when it comes to doing some such functionalities (Cart side menu, mega menu, product slider, etc.), Come then, and today I have come up with a solution to one of the same problems and you will be able to do it very easily. If you have some such doubts in your mind then you can tell that I will definitely try to solve them.
First of all, let me tell you that I have used FontAwesome and jQuery in it, then I am giving it below in its link, you can copy it or you can also take it by visiting its official website. And it is very important for you to add this link, if you do not attach this link then this functionality will not work.
Do you want to practice more jquery then also see this
- Fixed sticky header when scrolling using jQuery | Fixed Navbar on Scroll | Sticky Header on Scroll
- Light/Dark Mode Toggle Switch using html,css and Jquery
- Interactive menu animation using Html,CSS & JQuery Greensock
- Fullscreen Navigation Menu | Toggle Menu | Change image on hover Using HTML,CSS & GSAP-GreenSock JS
- Landing Page Design, Mouse scroll slider, Infinite text scrolling, Sidebar menu HTML, CSS & JQUERY
Now our work starts from here, so first of all you have to set the structure in HTML, for this you have to copy the HTML basic structure and paste it into your index.html file. I have already attached the link of FontAwesome and jQuery inside this code. After this we are going to use an internal style in it, so for this, I have created a style tag inside head tag, in which code of normalize(also called normalize CSS) is written inside, then we will write style from below it.
Then after this, the tag of a nav has been taken, then there are four divs inside it, which I have named logo, menu, icon-search, search-form, now after that the div named logo, inside it, you have to enter the img tag. To add the logo (I have just created the logo using the h1 tag), after that the div of the menu is added to the navigation menu in the structure of the ul li inside it (Home, About, Services, Works, Contact), After that, in the div named icon-search, the icon of search has been added using fontawesome (if you want more information about fontawesome then you can visit its official website), after that in the last search-form name I have taken the form tag inside it and I have taken the field of input type search inside it. And we will call this div display:none; Will keep
Now let’s talk about CSS, I have given its code below, you have to copy that code and paste it in the style tag inside the head tag. In this, I have given basic style to the class of nav like background-color, padding, width. After that, the class of logo and menu was given float left so that they both come to one side and the class of icon-search was given float right. Set the search-form class to display: none; is given and the position is set to absolute. Because we were able to move in a flexible way. After that in menu ul li display: inline-block; margin-right: 35px; It is written because all the menus should come horizontally in one line, then wrote the basic style to the icon-search class. Then after that, I have given CSS transition to .icon-search i because when we are going to rotate(css rotate property) it with the help of jQuery then for its smoothness. The search-form input was given a simple style, its screenshot I have attached below, you can see.
Transform navigation bar into a search form(expanding search box) screenshot, will look like this.
In the screenshot you see above, there is an input type search key field and on the right side there is a close icon, on which you click, then this search box will be closed. Then again if you click on the search icon then it will open again.
Now let’s talk about jquery, I have written the code below, you have to copy it and add it to your index.html file by creating a tag named script at the end of the body. One more thing that if you are writing any code of jquery then you must attach its link otherwise the code will not work.
First of all, I have taken onclick function in it, and in this function, I have targeted .icon-search i.e. click on .icon-search then the code inside it will work. Then inside this function, the .search-form is fadedToggle() i.e. when you click it will fade in, and when you click back it will fade out. Then below it .fa-search is toggleClass (targeted fa-times in toggleClass) and inside it is jquery CSS key in which “transform”, “rotate(0deg)” property is used. Then in .fa-times the CSS property is used in which “transform”, “rotate(180deg)” is given. (In the shot, i.e. “transform”, “rotate(180deg)” when .fa-search has a class of fa-times and “transform”, “rotate(0deg)” when fa-times does not have a class ). If you do not understand, then you can understand by looking at the code below.
Transform a navigation bar into a search form(expanding search box) code
Friends, I have attached the complete code above by embedding it in the file of jsfiddle, you can see all the code in it, copy it, and also see the preview. You can also copy all the code in one file and if you want, you can also create a separate file style and script, it is up to you how you want to use it.
I have also made a video of this article, if you want, you can also watch it and if you want to see more such helpful videos, then definitely subscribe to learndesign youtube channel and also share it with your friends. I hope that you must have got to learn something from this article and it would have been very helpful too, if you have any doubt in your mind then you can tell by commenting below. Thank you for reading this article.