Hidden Search bar | Hidden Search bar html css javascript - codewithrandom

Hidden Search bar | Hidden Search bar html css javascript






Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create a Hidden Search bar. We use HTML & CSS and javascript for this Hidden Search bar. Hope you enjoy our blog so let's start with a basic HTML structure for a Hidden Search bar.

HTML code for Hidden Search bar

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />  
   <link rel="stylesheet" href="style.css" />  
   <title>Hidden Search</title>  
  </head>  
  <body>  
   <div class="search">  
    <input type="text" class="input" placeholder="Search...">  
    <button class="btn">  
     <i class="fas fa-search"></i>  
    </button>  
   </div>  
   <script src="script.js"></script>  
  </body>  
 </html>  
There is all HTML code for the Hidden Search bar. Now, you can see output without CSS, then we write CSS for our Hidden Search bar.
output 
Hidden Search bar | Hidden Search bar html css javascript

CSS Code for Hidden Search bar 

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');  
 * {  
  box-sizing: border-box;  
 }  
 body {  
  background-image: linear-gradient(90deg, #7d5fff, #7158e2);  
  font-family: 'Roboto', sans-serif;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  height: 100vh;  
  overflow: hidden;  
  margin: 0;  
 }  
 .search {  
  position: relative;  
  height: 50px;  
 }  
 .search .input {  
  background-color: #fff;  
  border: 0;  
  font-size: 18px;  
  padding: 15px;  
  height: 50px;  
  width: 50px;  
  transition: width 0.3s ease;  
 }  
 .btn {  
  background-color: #fff;  
  border: 0;  
  cursor: pointer;  
  font-size: 24px;  
  position: absolute;  
  top: 0;  
  left: 0;  
  height: 50px;  
  width: 50px;  
  transition: transform 0.3s ease;  
 }  
 .btn:focus,  
 .input:focus {  
  outline: none;  
 }  
 .search.active .input {  
  width: 200px;  
 }  
 .search.active .btn {  
  transform: translateX(198px);  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output
Hidden Search bar | Hidden Search bar html css javascript

Now add javascript for the open & close search bar!

Javascript code for Hidden Search bar

 const search = document.querySelector('.search')  
 const btn = document.querySelector('.btn')  
 const input = document.querySelector('.input')  
 btn.addEventListener('click', () => {  
   search.classList.toggle('active')  
   input.focus()  
 })  
Final output

Hidden Search bar | Hidden Search bar html css javascript

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Hidden Search bar. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Hidden Search bar using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post