Search.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "montserrat",sans-serif;
}
header{
height: 60px;
background: #333;
padding: 0 20px;
color: #fff;
}
header h1{
line-height: 60px;
}
.search-screen,.search-icon{
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
transition: .4s linear;
}
.search-icon{
text-align: center;
line-height: 60px !important;
cursor: pointer;
font-size: 18px;
}
.search-icon:hover{
transform: scale(1.1);
}
.search-box{
width: 0;
height: 0;
position: absolute;
overflow: hidden;
opacity: 0;
transition: opacity .3s linear;
transition-delay: .5s;
}
.search-screen.active{
position: fixed;
background: #03a9f4;
width: 100%;
height: 100vh;
}
.search-screen.active .search-box{
opacity: 1;
width: 360px;
height: 50px;
border: 2px solid #fff;
border-radius: 30px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.search-txt{
border: 0;
width: 100%;
height: 100%;
background: none;
padding: 0 30px;
color: #fff;
outline: none;
padding-right: 50px;
}
.search-txt::placeholder{
color: #fff;
}
.search-btn{
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
background: none;
border: 0;
outline: none;
color: #fff;
cursor: pointer;
font-size: 18px;
transform: rotate(45deg);
opacity: 0;
transition: .3s linear;
}
</style>
</head>
<body>
<header>
<h1>Search Box</h1>
<div class="search-screen">
<i class="fas fa-search search-icon"></i>
<div class="search-box">
<input type="text" class="search-txt" placeholder="search">
<button class="search-btn"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</header>
<script type="text/javascript">
$(".search-icon").click(function(){
$(this).toggleClass("fa-times");
$(".search-screen").toggleClass("active");
});
$(".search-txt").keyup(function(){
if($(this).val() != ""){
$(".search-btn").css("opacity",1);
$(".search-btn").css("transform","rotate(0deg)");
}else{
$(".search-btn").css("opacity",0);
$(".search-btn").css("transform","rotate(45deg)");
}
});
</script>
</body>
</html>