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

 

14 September 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat