帶有css的動畫搜索欄

Question

我正在使用css搜索字段。你想幫助我的東西。如果您訪問演示頁面，您會在搜索按鈕前看到一個菜單。搜索欄打開。我想留在最前面的菜單。

這是DEMO PAGE中的jsfiddle

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> 

和CSS代碼：

.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; 
} 

Answer 1

我解決了我的答案我想製作動畫搜索引擎。我想讓它成爲流行音樂，因爲空間有限。在流行搜索引擎前有一個菜單。 當我點擊搜索後，菜單上的搜索引擎我想留下來。我從來沒有嘗試過。照顧這個問題。如果有幫助，我想和你分享。

這是我的教程演示。 JSfiddle 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="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> 

CSS代碼：

.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; 
} 

Answer 2

是你想要的嗎？剛剛離開「b_invitation」div和遠程float CSS的屬性。 http://jsfiddle.net/f62Zj/1/