In this article, you will learn how to create a full-screen search Bar. Here You will be required to create two divs. One for the overlay container and the other for the overlay content container.
HTML Code: The first step is to create an HTML file. Here we will create the basic structure for the search bar. Here we will also use an icon for the search bar for that we will use the font awesome icon.
Fontawesome Icon CDN Link:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= <link rel="stylesheet" href="style.css"/> <script src="main.js"></script> </head> <body> <div id="myOverlay" class="overlay"> <span class="closebtn" onclick="closeSearch()" title="Close Overlay"> × </span> <div class="overlay-content"> <form action="/action_page.php"> <input type="text" placeholder="Search.." name="search" /> <button type="submit"> <i class="fa fa-search"></i> </button> </form> </div> </div> <h2>neveropen</h2> <h2> Full Screen Search Bar </h2> <button class="openBtn" onclick="openSearch()"> Open Search Box </button> </body> </html> |
CSS Code: Add CSS to the file. We use CSS to give a transition effect and for the design of the search bar. It also used to align the element in the right position.
style.css
* { box-sizing: border-box; } .openBtn { background-color: dodgerblue; border: 2px solid-black; border-radius: 25px; padding: 10px 15px; font-size: 40px; cursor: pointer; } .openBtn:hover { background: green; } .overlay { height: 100%; width: 100%; display: none; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); } .overlay-content { position: relative; top: 50%; width: 80%; text-align: center; margin-top: 30px; margin: auto; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 80px; cursor: pointer; color: white; } .overlay .closebtn:hover { color: blue; } .overlay input[type="text"] { padding: 15px; font-size: 17px; border: none; float: left; width: 80%; background: white; } .overlay input[type="text"]:hover { background: #f1f1f1; } .overlay button { float: left; width: 20%; padding: 15px; background: dodger-blue; font-size: 17px; border: none; cursor: pointer; } .overlay button:hover { background: #bbb; } |
JavaScript Code: Use JavaScript to turn on and off the overlay/full-screen effect.
main.js
// Open the full screen search box function openSearch() { document.getElementById("myOverlay").style.display = "block"; } // Close the full screen search box function closeSearch() { document.getElementById("myOverlay").style.display = "none"; } |
Output: This output is occurred when you will combine above three code sections.
