En este artículo, aprenderá cómo crear una barra de búsqueda de pantalla completa. Aquí se le pedirá que cree dos divs . Uno para el contenedor de superposición y el otro para el contenedor de contenido de superposición.
Código HTML: El primer paso es crear un archivo HTML. Aquí crearemos la estructura básica para la barra de búsqueda. Aquí también usaremos un ícono para la barra de búsqueda para eso usaremos el ícono de fuente impresionante.
Icono de Fontawesome Enlace CDN:
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= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <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>GeeksforGeeks</h2> <h2> Full Screen Search Bar </h2> <button class="openBtn" onclick="openSearch()"> Open Search Box </button> </body> </html>
Código CSS: Agregue CSS al archivo. Usamos CSS para dar un efecto de transición y para el diseño de la barra de búsqueda. También solía alinear el elemento en la posición correcta.
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;
}
Código JavaScript: use JavaScript para activar y desactivar el efecto de superposición/pantalla completa.
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";
}
Salida: esta salida se produce cuando combinará las tres secciones de código anteriores.
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA