عرفان خیرخواه
2 سال پیش توسط عرفان خیرخواه مطرح شد
2 پاسخ

سرچ باکس

سلام دوستان من ی سرچ باکسی ساختم که با کلیک باز و بسته میشه
اما میخوام به سمت راست باز شه چیکار باید بکنم؟

 تصویر


html_css
تگ‌های محبوب
ثبت پرسش جدید
مهدی مشایخی
تخصص : برنامه نویس پایتون - ماشین لرن...
@MahdiMashayekhi 2 سال پیش مطرح شد
0

درود. وقت بخیر
اون بخش کدی که مربوط به این سراچ باکس هست رو اینجا قرار بدید تا راهنماییتون کنیم


عرفان خیرخواه
@Erfkhan 2 سال پیش آپدیت شد
0

به ترتیب 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;
}
});
});

@MahdiMashayekhi


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام