レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。Ver.02

画面サイズが狭くなるとメニューボタンを表示し、ナビゲーションを閉じます。

メニューボタンを押すと画面右側からナビゲーションを全面表示・非表示します。
別バージョンも参考に。レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

[main.js]JavaScript

jQuery(function($){

//sp Menu
$(".Menubtn .open").click(function() {
    $(".Sidenav").animate({
        width: 'toggle'
    }, 300);
    $(this).css("display","none");
    $(".Menubtn .close").css("display","block");
});
$(".Menubtn .close").click(function() {
    $(".Sidenav").animate({
        width: 'toggle'
    }, 300);
    $(this).css("display","none");
    $(".Menubtn .open").css("display","block");
});

//IOS
//visible
$(function() {
var windowWidth = $(window).width();
var x = 740;
$(window).resize(function(){
var ww = $(window).width();
if(windowWidth != ww) {
if(ww >= x) {
$(".Sidenav").css("display","block");
$(".Menubtn ul li").css("display","none");
} else {
$(".Sidenav").css("display","none");
$(".Menubtn ul li.close").css("display","none");
$(".Menubtn ul li.open").css("display","block");
}
windowWidth = ww;
}
});
});
 
  });

HTMl

<div class="Menubtn">
<ul>
  <li class="open"><a href="javascript:void(0)"><span>開く</span><i class="fa fa-bars" aria-hidden="true"></i></a></li>
  <li class="close"><a href="javascript:void(0)"><span>閉まる</span><i class="fa fa-times" aria-hidden="true"></i></a></li>
</ul>
<!-- /.Menubtn --></div>

<div class="Sidenav">
<ul>
<li><a href="">第三階層下層あり</a>
  <ul>
    <li><a href="">第四階層下層あり</a>
      <ul>
        <li><a href="">第五階層タイトル</a></li>
        <li><a href="">第五階層タイトル</a></li>
        <li><a href="">現在地第五階層</a></li>
        <li><a href="">第五階層タイトル</a></li>
      </ul>
    </li>
    <li><a href="">第四階層タイトル</a></li>
    <li><a href="">第四階層タイトル</a></li>
    <li><a href="">第四階層タイトル</a></li>
  </ul>
</li>
<li><a href="">第三階層タイトル</a></li>
<li><a href="">第三階層下層あり</a>
  <ul>
    <li><a href="">第四階層タイトル</a></li>
    <li><a href="">第四階層タイトル</a></li>
    <li><a href="">第四階層タイトル</a></li>
    <li><a href="">第四階層タイトル</a></li>
  </ul>
</li>
<li><a href="">第三階層タイトル</a></li>
<li><a href="">第三階層下層あり</a>
  <ul>
    <li><a href="">第四階層下層あり</a>
      <ul>
        <li><a href="">第五階層タイトル</a></li>
        <li><a href="">第五階層タイトル</a></li>
        <li><a href="">第五階層タイトル</a></li>
        <li><a href="">第五階層タイトル</a></li>
      </ul>
    </li>
    <li><a href="">第四階層タイトル</a></li>
    <li><a href="">第四階層タイトル</a></li>
    <li><a href="">第四階層タイトル</a></li>
  </ul>
</li>
<!--1_end--></ul>
<!-- /.Sidenav --></div>

CSS

/* Menubtn 
-----------------------------------------*/
.Menubtn ul li{
  display: none;
}
@media screen and (max-width: 740px) {
.Menubtn{
  display: block;
}
.Menubtn ul li a span{
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.Menubtn ul li a{
  position: absolute;
  top:20px;
  right: 20px;
  color: #666;
  font-size: 28px;
  z-index: 99;
}
.Menubtn ul li.open{
  display: block;
}
}
/* Sidenav
-----------------------------------------*/
.Sidenav{
  float: left;
 width:200px;
}
@media screen and (max-width: 740px) {
.Sidenav{
  float: none;
 width:100%;
 position: absolute;
 top:0;
 right: 0;
 bottom: 0;
 background-color: #000;
 opacity: 0.9;
 display: none;
 box-sizing:border-box;
}
}

.Sidenav a:link    {color:#000; text-decoration:none;}
.Sidenav a:visited {color:#000; text-decoration:none;}
.Sidenav a:hover   {color:#000; text-decoration:none;}
.Sidenav a:active  {color:#000; text-decoration:none;}

@media screen and (max-width: 740px) {
.Sidenav a:link    {color:#FFF;}
.Sidenav a:visited {color:#FFF;}
.Sidenav a:hover   {color:#FFF;}
.Sidenav a:active  {color:#FFF;}
}
.Sidenav ul li a{
  display: block;
  line-height: 1.3;
  font-size:12px;
  padding:5px 5px 5px 10px;
}
.Sidenav ul li a:hover{
  background-color: #EEE;
}
@media screen and (max-width: 740px) {
.Sidenav ul li a:hover{
  background-color: transparent;
  color:#2196f3;
}
}
.Sidenav ul li a:before{
  margin:0 5px 0 0;
  content: " \f054";
   color:#2196f3;
  font-family: FontAwesome;
}

.Sidenav ul{
  padding:0 0 0 10px;
}
@media screen and (max-width: 740px) {
.Sidenav>ul{
  padding: 80px 10px 50px 10px;
}
}