سلام دوستان من ی سرچ باکسی ساختم که با کلیک باز و بسته میشه
اما میخوام به سمت راست باز شه چیکار باید بکنم؟
درود. وقت بخیر
اون بخش کدی که مربوط به این سراچ باکس هست رو اینجا قرار بدید تا راهنماییتون کنیم
به ترتیب js css html
<div id="sb-search" class="sb-search " >
<form>
<input class="sb-search-input " onkeyup="buttonUp();" placeholder="جستجو کنید" onblur="monkey();" type="search" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"><i class="fa fa-search"></i></span>
</form>
</div>
.sb-search {
position: relative;
width: 0%;
min-width: 47px;
height: 47px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility-: hidden;
border-radius:12px;
}
.sb-search-input {
border-radius:12px;
position: absolute;
top: 0;
right: 10px;
border: none;
outline: none;
background: #2020201f;
width: 100%;
height: 60px;
margin: 0;
z-index: 10;
padding: 10px 65px 20px 20px;
font-family: inherit;
font-size: 16px;
color: black;
}
input[type="search"].sb-search-input {
-webkit-appearance-: none;
-webkit-border-radius-: 0px;
}
.sb-search-input::-webkit-input-placeholder {
color: black;
}
.sb-search-input:-moz-placeholder {
color: black;
}
.sb-search-input::-moz-placeholder {
color: black;
}
.sb-search-input:-ms-input-placeholder {
color: black;
}
.sb-icon-search,
.sb-search-submit {
border-radius:12px;
width: 47px;
height: 47px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 50px;
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;
color:red;
border: none;
outline: none;
z-index: -1;
}
@keyframes btnhover{
0% {transform: rotate(0deg);}
25% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
75% {transform: rotate(-10deg);}
100% {transform: rotate(0deg);}
}
.sb-icon-search {
color: white;
background: #1565c0;
z-index: 90;
font-size: 18px;
font-family: 'icomoon';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search .fa-search:hover{
animation: btnhover 2s;
}
.sb-icon-search:before {
content: "";
}
.sb-search.sb-search-open,
.no-js .sb-search {
width: 180px;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #1565c0;
color: white;
z-index: 11;
}
function buttonUp() {
var valux = $(".sb-search-input").val();
valux = $.trim(valux).length;
if (valux !== 0) {
$(".sb-search-submit").css("z-index", "99");
} else {
$(".sb-search-input").val("");
$(".sb-search-submit").css("z-index", "-999");
}
}
$(document).ready(function () {
var submitIcon = $(".sb-icon-search");
var submitInput = $(".sb-search-input");
var searchBox = $(".sb-search");
var isOpen = false;
$(document).mouseup(function () {
if (isOpen == true) {
submitInput.val("");
$(".sb-search-submit").css("z-index", "-999");
submitIcon.click();
}
});
submitIcon.mouseup(function () {
return false;
});
searchBox.mouseup(function () {
return false;
});
submitIcon.click(function () {
if (isOpen == false) {
searchBox.addClass("sb-search-open");
isOpen = true;
} else {
searchBox.removeClass("sb-search-open");
isOpen = false;
}
});
});
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟