Javascript 带有css的动画搜索栏_Javascript_Jquery_Html_Css

Javascript 带有css的动画搜索栏

javascript jquery html css

Javascript 带有css的动画搜索栏,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在处理css搜索字段。你想帮我做点什么。如果您访问演示页面，您将看到搜索按钮前面有一个菜单。搜索栏已打开。我想留在前面菜单的底部这是在JSFIDLE中 HTML代码： <div class="b_t_menu3"> <div class="b_search"> <form method="get" class="search-form" action="http://www.google.com/search" target="top"> &

我正在处理css搜索字段。你想帮我做点什么。如果您访问演示页面，您将看到搜索按钮前面有一个菜单。搜索栏已打开。我想留在前面菜单的底部

这是在JSFIDLE中

HTML代码：

<div class="b_t_menu3">
  <div class="b_search">
    <form method="get" class="search-form" action="http://www.google.com/search" target="top">
<input name="sitesearch" value="beben-koben.blogspot.com" type="hidden">
<input type="search" class="search-field" placeholder="Search &hellip;" value="" name="q" title="Search for..." />
<input type="submit" class="search-submit" value="Search" />
</form>
  </div>       
  <div class="b_invitation"><a href="#">Menu</a></div>

        </div>

.b_t_menu3 {
    float:left;
    width:259px;
    height:35px;
    margin-left:2px;
  border:1px solid #000;
}
.b_invitation {
    float:left;
    width:auto;
    height:35px;
    margin-left:12px;
  positon:absolute;

    }
.b_invitation a{
    color:#545454;
    font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
    text-decoration:none;
    line-height:35px;
    font-size:11px;

    }
.b_search {
 float:left;
  width:35px;
  height:35px;

}
.search-form .search-submit {
    display: none;
}
input[type="search"] {
    -webkit-appearance: textfield;
    width: 0;
}
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
.search-form {

    right: 10px;
    top: 0px;
}
.search-field {
    background-color: transparent;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABXUlEQVRIid2VMW4CMRBFTWsK5v+ZIlvBEZIWOAHcCcItkoI+6baHgosAKWgCV0jkFNgSIsLsLoqQMpK7r3l/Z+y/zt2jAAxJmaiiVMU2npKUCYBB48YiIqqcmzHkjirnIiK1mpPsm2F9bIK9GWcAxt77wntfABiZ8dmMn1GzJtmv1BxAxwyb6G4pIr3MV3ZVuUgQAJ2rgDQWVS6dc60KnloJosr5NfeD6OaQc35eItKLowwAhheFpEzj8mZVm6cy48yMgZTpRZEqyuhiVBcQFx9UUeYAWzOGdrv9UBfgvS8iYJsDfJgxeO+L5gDucoA0onFdAIBxvCCriyJSJrcvGS85F+ma7htc04MqvkTkKSu+5aGZ4a2KG0k5FKOim9GeRAVDBTPHimG3OQu70e+wO77e01MZAqBzLa5V8W2Gd+ecawSJoLMfDndmWJnhVUQeT7WNIXXqf0H+rPnd6gc2Q5KYa5pwPgAAAABJRU5ErkJggg==);
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: none;
    cursor: pointer;
    width: 0;
    height: 35px;
    margin: 0px 0;
    padding: 0 0 0 35px;

    -webkit-transition: width 400ms ease, background 400ms ease;
    transition: width 400ms ease, background 400ms ease;
}
.search-field:focus {
    background-color: #fff;
    border: 2px solid #ccc;
    cursor: text;
    outline: 0;
    width: 230px;
}

<div class="b_t_menu3">
  <div class="b_search">
    <form method="get" class="search-form" action="http://www.google.com/search" target="top">
<input name="sitesearch" value="Site içi arama" type="hidden">
<input type="search" class="search-field" placeholder="Search &hellip;" value="" name="q" title="Search for..." />
<input type="submit" class="search-submit" value="Search" />
</form>
  </div>       
  <div class="b_invitation"><a href="#">Menu</a></div>

        </div>

.b_t_menu3 {
    float:left;
    width:259px;
    height:35px;
    margin-left:2px;
  border:1px solid #000;
}
.b_invitation {
    float:left;
    width:auto;
    height:35px;
    margin-left:52px;
  z-index:-3;
    }
.b_invitation a{
    color:#545454;
    font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
    text-decoration:none;
    line-height:35px;
    font-size:11px;
    }

.b_search {
 float:left;
  width:auto;
  height:35px;
  background-color:#fff;
  position:absolute;
}
.search-form .search-submit {
    display: none;
}
input[type="search"] {
    -webkit-appearance: textfield;
    width: 0;
}
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
.search-form {

    right: 10px;
    top: 0px;
}
.search-field {
    background-color: transparent;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABXUlEQVRIid2VMW4CMRBFTWsK5v+ZIlvBEZIWOAHcCcItkoI+6baHgosAKWgCV0jkFNgSIsLsLoqQMpK7r3l/Z+y/zt2jAAxJmaiiVMU2npKUCYBB48YiIqqcmzHkjirnIiK1mpPsm2F9bIK9GWcAxt77wntfABiZ8dmMn1GzJtmv1BxAxwyb6G4pIr3MV3ZVuUgQAJ2rgDQWVS6dc60KnloJosr5NfeD6OaQc35eItKLowwAhheFpEzj8mZVm6cy48yMgZTpRZEqyuhiVBcQFx9UUeYAWzOGdrv9UBfgvS8iYJsDfJgxeO+L5gDucoA0onFdAIBxvCCriyJSJrcvGS85F+ma7htc04MqvkTkKSu+5aGZ4a2KG0k5FKOim9GeRAVDBTPHimG3OQu70e+wO77e01MZAqBzLa5V8W2Gd+ecawSJoLMfDndmWJnhVUQeT7WNIXXqf0H+rPnd6gc2Q5KYa5pwPgAAAABJRU5ErkJggg==);
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: none;
    cursor: pointer;
    width: 0;
    height: 35px;
    margin: 0px 0;
    padding: 0 0 0 35px;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition: width 400ms ease, background 400ms ease;

}
.search-field:focus {
    background-color: #fff;
    border: 2px solid #ccc;
    cursor: text;
    outline: 0;
    width: 259px;
}

那是你想要的吗？只需退出“b_邀请”div和remote

float

CSS属性。

我解决了我的问题，我想做一个动画搜索引擎。我想让它成为流行音乐，因为空间有限。流行搜索引擎前面有一个菜单。当我点击搜索后，搜索引擎上的菜单我想留下来。我从来没有试过。解决了这个问题。如果有帮助，我想和你分享

这是我的教程演示。 HTML代码：

<div class="b_t_menu3">
  <div class="b_search">
    <form method="get" class="search-form" action="http://www.google.com/search" target="top">
<input name="sitesearch" value="beben-koben.blogspot.com" type="hidden">
<input type="search" class="search-field" placeholder="Search &hellip;" value="" name="q" title="Search for..." />
<input type="submit" class="search-submit" value="Search" />
</form>
  </div>       
  <div class="b_invitation"><a href="#">Menu</a></div>

        </div>

.b_t_menu3 {
    float:left;
    width:259px;
    height:35px;
    margin-left:2px;
  border:1px solid #000;
}
.b_invitation {
    float:left;
    width:auto;
    height:35px;
    margin-left:12px;
  positon:absolute;

    }
.b_invitation a{
    color:#545454;
    font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
    text-decoration:none;
    line-height:35px;
    font-size:11px;

    }
.b_search {
 float:left;
  width:35px;
  height:35px;

}
.search-form .search-submit {
    display: none;
}
input[type="search"] {
    -webkit-appearance: textfield;
    width: 0;
}
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
.search-form {

    right: 10px;
    top: 0px;
}
.search-field {
    background-color: transparent;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABXUlEQVRIid2VMW4CMRBFTWsK5v+ZIlvBEZIWOAHcCcItkoI+6baHgosAKWgCV0jkFNgSIsLsLoqQMpK7r3l/Z+y/zt2jAAxJmaiiVMU2npKUCYBB48YiIqqcmzHkjirnIiK1mpPsm2F9bIK9GWcAxt77wntfABiZ8dmMn1GzJtmv1BxAxwyb6G4pIr3MV3ZVuUgQAJ2rgDQWVS6dc60KnloJosr5NfeD6OaQc35eItKLowwAhheFpEzj8mZVm6cy48yMgZTpRZEqyuhiVBcQFx9UUeYAWzOGdrv9UBfgvS8iYJsDfJgxeO+L5gDucoA0onFdAIBxvCCriyJSJrcvGS85F+ma7htc04MqvkTkKSu+5aGZ4a2KG0k5FKOim9GeRAVDBTPHimG3OQu70e+wO77e01MZAqBzLa5V8W2Gd+ecawSJoLMfDndmWJnhVUQeT7WNIXXqf0H+rPnd6gc2Q5KYa5pwPgAAAABJRU5ErkJggg==);
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: none;
    cursor: pointer;
    width: 0;
    height: 35px;
    margin: 0px 0;
    padding: 0 0 0 35px;

    -webkit-transition: width 400ms ease, background 400ms ease;
    transition: width 400ms ease, background 400ms ease;
}
.search-field:focus {
    background-color: #fff;
    border: 2px solid #ccc;
    cursor: text;
    outline: 0;
    width: 230px;
}

<div class="b_t_menu3">
  <div class="b_search">
    <form method="get" class="search-form" action="http://www.google.com/search" target="top">
<input name="sitesearch" value="Site içi arama" type="hidden">
<input type="search" class="search-field" placeholder="Search &hellip;" value="" name="q" title="Search for..." />
<input type="submit" class="search-submit" value="Search" />
</form>
  </div>       
  <div class="b_invitation"><a href="#">Menu</a></div>

        </div>

.b_t_menu3 {
    float:left;
    width:259px;
    height:35px;
    margin-left:2px;
  border:1px solid #000;
}
.b_invitation {
    float:left;
    width:auto;
    height:35px;
    margin-left:52px;
  z-index:-3;
    }
.b_invitation a{
    color:#545454;
    font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
    text-decoration:none;
    line-height:35px;
    font-size:11px;
    }

.b_search {
 float:left;
  width:auto;
  height:35px;
  background-color:#fff;
  position:absolute;
}
.search-form .search-submit {
    display: none;
}
input[type="search"] {
    -webkit-appearance: textfield;
    width: 0;
}
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
.search-form {

    right: 10px;
    top: 0px;
}
.search-field {
    background-color: transparent;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABXUlEQVRIid2VMW4CMRBFTWsK5v+ZIlvBEZIWOAHcCcItkoI+6baHgosAKWgCV0jkFNgSIsLsLoqQMpK7r3l/Z+y/zt2jAAxJmaiiVMU2npKUCYBB48YiIqqcmzHkjirnIiK1mpPsm2F9bIK9GWcAxt77wntfABiZ8dmMn1GzJtmv1BxAxwyb6G4pIr3MV3ZVuUgQAJ2rgDQWVS6dc60KnloJosr5NfeD6OaQc35eItKLowwAhheFpEzj8mZVm6cy48yMgZTpRZEqyuhiVBcQFx9UUeYAWzOGdrv9UBfgvS8iYJsDfJgxeO+L5gDucoA0onFdAIBxvCCriyJSJrcvGS85F+ma7htc04MqvkTkKSu+5aGZ4a2KG0k5FKOim9GeRAVDBTPHimG3OQu70e+wO77e01MZAqBzLa5V8W2Gd+ecawSJoLMfDndmWJnhVUQeT7WNIXXqf0H+rPnd6gc2Q5KYa5pwPgAAAABJRU5ErkJggg==);
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: none;
    cursor: pointer;
    width: 0;
    height: 35px;
    margin: 0px 0;
    padding: 0 0 0 35px;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition: width 400ms ease, background 400ms ease;

}
.search-field:focus {
    background-color: #fff;
    border: 2px solid #ccc;
    cursor: text;
    outline: 0;
    width: 259px;
}

那个演示页面没有为我加载任何东西…@JamieBarker@JamieBarker我更新了链接亲爱的谢谢reply@JamieBarker亲爱的，你能检查一下这张照片吗。我将展示我想为我的英语而学习的东西，所以我不理解你的要求，你能简单地画出来吗？请检查此图片菜单将保留在文本区域下方