HatenaSmartPhoneToggle

<div class="navi">
  <div class="toggle"><a href="#">MENU</a></div>
    <ul class="menu">
      <li><a href="リンク先URL">表示名</a></li>
      <li><a href="リンク先URL">表示名</a></li>
      <li><a href="リンク先URL">表示名</a></li>
      <li><a href="リンク先URL">表示名</a></li>
      <li>
      <div class="navi-search">
        <form class="search-form" role="search" action="ブログのURL/search" method="get">
        <input type="text" name="q" class="search-module-input" value="" placeholder="検索" required>
        <input type="submit" value="検索" class="search-module-button" />
        </form>
      </div>
      </li>
      <li class="close">
        <a href="#">close</a>
      </li>
  </ul>
 </div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".toggle").click(function(){
        $(this).next().slideToggle();
    });
    $(".close").click(function(){
        $(this).parent().slideToggle();
            return false;
    });
     $(window).resize (function(){
    var win = $(window).width();
    var si = 467;
    if(win > si){
      $(".menu").show();
    } else {
      $(".menu").hide();
    }
  });
})(jQuery);
</script>

<style type="text/css">

/*トグルメニュー*/
  .navi {
    width: 100%;
    padding:0;
    margin: 0 auto;
    margin-left: -500%;
    margin-right: -500%;
    padding-left: 500%;
    padding-right: 500%;
    filter: alpha(opacity=95);
    -moz-opacity:0.95;opacity:0.95;
    background:#1D3557;
    text-align: center;
  }

  .navi ul{
    padding: 0;
    overflow:hidden;
    list-style-type: none;
    margin: 0 auto;
  }

  .navi li{
    text-align: center;
    width:100%;
    margin: 0;
  }

  .navi li a{
    display: block;
    margin: 0;
    padding: 8px 0;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: 1s ease;
  }

  .navi a:hover{
    color: #fff;
    background:#E63946;
  }

  .navi-search .search-form {
    background-clip: padding-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin: 10px 0;
  }

  .navi-search .search-module-input {
    padding: 5px;
    color: #3D3B49;
    background: none;
    border: none;
    outline: none;
    height: 30px;
    width: 90%;
    font-size: 12px;
    transition: 0.8s ease;
    background: #F1FAEE;
    border: 2px solid #457B9D  ;
  }

  .navi-search .search-module-input:focus {
    border: 2px solid rgba(355,70,90,1)  ;
  }

  .navi-search .search-module-button {
    width: 17px;
    height: 16px;
    background: transparent url(http://blog.hatena.ne.jp/images/theme/search.png) no-repeat right center;
    border: none;
    outline: none;
    text-indent: -9999px;
    position: absolute;
    top: 12px;
    right: 25px;
    opacity: 0.5;
  }
  .navi-search .search-module-button:hover {
    opacity: 0.85;
  }

  .menu{
    display: none;
    width: 100%;
  }

  .menu a:hover{
    background: #ccc;
  }

  .toggle{
    display: block;
    position: relative;
    width: 100%;
  }

    .close{
    width: 100%;
    background: #1D3557;
  }
  .toggle a{
    display: block;
    padding: 12px 0 10px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background:#1D3557;
  }
  .toggle:before{
    position: absolute;
    font-family: "blogicon";
    content: "\f003";
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    color:#fff;
  }
</style>