【コピペ】スマホアプリのような『検索メニュー』を実装するカスタマイズ

「食べログ」や「ホットペッパー」、「ぐるなび」などで見る詳細検索メニューを実装してみよう！という記事になります。

カスタマイズ前に詳細設定→headに要素を追加に「fontawesome」と「jquery」を追加しておいてください。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>

それではスマホアプリ風の検索メニューの実装を解説していきます。

完成予想
コピペカスタマイズ
- 解説

完成予想

【コピペ】スマホアプリのような『検索メニュー』を実装するカスタマイズ

コピペカスタマイズ

ヘッダータイトル下に貼り付けてください！

<div class="searchbt">
    <i class="fas fa-search"></i>
</div>

<div class="searchmenus">
    
    <div class="menuyheadrs">
    <i class="fas fa-arrow-left"></i>
    <p>詳細検索</p>
    </div>
    
    <div class="menusearch">
　　　<div class="menuseaxrchbar">
  <div id="original-search-box" class="enuk">
    <form class="formsshd" role="search" action="/search" method="get">
      <input type="text" name="q" class="sfdvgb" value="" placeholder="キーワードを入れて記事を検索" required>
      <input type="submit" value="検索" class="dfdsakeka" />
    </form>
  </div>
</div>

<p>人気のキーワードから探す</p>

<div class="wakumaru clearfix">
    <div class="inmaru"><a href="/">キーワード</a></div>
       <div class="inmaru"><a href="/">キーワード</a></div>
          <div class="inmaru"><a href="/">キーワード</a></div>
             <div class="inmaru"><a href="/">キーワード</a></div>
                <div class="inmaru"><a href="/">キーワード</a></div>
                   <div class="inmaru"><a href="/">キーワード</a></div>
                      <div class="inmaru"><a href="/">キーワード</a></div>
</div>

<p>人気のキーワードから探す</p>
　　　   
<div class="waku clearfix">
<div class="in"><a href="/">キーワード</a></div>
<div class="in"><a href="/">キーワード</a></div>
<div class="in"><a href="/">キーワード</a></div>
<div class="in"><a href="/">キーワード</a></div>
<div class="in"><a href="/">キーワード</a></div>
<div class="in"><a href="/">キーワード</a></div>
</div>

<p>カテゴリーから探す</p>
　　　   
<div class="waku clearfix">
<div class="in"><a href="/">キーワード</a></div>
<div class="in"><a href="/">キーワード</a></div>
<div class="in"><a href="/">キーワード</a></div>
<div class="in"><a href="/">キーワード</a></div>
<div class="in"><a href="/">キーワード</a></div>
<div class="in"><a href="/">キーワード</a></div>
</div>
    
</div>
</div>


<script>

$(function () {
    $('.searchbt i').click(function () {
        $('.searchmenus').fadeIn(500);
    });
});

$(function () {
    $('.searchmenus i').click(function () {
        $('.searchmenus').fadeOut(500);
    });
});

</script>

<style>
        .searchbt i{
    position: absolute;
    top: 20px;
    right: 15px;
    font-size: 17px;
}

    .searchmenus{
display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 20000;
background: #f7f8f9;
    overflow: scroll;
    }
    
    .menuyheadrs {
    background-color: #FFF;
    height: 40px;
    width: 100%;
    text-align: center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e5e6e6;
    position: fixed;
}
    
.menuyheadrs i.fas.fa-arrow-left {
    height: 25px;
    width: 25px;
    position: absolute;
    left: 8px;
    top: 13px;
}

.menuyheadrs p {
    font-size: 15px;
    font-weight: 900;
    line-height: 13px;
}

.menusearch {
    margin-top: 40px;
    padding: 0px 15px 20px 15px;
}

.menuseaxrchbar {
    margin: 0px;
}

input.sfdvgb {
    height: 35px;
    border: 1px solid #e5e6e6;
    text-indent: 10px;
    border-radius: 6px;
    width: 75%;
    font-size: 14px;
}

input.dfdsakeka {
    background-color: #FFF;
    height: 38px;
    width: 22%;
    border: 1px solid #e5e6e6;
    color: #4b545d;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.menusearch p {
    font-size: 13px;
    margin: 20px 0 0px 0px;
}

.waku {
    display: flex;
    flex-wrap: wrap;
        background: #fff;
}
 
.in {
    width: 50%;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #e5e6e6;
}

.in a {
    color: #4b545d;
    text-decoration: none;
    font-size: 13px;
    height: auto;
    display: block;
    padding: 15px;
}

.in:nth-child(3) {
    border-top: none;
    border-bottom: none;
}

.in:nth-child(4) {
    border-top: none;
    border-bottom: none;
}

.in:nth-child(2n+1) {
    border-right: none;
}

.wakumaru {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
}

.inmaru {
    text-align: center;
    border: 1px solid #e5e6e6;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    margin: 0px 5px 5px 0px;
        background: #fff;
}

.inmaru a {
    color: #4b545d;
    text-decoration: none;
    font-size: 13px;
    height: auto;
    display: block;
}
</style>

解説

検索アイコンをタッチしたらフェードインでメニューを表示するようにします。

最初はメニューをdisplay:noneを使って非表示にしておきます。
アイコンをタッチしたらフェードインさせ左矢印アイコンをタッチしたらフェードアウトさせるようにしています。

<style>

.searchmenus {
    display: none;
}

</style>

<script>

$(function () {
    $('.searchbt i').click(function () {
        $('.searchmenus').fadeIn(500);
    });
});

$(function () {
    $('.searchmenus i').click(function () {
        $('.searchmenus').fadeOut(500);
    });
});

</script>