コピペOK！スマホもPCも多階層メニュー | フリーランスライフスタイルマガジン

多階層メニュー

簡単多階層メニュー。jQueryでtoggleを使って簡単メニューです。地名などの表示や中に画像入れたりしてもいいかもです。コンテンツに使えそう。flexの中の要素のcssで幅を指定してしまっています。あんまりよくないかも…。
display:none;なので「ページ遷移せずにその場でちょこっと説明用」に。

大メニュー

中メニュー
- 小メニュー
  - さらに細かいメニュー
- 小メニュー
  - さらに細かいメニュー

大メニュー

中メニュー
- 小メニュー
  - さらに細かいメニュー
- 小メニュー
  - さらに細かいメニュー

大メニュー

中メニュー
- 小メニュー
  - さらに細かいメニュー
- 小メニュー
  - さらに細かいメニュー

大メニュー

中メニュー
- 小メニュー
  - さらに細かいメニュー
- 小メニュー
  - さらに細かいメニュー

.contens_wrap{
 width:100%;
 margin:0 auto;
}
.chiiki_menu_flex{
 display: flex;
 display: -webkit-box;
 display: -webkit-flex;
 flex-wrap: wrap;
 -webkit-flex-wrap: wrap;
 justify-content: space-between;
 -webkit-box-pack: space-between;
 -webkit-justify-content: space-between;
}
.chiiki_menu{
 width: 50%;
 margin-bottom: 5px;
 } 
.chiiki_menu p {
 padding: 15px 0;
 text-align: center;
 border: #ccc 1px solid;
 background-color:#fff;
 box-sizing: border-box;
 font-weight: bold;
 font-size: 18px;
 letter-spacing:2px;
}
.chiiki_menu ul {
display:none;
width: 100%;
margin: 0 auto;
background: #333333;
padding: 8px 5px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 0 0 5px 5px;
text-decoration: none;
color: #fff;
}
.chiiki_menu ul a{
 text-decoration:none;
 color: #fff;
}
.chiiki_menu ul li ul{
 display: none;
 width: 90%;
 margin: 0 auto;
 background: #fff;
 margin-top: 5px;
 margin-bottom: 5px;
 color: #333;
}
.chiiki_menu ul li ul li ul{
 display: none;
 width: 90%;
 margin: 0 auto;
 background: #333333;
 border-radius: 5px;
}
.chiiki_menu li {
 text-align: center;
 margin: 0 2px;
display: block;
}
.chiiki_menu li ul li{
 text-align: center;
 padding: 5px 0;
 width: 100%;
 display: inline-block;
}


<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(function () {
// 親
$('p').click(function() {
 $(this).next('ul').slideToggle('fast');
 });

 // 子
$('li').click(function(e) {
$(this).children('ul').slideToggle('fast');
e.stopPropagation();
});
});
</script>
</head>

<div class="contens_wrap">
<div class="chiiki_menu_flex">
<div class="chiiki_menu">
 <p>大メニュー</p>
<ul>
<li class="bold">中メニュー
<ul>
<li>小メニュー
<ul>
<li><a href="#">さらに細かいメニュー</a></li>
</ul>
</li>
<li>小メニュー
<ul>
<li><a href="#">さらに細かいメニュー</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
 <div class="chiiki_menu">
 <p>大メニュー</p>
<ul>
<li class="bold">中メニュー
<ul>
<li>小メニュー
<ul>
<li><a href="#">さらに細かいメニュー</a></li>
</ul>
</li>
<li>小メニュー
<ul>
<li><a href="#">さらに細かいメニュー</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="chiiki_menu">
 <p>大メニュー</p>
<ul>
<li class="bold">中メニュー
<ul>
<li>小メニュー
<ul>
<li><a href="#">さらに細かいメニュー</a></li>
</ul>
</li>
<li>小メニュー
<ul>
<li><a href="#">さらに細かいメニュー</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="chiiki_menu">
 <p>大メニュー</p>
<ul>
<li class="bold">中メニュー
<ul>
<li>小メニュー
<ul>
<li><a href="#">さらに細かいメニュー</a></li>
</ul>
</li>
<li>小メニュー
<ul>
<li><a href="#">さらに細かいメニュー</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
    
</div>

</body>
</html>

いらないCSSもあるかも知れないので運用の際は注意してください！

参考元はこちら～！
参考サイト超簡単jQuery！toggle系メソッドでアコーディオンメニューやタブをさくっと実装する方法