Membuat Tampilan Search Menjadi Fullscreen Saat Di Klik

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas tentang cara Membuat Tampilan Search Menjadi Fullscreen Saat Di Klik. Oke Langsung saja teman-teman bisa membuat struktur htmlnya, seperti pada script di bawah ini ya teman-teman.

man bisa membuat struktur htmlnya, seperti pada script di bawah ini ya teman-teman. 
<!DOCTYPE html>
<html>
<head>
    <title>Membuat Tampilan Search Menjadi Fullscreen Saat Di Klik</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div id="myOverlay" class="overlay">
      <span class="closebtn" onclick="closeSearch()" title="Close Overlay">X</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>Membuat Tampilan Search Menjadi Fullscreen Saat Di Klik</h2>
    <p>Klik button untuk membuka tampilan search</p>
    <button class="openBtn" onclick="openSearch()">Open Search</button>
</body>
</html>

Nah, setelah selesai membuat struktur htmlnya maka selanjutnya kita buat styles cssnya untuk Membuat Tampilan Search Menjadi Fullscreen Saat Di Klik. Berikut script cssnya ya teman-teman.

<style>
        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;
        }
</style>

Oke teman-teman, jika sudah buat cssnya, langkah terakhir kita buat javascriptnya untuk menampilkan fullscreen searchnya, seperti pada script di bawah ini ya teman-teman.

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

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

Jika teman-teman buka di tampilan browsernya maka akan tampak seperti pada gambar di bawah ini.

Demikian artikel tentang cara Membuat Tampilan Search Menjadi Fullscreen Saat Di Klik. Semoga bermanfaat dan selamat mencoba ya teman-teman.

Membuat Tampilan Search Menjadi Fullscreen Saat Di Klik

Kategori