Cara Membuat Tampilan Search Fullscreen

Cara Membuat Search Box Fullscreen – Hallo teman-teman, kalian pasti pernah membuat layout kotak pencarian atau biasa kita sebut search box pada sebuah website, biasanya kita akan temukan search box pada halaman website secara langsung, kali ini kita akan coba membuat search box menjadi lebih unik dengan membuatnya menjadi fullscreen.. baiklah sekarang kita perlu membuat layout sederhana seperti berikut.

<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form action="">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>
<h2>Fullscreen Search</h2>
<button class="openBtn" onclick="openSearch()">Open Search Box</button>

Lalu kita akan buat css untuk memanipulasi tampilan search box

body {
    font-family: Arial;
}
* {
    box-sizing: border-box;
}
.openBtn {
    background: #f1f1f1;
    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: #ccc;
}
.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: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
}
.overlay button:hover {
    background: #bbb;
}

Selanjutnya kita akan membuat fungsi popup dengan menggunakan baris kode javascript berikut

function openSearch() {
    document.getElementById("myOverlay").style.display = "block";
}

function closeSearch() {
    document.getElementById("myOverlay").style.display = "none";
}

Dan kali ini kita juga menggunakan font-awesome sebagai icon search dan close.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Baiklah teman – teman, sekarang jika sudah selesai kalian bisa melihatnya di browser, demikian artikel yang membahas tentang cara membuat search box dengan html css dan javascript. Semoga bermanfaat