In this article, we will create a full-screen search bar using CSS and JavaScript. We create a button and on clicking the button we will show the search bar.
Approach :
- Create a button and use JavaScript to make the search panel able to toggle.
- Now take a div and set its position fixed and top, bottom, left, right properties to zero so that the search bar becomes fixed (non – scrollable) and full screen.
- Set its opacity to something less than 1 and greater than 0 and the background color set to black to make its style cool.
- Add an input box and an icon button to close the search bar.
Implementation :
HTML
<!DOCTYPE html> < html >
< head >
< script src =
</ script >
< style >
.myBtn{
height: 42px;
width: 183px;
font-size: 15px;
background: rebeccapurple;
color: white;
font-weight: bold;
border-radius: 36px;
border: none;
cursor: pointer;
outline: none;
box-shadow: 3px 3px 18px 0px #b9b9b9;
transition: 0.3s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.myBtn:hover{
color: black;
background-color: white
}
.myBtn i{
margin-left: 8px
}
.fullScreen{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000d4;
display: none
}
.inputBox{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 2px;
border-radius: 3px;
box-shadow : inset 0 0.25rem 0.125rem 0 rgb(0 0 0 / 5%);
display: flex;
}
.inputBox input{
height: 45px;
width: 270px;
border: none;
outline: none;
font-size: 19px;
color: #4a4a4a;
padding-left: 15px
}
.inputBox button{
border: none;
background-color: transparent;
vertical-align: middle;
cursor: pointer;
transition: 0.5s
}
.inputBox button:hover{
transform: rotate(360deg);
}
.inputBox button i{
font-size: 30px
}
.closeBtn{
height: 30px;
width: 30px;
background-color: white;
border-radius: 16px;
position: absolute;
top: 62px;
right: 42px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</ style >
</ head >
< body >
< button class = "myBtn" >Show Searchbox < span >
< i class = "fas fa-search" ></ i >
</ span ></ button >
< div class = "fullScreen" >
< div class = "inputBox" >
< input type = "text"
placeholder = "Search here..." >
< button type = "submit" >
< i class = "fas fa-arrow-right" ></ i >
</ button >
</ div >
< div class = "closeBtn" >
< i class = "fa fa-close" ></ i >
</ div >
</ div >
< script src = "index.js" ></ script >
</ body >
</ html >
|
Javascript
const btn = document.querySelector( ".myBtn" )
const searchBox = document.querySelector( ".fullScreen" )
const closeBtn = document.querySelector( ".closeBtn" )
closeBtn.addEventListener( "click" , ()=>{
searchBox.style.display = "none"
}) btn.addEventListener( 'click' , ()=>{
searchBox.style.display = "block"
}) |