検索フォームにフォーカスしたときに、人気キーワードなど表示させるメニューの作り方です。
検索フォームのフォーカスが外れた時の動作はメニュー内のリンク以外などをクリックした場合にメニューを閉じるように設定してあります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="search-area"> <input type="text" id="SearchInput" placeholder="フリーワード検索"> <input type="submit" name="submit" value="検索" id="SearchButton"> <!--フォームにフォーカスした時に表示されるメニュー--> <figure class="keyword" style="display: block;"> <figcaption>人気キーワード</figcaption> <ul class="clear"> <li><a href="#">・人気キーワード</a></li> <li><a href="#">・人気キーワード</a></li> <li><a href="#">・人気キーワード</a></li> </ul> </figure> </ul> |
■CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.search-area { position: relative; } input#SearchInput { width: 420px; height: 36px; box-sizing: border-box; border-radius: 5px; padding-right: 4em; padding-left: 3px; } #SearchButton { position: absolute; right: 12px; top: 0; bottom: 0; background-position: center; width: 24px; height: 24px; display: block; margin: auto; padding: 0 !important; } |
■jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(function(){ $('input#SearchInput').focus(function(){ $('.keyword').show(); }) $(".keyword,.keyword *").click(function(e){ e.stopPropagation(); }); $("html, body, body *").click(function(e){ if($(this).attr("id") === "SearchInput"){ e.stopPropagation(); } if(!$(this).hasClass("search-area") && !$(this).hasClass("keyword") && !$(this).is(".keyword *") && $(this).attr("id") !== "SearchInput"){ $('.keyword').hide(); } }); }); </script> |
コメント