Di bawah ini kita akan mempelajari cara membuat form fullscreen search box dengan CSS dan JavaScript.
Form Fullscreen Search
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { font-family: Arial; } * { box-sizing: border-box; } .openBtn { background: #6495ED; border: none; padding: 10px 15px; font-size: 20px; cursor: pointer; } .openBtn:hover { background: #bbb; } .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: 46%; width: 80%; text-align: center; margin-top: 30px; margin: auto; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: white ; } .overlay .closebtn:hover { color: #ddd; } .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: #7FFFD4; font-size: 17px; border: none; cursor: pointer; } .overlay button:hover { background: #bbb; } </style> </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>Fullscreen Search</h2> <p>Klik button di bawah ini untuk membuka search box.</p> <button class="openBtn" onclick="openSearch()">Buka Search Box</button> <script> function openSearch() { document.getElementById("myOverlay").style.display = "block"; } function closeSearch() { document.getElementById("myOverlay").style.display = "none"; } </script> </body> </html>
Cara Membuat Fullscreen Search
Langkah 1) Tambahkan HTML:
Contoh
<div id="myOverlay" class="overlay"> <span class="closebtn" onclick="closeSearch()" title="Close Overlay">x</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>
Langkah 2) Tambahkan CSS:
Contoh
/* Efek overlay dengan latar belakang hitam */ .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); /* Hitam dengan sedikit tembus pandang */ } /* konten */ .overlay-content { position: relative; top: 46%; width: 80%; text-align: center; margin-top: 30px; margin: auto; } /* Close button */ .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: white; } .overlay .closebtn:hover { color: #ccc; } /* Style untuk field search */ .overlay input[type=text] { padding: 15px; font-size: 17px; border: none; float: left; width: 80%; background: white; } .overlay input[type=text]:hover { background: #f1f1f1; } /* Style untuk submit button */ .overlay button { float: left; width: 20%; padding: 15px; background: #ddd; font-size: 17px; border: none; cursor: pointer; } .overlay button:hover { background: #bbb; }
Langkah 3) Tambahkan JavaScript:
Gunakan JavaScript untuk mengaktifkan dan menonaktifkan efek overlay / layar penuh:
Contoh
// Buka full screen search box function openSearch() { document.getElementById("myOverlay").style.display = "block"; } // Tutup the full screen search box function closeSearch() { document.getElementById("myOverlay").style.display = "none"; }