GlobalMenuToggle css

.toggle,.close{
  display: none;
}

@media only screen and (max-width: 767px) {
  .menu{
    display: none;
    width: 100%;
  }

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

  .toggle{
    display: block;
    position: relative;
    width: 100%;
  }
  
  .close{
  display: block;
  position: relative;
  width: 100%;
  background: #457B9D;
  }
  
  .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;
  }
}

GlobalMenuToggle html & jQuery

<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" target="_blank">表示名</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 resp = 767;
    if(win > resp){
      $(".menu").show();
    } else {
      $(".menu").hide();
    }
  });
})(jQuery);
</script>