En este artículo, crearemos una barra de búsqueda de pantalla completa usando CSS y JavaScript. Creamos un botón y al hacer clic en el botón mostraremos la barra de búsqueda.
Acercarse :
- Cree un botón y use JavaScript para que el panel de búsqueda pueda alternar.
- Ahora tome un div y establezca su posición fija y las propiedades superior, inferior, izquierda y derecha en cero para que la barra de búsqueda se vuelva fija (no desplazable) y en pantalla completa.
- Establezca su opacidad en algo menor que 1 y mayor que 0 y el color de fondo en negro para que su estilo sea genial.
- Agregue un cuadro de entrada y un botón de icono para cerrar la barra de búsqueda.
Implementación:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://kit.fontawesome.com/2961dbb4cf.js" crossorigin="anonymous">
</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 Seachbox <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"
})
Producción :
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA