JQuery Blog Arama Kutusu

<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body {font-family: 'Fira Sans Condensed', sans-serif;background:ddd;margin:0;padding:0}
#search {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.9);
opacity: 0;
visibility: hidden;
transform: scale(1.2);
transition: all 600ms cubic-bezier(0.23,1,0.32,1);
z-index: 99999;
}
#search.active {
opacity: 1;
visibility: visible;
transform: scale(1);
z-index: 999999;
margin: 0;
}
#search .input {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 95%;
height: 100px;
margin: auto;
max-width: 1100px;
z-index: 93;
border-bottom: 1px dashed rgba(255,255,255,0.15);
}
#search .input .search {
float: left;
width: calc(100% - 100px);
height: 100px;
padding: 0;
margin: 0;
border: 0;
outline: 0;
background: transparent;
font-size: 50px;
color: #ffffff;
font-family:
font-weight: 300;
line-height: 100px;
text-indent: 50px;
transition: all .3s ease-out;
z-index: 9;
}
#search .input .submit {
cursor: pointer;
float: left;
width: 100px;
height: 100px;
padding: 0;
margin: 0;
border: 0;
outline: 0;
background: transparent;
font-size: 40px;
color: #ffcc00;
text-align: center;
line-height: 100px;
transition: all .3s ease-out;
}
#search .input .search:focus {
color: #ffffff;
z-index: 9;
}
#search .input .submit:hover {
color: #dddddd;
z-index: 9;
}
#search #close {
cursor: pointer;
position: absolute;
top: 30px;
right: 30px;
width: 30px;
height: 30px;
padding: 0;
margin: 0;
border: 0;
outline: 0;
background: transparent;
color: #ffffff;
text-align: center;
line-height: 30px;
}
#search #close:hover {
color: #dddddd;
}
.navbar-form {
margin: 6px 0 0;
padding: 0;
position: relative;
}
.navbar-form input[type="text"] {
border: 1px solid rgba(0,0,0,0.1);
padding: 10px;
color: #999999;
font-size: 11px;
font-family: 'Open Sans', sans-serif;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
outline: none;
width: 200px;
margin: 0;
}
.navbar-form.dark input[type="text"] {
background: #333;
border: 1px solid rgba(255, 255, 255, 0.15);
}
@media (max-width: 992px) {
.navbar-form input[type="text"]{
width: 160px;
}
}
.navbar-form button {
background: transparent;
border: none;
position: absolute;
top: 10px;
right: 13px;
padding: 0;
font-size: 13px;
color: #666666;
}
.navbar-form.dark button {
color: #999999;
}
.menu-content {
position: relative;
}
.search-trigger {
float: right!important;
position: absolute;
right: 0;
height: 90px;
padding: 0 15px;
line-height: 90px;
color: #222;
cursor: pointer;
font-size: 15px;
transition: all .3s ease-in-out;
}
.search-trigger:hover {
color: #0a0101;
}
.top-nav-collapse .search-trigger {
height: 60px;
line-height: 60px;
}
@media (max-width: 991px) {
.search-trigger {
display:block;
}
}
</style>
</head>
<body>
<span class='nav-search search-trigger'><i class="fa fa-search"></i></span>
<form action='/search' id='search' role='search'>
<div class='input'>
<input class='search' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Ara...'/>
<button class='submit fa fa-search' type='submit' value=''></button>
</div>
<button id='close' type='reset' value=''><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8HEihZrdsyoVWLU_w4C1-mdoJsIlolVkbrEpkQVi64pO_sBYC-9Qpu36b97ZnbLDSClcnicy2bfGRPozl9iml0FqKzHJllmOHFNiG-sC1kE0OmPFFNxUPGK26bSaa-QkJFwXmwE-sUfU/s1600/close.png'/></button>
</form>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<script>
      //<![CDATA[
      $(function(){
        "use strict";
        //  Search    
        $(".search-trigger").on("click", function() {
          $("#search").addClass("active").find(".search").focus()
        });
        $("#search").on("click", function() {
          $(this).find(".search").focus()
        });
        $("#close").on("click", function() {
          $("#search").removeClass("active")
        });
      });
      //]]>
</script>
</body>
</html>

Kodeks Editör

JQuery Blog Arama Kutusu

"JQuery Blog Arama Kutusu" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

JQuery Blog Arama Kutusu

"JQuery Blog Arama Kutusu" 0 Yorum yapıldı.

Yorum Gönder