0

検索ボタン付きの検索ボックスを作成しましたが、http: //prntscr.com/tijo4のようなアニメーション (トグルなど) で検索ボタンをクリックした場合にのみ検索ボックスが表示されるようにしたい、ウェブサイト: http ://thenextweb.com/ .

私はこれだけを試しました: http://jsfiddle.net/JHdzd

HTML:

    <div id="search">
        <input title="Search for..." id="forsearch" type="text" class="forsearch_products">
        <input class="search-button" type="submit" value="Search">
    </div>

CSS:

#search {
    width: 250px;
    height: 28px;
    background-color: #C7D7E8;
    padding: 6px 0 6px 0px;
}

input#forsearch.forsearch_products {
    width: 135px;
    height: 18px;
    border: 2px solid #6B9DD3;
    margin: 0 3px 0 8px;
    float: left;
    padding: 3px;
}

input.search-button {
    width: 85px;
    height: 28px;
    border: 1px solid white;
    font-size: 12px;
    display: block;
    float: left;
    font-weight: bold;
    color: white;
    background: rgb(237,173,113); 
}
4

2 に答える 2

1

jQueryを使用すると、これは非常に簡単です。このコードを使用すると、検索ボタンをクリックすると、検索ボックス（最初は非表示になるように調整しました）がフェードインします。

$("#search").click(function(){
    $("#forsearch").fadeIn(1000);
})

このフィドルをチェックして、実際の動作を確認してください。また、検索ボックスの位置を右に固定するように調整しました（スタイルの変更を削除すると理由がわかりますが、最初は検索ボックスを非表示のままにしておきます）。このページをチェックして、jQueryエフェクトの詳細を確認することもできます。

于 2013-02-20T22:05:26.277 に答える
0 
input[type="search"] {
     background: url("http://www.dreamtemplate.com/dreamcodes/web_icons/gray-classic-search-icon.png") no-repeat scroll 5px 50% #ffffff;
     border-radius: 4px;
     border: 1px solid #f1f1f1;
     color: transparent;
     cursor: pointer;
     font-family: Verdana,Geneva,sans-serif;
     font-size: 14px;
     padding: 12px 5px 12px 22px;
     transition: all 0.3s ease 0s;
     width: 22px;
}

デモを見るhttp://cssdesk.com/Gsedv

于 2014-06-26T10:04:06.033 に答える