現在地表示をするドロップダウン式サイドナビ

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($){
	//sidenav_current_class
  $(function(){
  var id = $(".mod_section_box_side_nav").attr("id");
  $(".mod_section_box_side_nav ul li."+id).addClass("current");
  });
	
  //sidenav_dropdown
  $(function(){
		var nav = $(".mod_section_box_side_nav");
		var navlink = nav.find("ul li a");
		$(navlink).each(function() {
			if($("+ul",this).size()){
			$(this).addClass("parent");
			}else{
			}
		});
		
		var navlinkbtn = nav.find("ul li a.parent");
		$("+ul",navlinkbtn).css("display","none");
		
		var navlink_current = nav.find("ul li.current");
		$(navlink_current).parents("ul").css("display","block");
		
		
    $(navlinkbtn).click(function(){
      //alert('クリック！');
				if($("+ul",this).css("display")=="none"){
				$("+ul",this).slideDown("fast");
				}else{
				$("+ul",this).slideUp("fast");
				}
				return false;
     });
	});
	
	
	});

HTMl

<!-- 現在地表示のidは↓ココで指定 -->
<div id="pagenum01-01-03" class="mod_section_box_side_nav">
<p class="category"><a href="">第二階層タイトル</a></p>
<ul>
<li class="pagenum01"><a href="">第三階層下層あり</a>
  <ul>
    <li class="pagenum01-01"><a href="">第四階層下層あり</a>
      <ul>
        <li class="pagenum01-01-01"><a href="">第五階層タイトル</a></li>
        <li class="pagenum01-01-02"><a href="">第五階層タイトル</a></li>
        <li class="pagenum01-01-03"><a href="">現在地第五階層</a></li>
        <li class="pagenum01-01-04"><a href="">第五階層タイトル</a></li>
      </ul>
    </li>
    <li class="pagenum01-02"><a href="">第四階層タイトル</a></li>
    <li class="pagenum01-03"><a href="">第四階層タイトル</a></li>
    <li class="pagenum01-04"><a href="">第四階層タイトル</a></li>
  </ul>
</li>
<li class="pagenum02"><a href="">第三階層タイトル</a></li>
<li class="pagenum03"><a href="">第三階層下層あり</a>
  <ul>
    <li class="pagenum03-01"><a href="">第四階層タイトル</a></li>
    <li class="pagenum03-02"><a href="">第四階層タイトル</a></li>
    <li class="pagenum03-03"><a href="">第四階層タイトル</a></li>
    <li class="pagenum03-04"><a href="">第四階層タイトル</a></li>
  </ul>
</li>
<li class="pagenum04"><a href="">第三階層タイトル</a></li>
<li class="pagenum05"><a href="">第三階層下層あり</a>
  <ul>
    <li class="pagenum05-01"><a href="">第四階層下層あり</a>
      <ul>
        <li class="pagenum05-01-01"><a href="">第五階層タイトル</a></li>
        <li class="pagenum05-01-02"><a href="">第五階層タイトル</a></li>
        <li class="pagenum05-01-03"><a href="">第五階層タイトル</a></li>
        <li class="pagenum05-01-04"><a href="">第五階層タイトル</a></li>
      </ul>
    </li>
    <li class="pagenum05-02"><a href="">第四階層タイトル</a></li>
    <li class="pagenum05-03"><a href="">第四階層タイトル</a></li>
    <li class="pagenum05-04"><a href="">第四階層タイトル</a></li>
  </ul>
</li>
<!--1_end--></ul>
<!-- /.mod_section_box_side_nav --></div>

CSS

/* mod_section_box_side_nav
-----------------------------------------*/
.mod_section_box_side_nav{
 width:200px;
  border: solid 1px #2196f3;
  /* border-radius */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.mod_section_box_side_nav  a:link    {color:#000; text-decoration:none;}
.mod_section_box_side_nav  a:visited {color:#000; text-decoration:none;}
.mod_section_box_side_nav  a:hover   {color:#000; text-decoration:none;}
.mod_section_box_side_nav  a:active  {color:#000; text-decoration:none;}
 
.mod_section_box_side_nav p.category{
  display: table;
  margin:0;
  width: 100%;
  font-size: 115%;
}
.mod_section_box_side_nav p.category a{
  text-align: center;
  background-color: #2196f3;
  color: #FFF;
  display: table-cell;
  vertical-align: middle;
  height: 50px;
}
.mod_section_box_side_nav ul li a{
  display: block;
  line-height: 1.3;
}
/* current */
.mod_section_box_side_nav ul li.current>a{
  background-color:#cde9ff;
}
.mod_section_box_side_nav ul li a:hover{
  background-color:#cde9ff;
}
/* 3 */
.mod_section_box_side_nav>ul>li>a{
  font-size: 107%;
  border-top: solid 1px #2196f3;
  padding:16px 5px 14px 15px;
}
.mod_section_box_side_nav>ul>li>a:before{
  margin:0 5px 0 0;
	content: " \f054";
   color:#2196f3;
	font-family: FontAwesome;
}
/* 4 */
.mod_section_box_side_nav>ul>li>ul>li>a{
  border-top: solid 1px #c7c7c7;
  padding: 10px 5px 7px 15px;
  color: #292929;
}
.mod_section_box_side_nav>ul>li>ul>li>a:before{
  margin:0 5px 0 0;
	content: " \f101";
  color:#2196f3;
	font-family: FontAwesome;
}
.mod_section_box_side_nav>ul>li>ul>li:first-child>a{
  border-top: solid 1px #2196f3;
}
/* 5 */
.mod_section_box_side_nav>ul>li>ul>li>ul>li:first-child>a{
  border-top: dotted 1px #a1a1a1;
}
.mod_section_box_side_nav>ul>li>ul>li>ul>li>a{
  padding:10px 5px 6px 18px;
  color: #292929;
}
.mod_section_box_side_nav>ul>li>ul>li>ul>li>a:before{
  margin:0 5px 0 0;
  color:#2196f3;
	content: " \f105";
	font-family: FontAwesome;
}