× İletişim Formu Hareketli jQuery Destekli Arama Kutusu Arlina Design 7/26/2017 Etiketler : Blogger jQuery Arlina Design <!DOCTYPE html> <html> <head> <style type='text/css'> /*<![CDATA[*/ @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:20px} label#search-label{cursor:pointer} label#search-label svg{width:24px;height:24px} label#search-label svg path{fill:#666} div#searchcontainer div{padding:5px;color:#efefef;text-align:center} div#searchcontainer form{opacity:0;-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0);-webkit-transition:all .5s 0s;transition:all .5s 0s} div#searchcontainer form input[type="text"]{width:100%;top:0;left:0;z-index:99;padding:10px;border:none;border-bottom:4px solid #222;outline:none;font-size:3em;background:#fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} html.opensearch div#searchcontainer{position:fixed;top:0;width:100%;height:100%;left:0;opacity:1;-webkit-transform:scale(1) translate3d(0,0,0);transform:scale(1) translate3d(0,0,0);-webkit-transition:-webkit-transform .5s,opacity .5s,left 0s 0s;transition:transform .5s,opacity .5s,left 0s 0s;z-index:9999} html.opensearch div#searchcontainer .search_wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;padding:10% 5% 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} html.opensearch div#searchcontainer:before{content:"";background:rgba(0,0,0,.7);position:absolute;top:0;left:0;width:100%;height:100%;z-index:1} html.opensearch div#searchcontainer form{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);transition:all .5s .5s} /*]]>*/ </style> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> </head> <body> <label id="search-label" title="Search"> <svg viewBox="0 0 24 24"> <path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /> </svg> </label> <div id="searchcontainer"> <div class="search_wrapper"> <form id="search" action='/search' method='get'> <input name='max-results' type='hidden' value='8'/> <input type="text" name="search-terms" id="search-terms" placeholder="Aranacak kelime..."> <div>Arama Yapmak İçin Enter'a Basın</div> </form> </div> </div> <script type='text/javascript'> //<![CDATA[ var fixedsearchbox=function(e){var n,o,t,a=e(document.documentElement),r=null!=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),s=r?"touchstart":"click",c=100,i=27,u={init:function(){n=e("#searchcontainer"),o=e("#search-terms"),t=e("#search-label"),t.on(s,function(e){n.css("top","px"),a.toggleClass("opensearch"),a.hasClass("opensearch")?(n.css("zIndex",c++),o.focus()):o.blur(),e.preventDefault(),e.stopPropagation()}),o.on(s,function(e){e.stopPropagation()}),e(document).on(s+" keyup",function(e){"keyup"==e.type&&e.keyCode!=i||(a.removeClass("opensearch"),o.blur())})}};return u}(jQuery);fixedsearchbox.init(); //]]> </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Hareketli jQuery Destekli Arama Kutusu" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Hareketli jQuery Destekli Arama Kutusu Arlina Design 7/26/2017 Etiketler : Blogger jQuery Arlina Design <!DOCTYPE html> <html> <head> <style type='text/css'> /*<![CDATA[*/ @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:20px} label#search-label{cursor:pointer} label#search-label svg{width:24px;height:24px} label#search-label svg path{fill:#666} div#searchcontainer div{padding:5px;color:#efefef;text-align:center} div#searchcontainer form{opacity:0;-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0);-webkit-transition:all .5s 0s;transition:all .5s 0s} div#searchcontainer form input[type="text"]{width:100%;top:0;left:0;z-index:99;padding:10px;border:none;border-bottom:4px solid #222;outline:none;font-size:3em;background:#fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} html.opensearch div#searchcontainer{position:fixed;top:0;width:100%;height:100%;left:0;opacity:1;-webkit-transform:scale(1) translate3d(0,0,0);transform:scale(1) translate3d(0,0,0);-webkit-transition:-webkit-transform .5s,opacity .5s,left 0s 0s;transition:transform .5s,opacity .5s,left 0s 0s;z-index:9999} html.opensearch div#searchcontainer .search_wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;padding:10% 5% 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} html.opensearch div#searchcontainer:before{content:"";background:rgba(0,0,0,.7);position:absolute;top:0;left:0;width:100%;height:100%;z-index:1} html.opensearch div#searchcontainer form{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);transition:all .5s .5s} /*]]>*/ </style> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> </head> <body> <label id="search-label" title="Search"> <svg viewBox="0 0 24 24"> <path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /> </svg> </label> <div id="searchcontainer"> <div class="search_wrapper"> <form id="search" action='/search' method='get'> <input name='max-results' type='hidden' value='8'/> <input type="text" name="search-terms" id="search-terms" placeholder="Aranacak kelime..."> <div>Arama Yapmak İçin Enter'a Basın</div> </form> </div> </div> <script type='text/javascript'> //<![CDATA[ var fixedsearchbox=function(e){var n,o,t,a=e(document.documentElement),r=null!=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),s=r?"touchstart":"click",c=100,i=27,u={init:function(){n=e("#searchcontainer"),o=e("#search-terms"),t=e("#search-label"),t.on(s,function(e){n.css("top","px"),a.toggleClass("opensearch"),a.hasClass("opensearch")?(n.css("zIndex",c++),o.focus()):o.blur(),e.preventDefault(),e.stopPropagation()}),o.on(s,function(e){e.stopPropagation()}),e(document).on(s+" keyup",function(e){"keyup"==e.type&&e.keyCode!=i||(a.removeClass("opensearch"),o.blur())})}};return u}(jQuery);fixedsearchbox.init(); //]]> </script> </body> </html>
Yorum Gönder