تمدد حقل البحث عن الضغط عليه

بسم الله الرحمن الرحيم
كثير منا شاهد في المواقع العالمية انه عند الضغط على حقل البحث فانه يتمدد ليعطي شكل جميل وجذاب طبعا الكثير منا يريد معرفة كيف يتم ذلك
هذه التقنية يستعمل فيها الjquery  و css3 طبعا يوجد في jquery خاصية تسمي انيميشن
animated هذه الخاصية هي من تقوم بالتمدد حسب المعطيات
للاعلى , للاسفل , لليمين , لليسار
الشرح سيكون مفصلا  مع وجود الكود وتحميله

.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;
}

input[type="search"].sb-search-input {
 -webkit-appearance: none;
 -webkit-border-radius: 0px;
}

.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";
}

/* 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.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;
}

;( function( window ) {
 
 function UISearch( el, options ) { 
  this.el = el;
  this.inputEl = el.querySelector( 'form > input.sb-search-input' );
  this._initEvents();
 }

 UISearch.prototype = {
  _initEvents : function() {
   var self = this,
    initSearchFn = function( ev ) {
     if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
      ev.preventDefault();
      self.open();
     }
     else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
      self.close();
     }
    }

   this.el.addEventListener( 'click', initSearchFn );
   this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
  },
  open : function() {
   classie.add( this.el, 'sb-search-open' );
  },
  close : function() {
   classie.remove( this.el, 'sb-search-open' );
  }
 }

 // add to global namespace
 window.UISearch = UISearch;

} )( window );
;( function( window ) {
 
 function UISearch( el, options ) { 
  this.el = el;
  this.inputEl = el.querySelector( 'form > input.sb-search-input' );
  this._initEvents();
 }

 UISearch.prototype = {
  _initEvents : function() {
   var self = this,
    initSearchFn = function( ev ) {
     ev.stopPropagation();
     
     if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
      ev.preventDefault();
      self.open();
     }
     else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
      self.close();
     }
    }

   this.el.addEventListener( 'click', initSearchFn );
   this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
  },
  open : function() {
   var self = this;
   classie.add( this.el, 'sb-search-open' );
   // close the search input if body is clicked
   var bodyFn = function( ev ) {
    self.close();
    this.removeEventListener( 'click', bodyFn );
   };
   document.addEventListener( 'click', bodyFn );
  },
  close : function() {
   classie.remove( this.el, 'sb-search-open' );
  }
 }

 // add to global namespace
 window.UISearch = UISearch;

} )( window );
;( function( window ) {

 // http://stackoverflow.com/a/11381730/989439
 function mobilecheck() {
  var check = false;
  (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
 }

 // http://www.jonathantneal.com/blog/polyfills-and-prototypes/
 !String.prototype.trim && (String.prototype.trim = function() {
  return this.replace(/^\s+|\s+$/g, '');
 });
 
 function UISearch( el, options ) { 
  this.el = el;
  this.inputEl = el.querySelector( 'form > input.sb-search-input' );
  this._initEvents();
 }

 UISearch.prototype = {
  _initEvents : function() {
   var self = this,
    initSearchFn = function( ev ) {
     ev.stopPropagation();
     // trim its value
     self.inputEl.value = self.inputEl.value.trim();
     
     if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
      ev.preventDefault();
      self.open();
     }
     else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
      self.close();
     }
    }

   this.el.addEventListener( 'click', initSearchFn );
   this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
  },
  open : function() {
   var self = this;
   classie.add( this.el, 'sb-search-open' );
   // focus the input
   if( !mobilecheck() ) {
    this.inputEl.focus();
   }
   // close the search input if body is clicked
   var bodyFn = function( ev ) {
    self.close();
    this.removeEventListener( 'click', bodyFn );
   };
   document.addEventListener( 'click', bodyFn );
  },
  close : function() {
   this.inputEl.blur();
   classie.remove( this.el, 'sb-search-open' );
  }
 }

 // add to global namespace
 window.UISearch = UISearch;

} )( window );
;( function( window ) {
 
 // http://stackoverflow.com/a/11381730/989439
 function mobilecheck() {
  var check = false;
  (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
 }
 
 // http://www.jonathantneal.com/blog/polyfills-and-prototypes/
 !String.prototype.trim && (String.prototype.trim = function() {
  return this.replace(/^\s+|\s+$/g, '');
 });

 function UISearch( el, options ) { 
  this.el = el;
  this.inputEl = el.querySelector( 'form > input.sb-search-input' );
  this._initEvents();
 }

 UISearch.prototype = {
  _initEvents : function() {
   var self = this,
    initSearchFn = function( ev ) {
     ev.stopPropagation();
     // trim its value
     self.inputEl.value = self.inputEl.value.trim();
     
     if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
      ev.preventDefault();
      self.open();
     }
     else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
      ev.preventDefault();
      self.close();
     }
    }

   this.el.addEventListener( 'click', initSearchFn );
   this.el.addEventListener( 'touchstart', initSearchFn );
   this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
   this.inputEl.addEventListener( 'touchstart', function( ev ) { ev.stopPropagation(); } );
  },
  open : function() {
   var self = this;
   classie.add( this.el, 'sb-search-open' );
   // focus the input
   if( !mobilecheck() ) {
    this.inputEl.focus();
   }
   // close the search input if body is clicked
   var bodyFn = function( ev ) {
    self.close();
    this.removeEventListener( 'click', bodyFn );
    this.removeEventListener( 'touchstart', bodyFn );
   };
   document.addEventListener( 'click', bodyFn );
   document.addEventListener( 'touchstart', bodyFn );
  },
  close : function() {
   this.inputEl.blur();
   classie.remove( this.el, 'sb-search-open' );
  }
 }

 // add to global namespace
 window.UISearch = UISearch;

} )( window );
Finally, for browsers that don’t support the addEventListener and removeEventListener we use Jonathan Neal’s EventListener polyfill.
// EventListener | @jon_neal | //github.com/jonathantneal/EventListener
!window.addEventListener && window.Element && (function () {
 function addToPrototype(name, method) {
  Window.prototype[name] = HTMLDocument.prototype[name] = Element.prototype[name] = method;
 }

 var registry = [];

 addToPrototype("addEventListener", function (type, listener) {
  var target = this;

  registry.unshift({
   __listener: function (event) {
    event.currentTarget = target;
    event.pageX = event.clientX + document.documentElement.scrollLeft;
    event.pageY = event.clientY + document.documentElement.scrollTop;
    event.preventDefault = function () { event.returnValue = false };
    event.relatedTarget = event.fromElement || null;
    event.stopPropagation = function () { event.cancelBubble = true };
    event.relatedTarget = event.fromElement || null;
    event.target = event.srcElement || target;
    event.timeStamp = +new Date;

    listener.call(target, event);
   },
   listener: listener,
   target: target,
   type: type
  });

  this.attachEvent("on" + type, registry[0].__listener);
 });

 addToPrototype("removeEventListener", function (type, listener) {
  for (var index = 0, length = registry.length; index < length; ++index) {
   if (registry[index].target == this && registry[index].type == type && registry[index].listener == listener) {
    return this.detachEvent("on" + type, registry.splice(index, 1)[0].__listener);
   }
  }
 });

 addToPrototype("dispatchEvent", function (eventObject) {
  try {
   return this.fireEvent("on" + eventObject.type, eventObject);
  } catch (error) {
   for (var index = 0, length = registry.length; index < length; ++index) {
    if (registry[index].target == this && registry[index].type == eventObject.type) {
     registry[index].call(this, eventObject);
    }
   }
  }
 });
})();

Previous Demo Back to the Codrops Article

Expanding Search Bar Deconstructed A click-to-expand search input

The search bar can be opened on click, it has a fluid width and it's mobile-friendly.

Read the tutorial

معاينة || تحميل