Kembali lagi dengan saya temen-temen. Pada artikel kali ini saya akan membagikan kode lengkap dan sederhana bagaimana cara membuat Elegan Search Box (Form Pencarian) menggunakan HTML, CSS dan Jquery versi #2.

Kode ini sangat sederhana sekali namun sudah memiliki fitur yang sangat elegan, keren dan modern. Di sini untuk text editornya saya menggunakan Visual Studio Code serta Firefox sebagai browsernya.

Tampilan Search Box #2

Berikut untuk script lengkapnya dan jika ada yang belum jelas bisa menonton videonya di atas.

index.html

/index.html
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Elegan Search Box #2</title>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="assets/css/style.css" />
  </head>
  <body>
    <div id="header">
      <h1>Elegan Search Box #2</h1>

      <div class="content-search">
        <i class="fa fa-search icon-search"></i>
        <div class="box-search">
          <input type="text" class="inp-search" placeholder="kata kunci" />
          <button class="btn-search">
            <i class="fa fa-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="assets/js/script.js"></script>
  </body>
</html>

style.css

/assets/css/style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

#header {
  background: #212121;
  color: #fff;
  height: 60px;
  padding: 0 28px;
}

#header h1 {
  line-height: 60px;
}

.content-search,
.icon-search {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  transition: 0.4s linear;
}

.box-search {
  background: #212121;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s linear;
  transition-delay: 0.5s;
}

.icon-search {
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  font-size: 16px;
}

.icon-search:hover {
  transform: scale(1.1);
}

.content-search.active {
  background: #b71c1c;
  position: fixed;
  width: 100%;
  height: 100vh;
}

.content-search.active .box-search {
  opacity: 1;
  width: 360px;
  height: 60px;
  border: 2px solid #fff;
  border-radius: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.inp-search {
  border: 0;
  width: 100%;
  height: 100%;
  background: none;
  padding: 0 30px;
  color: #fff;
  outline: none;
}

.inp-search::placeholder {
  color: #fff;
}

.btn-search {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 100%;
  background: none;
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  transform: rotate(45deg);
  opacity: 0;
  transition: 0.3s linear;
}

script.js

/assets/js/script.js
$(".icon-search").click(function() {
  $(this).toggleClass("fa-times");
  $(".content-search").toggleClass("active");
});

$(".inp-search").keyup(function() {
  if ($(this).val() != "") {
    $(".btn-search").css("opacity", 1);
    $(".btn-search").css("transform", "rotate(0deg)");
  } else {
    $(".btn-search").css("opacity", 0);
    $(".btn-search").css("transform", "rotate(45deg)");
  }
});

Semoga Bermanfaat …