Cara Membuat Expanding Search Keren Dengan CSS3 dan Javascript

Expanding Search

Cara Membuat Expanding Search Keren Dengan CSS3 dan Javascript - Expanding search adalah inputan search atau pencarian yang di berikan efek expand ( memanjang atau membesar ) ketika user melakukan suatu aksi pemicu tertentu. expanding search sangat cocok digunakan untuk meminimalkan space pada website karna ketika ia tidak digunakan ia akan mengecil, dan juga dengan teknik ini kita akan lebih mudah dalam merespoinsive input search tersebut hal ini dapat di buat dengan CSS3 dan Javascript. untuk lebih jelansya langsung saja kita membuatnya.

Baca Juga : Cara Membuat Banner Animasi Dengan CSS3 dan HTML5

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Expanding Search kemudian bualah sebuah folder lagi dengan nama css , sekarang untuk mempercantik bentuk inputan serta tombol searchnya buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

/* Search icon by IcoMoon, made with http://icomoon.io/app/ */
@font-face {
 font-family: 'icomoon';
 src:url('../fonts/icomoon/icomoon.eot');
 src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
  url('../fonts/icomoon/icomoon.woff') format('woff'),
  url('../fonts/icomoon/icomoon.ttf') format('truetype'),
  url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

.sb-search {
 position: relative;
 margin-top: 10px;
 width: 0%;
 min-width: 60px;
 height: 60px;
 float: right;
 overflow: hidden;
 -webkit-transition: width 0.3s;
 -moz-transition: width 0.3s;
 transition: width 0.3s;
 -webkit-backface-visibility: hidden;
}

.sb-search-input {
 position: absolute;
 top: 0;
 right: 0;
 border: none;
 outline: none;
 background: #fff;
 width: 100%;
 height: 60px;
 margin: 0;
 z-index: 10;
 padding: 20px 65px 20px 20px;
 font-family: inherit;
 font-size: 20px;
 color: #2c3e50;
}

.sb-search-input::-webkit-input-placeholder {
 color: #efb480;
}

.sb-search-input:-moz-placeholder {
 color: #efb480;
}

.sb-search-input::-moz-placeholder {
 color: #efb480;
}

.sb-search-input:-ms-input-placeholder {
 color: #efb480;
}

.sb-icon-search,
.sb-search-submit  {
 width: 60px;
 height: 60px;
 display: block;
 position: absolute;
 right: 0;
 top: 0;
 padding: 0;
 margin: 0;
 line-height: 60px;
 text-align: center;
 cursor: pointer;
}

.sb-search-submit {
 background: #fff; /* IE needs this */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    opacity: 0;
 color: transparent;
 border: none;
 outline: none;
 z-index: -1;
}

.sb-icon-search {
 color: #fff;
 background: #e67e22;
 z-index: 90;
 font-size: 22px;
 font-family: 'icomoon';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 -webkit-font-smoothing: antialiased;
}

.sb-icon-search:before {
 content: "\e000";
}

/* Open state */
.sb-search.sb-search-open,
.no-js .sb-search {
 width: 100%;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
 background: #da6d0d;
 color: #fff;
 z-index: 11;
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
 z-index: 90;
}

Simpan dalam folder css dengan nama component.css.

Buat sebuah file baru lagi dengan notepad++ ketikan script berikut :

/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
 font-family: 'codropsicons';
 src:url('../fonts/codropsicons/codropsicons.eot');
 src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
  url('../fonts/codropsicons/codropsicons.woff') format('woff'),
  url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
  url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
 font-weight: normal;
 font-style: normal;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
 font-family: 'Lato', Calibri, Arial, sans-serif;
 color: #eaeaea;
 background: #2c3e50;
}

a {
 color: #b4c7da;
 text-decoration: none;
}

a:hover,
a:active {
 color: #fff;
}

/* Header Style */
.main,
.container > header {
 margin: 0 auto;
 padding: 2em;
}

.container > header {
 text-align: center;
 background: rgba(0,0,0,0.01);
}

.container > header h1 {
 font-size: 2.625em;
 line-height: 1.3;
 margin: 0;
 font-weight: 300;
}

.container > header span {
 display: block;
 font-size: 60%;
 color: #e67e22;
 padding: 0 0 0.6em 0.1em;
}

/* Main Content */
.main {
 max-width: 69em;
}

.column {
 float: left;
 width: 50%;
 padding: 0 2em;
 min-height: 300px;
 position: relative;
}

.column:nth-child(2) {
 box-shadow: -1px 0 0 rgba(0,0,0,0.1);
}

.column p {
 font-weight: 300;
 font-size: 2em;
 padding: 0;
 margin: 0;
 text-align: right;
 line-height: 1.5;
}

.column a {
 border: 3px solid #b4c7da;
 padding: 0 15px;
 display: inline-block;
 margin: 20px 0;
}

.column a:hover {
 border-color: #fff;
}

/* To Navigation Style */
.codrops-top {
 background: #566472;
 background: rgba(255, 255, 255, 0.2);
 text-transform: uppercase;
 width: 100%;
 font-size: 0.69em;
 line-height: 2.2;
}

.codrops-top a {
 padding: 0 1em;
 letter-spacing: 0.1em;
 color: #fff;
 display: inline-block;
}

.codrops-top a:hover {
 background: rgba(255,255,255,0.8);
 color: #2c3e50;
}

.codrops-top span.right {
 float: right;
}

.codrops-top span.right a {
 float: left;
 display: block;
}

.codrops-icon:before {
 font-family: 'codropsicons';
 margin: 0 4px;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
 content: "\e001";
}

.codrops-icon-prev:before {
 content: "\e004";
}

@media screen and (max-width: 46.0625em) {
 .column {
  width: 100%;
  min-width: auto;
  min-height: auto;
  padding: 1em; 
 }

 .column p {
  text-align: left;
  font-size: 1.5em;
 }

 .column:nth-child(2) {
  box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
 }
}

@media screen and (max-width: 25em) {

 .codrops-icon span {
  display: none;
 }

}

Simpan dalam folder css dengan nama default.css

Javascript

Buat sebuah folder baru dalam folder Expand Search dengan nama js , sekarang untuk efek expand pada inputan searchnya anda dapat mengunduh javasriptnya disini : Download simpan dalam folder js tersebut.

Font

Buat sebuah folder baru dalam folder Expand Search dengan nama fonts , sekarang untuk font facenya anda dapat mengunduh fontnya disini : Download simpan dalam folder font tersebut

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html lang="en" class="no-js">
 <head>
  <title>Expanding Search Bar</title>
  <link rel="stylesheet" type="text/css" href="css/default.css" />
  <link rel="stylesheet" type="text/css" href="css/component.css" />
  <script src="js/modernizr.custom.js"></script>
 </head>
 <body>
  <div class="container">
   <div class="main clearfix">
    <!-- Optional columns for small components -->
    <div class="column">
     <div id="sb-search" class="sb-search">
      <form>
       <input class="sb-search-input" placeholder="Search..." type="text" value="" name="search" id="search">
       <input class="sb-search-submit" type="submit" value="">
       <span class="sb-icon-search"></span>
      </form>
     </div>
    </div>
   </div>
  </div><!-- /container -->
  <script src="js/classie.js"></script>
  <script src="js/uisearch.js"></script>
  <script>
   new UISearch( document.getElementById( 'sb-search' ) );
  </script>
 </body>
</html>

Simpan dalam folder Expanding Search dengan nama index.html.

Sekarang Expanding Search anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWLOAD