jQueryを使い、検索フォームを開閉式にする方法です。
DEMO
テキストエリアをフォーカスするとテキストエリアが伸び、フォーカスが外れると元に戻ります。
HTML
<form id="searchform"> <div> <input type="text" id="keyword" placeholder="Search" /> <input type="submit" id="submit" value="" /> </div> </form>CSS
* { box-sizing: border-box; } body { background: #40AAEF; } #searchform { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; } #keyword, #submit { background: #0E7AC4; border: none; color: #fff; display: inline-block; line-height: 1.5em; outline: none; padding: 10px; position: absolute; } #keyword { border-radius: 20px; color: #fff; right: 0; width: 40%; } #submit { border-radius: 0 20px 20px 0; cursor: pointer; font-family: "FontAwesome"; right: 0; width: 20%; }高さを揃える
テキストエリア#keywordと検索ボタン#submitの高さを揃えるため、以下の2行を記述しています。
display: inline-block; line-height: 1.5em;テキストエリアの初期状態
フォーカスすると伸びるようにするため、テキストエリア#keywordの初期状態はwidthを40%と短くしています。
jQuery
$(function() { var $keyword = $('#keyword'); $keyword.focus(function() { $(this).animate({ width: '80%' }, 200, 'linear'); }); $keyword.blur(function() { $(this).animate({ width: '40%' }, 200, 'linear'); }); });focus
$keywordがフォーカスされると、$keywordのwidthが40%→80%に変化します。これによってテキストエリアが伸びます。
$keyword.focus(function() { $(this).animate({ width: '80%' }, 200, 'linear'); });blur
$keywordのフォーカスが外れると、$keywordのwidthが80%→40%に変化します。これによってテキストエリアが元の長さに戻ります。
$keyword.blur(function() { $(this).animate({ width: '40%' }, 200, 'linear'); });以上で、を終わります。