皆さんこんばんわ！バジラですー！
今回はですね、コピペでできるアコーディオンメニューのコードをご紹介したいと思います！！
準備は特にいりませんね！jqueryだけ読み込んでおけばオッケーです！
レスポンシブ対応もしていますので、ほんとにそのまんまコピペで使えまするようになってまする俺って気が利くぜー！
サンプルはこちら！
横並びのメニューで使用する感じですね！「親メニュー」をクリックすると、にゅるっと子メニューが出てくるあれですね！これを作ります。
リスト全体に高さ(height)を指定し、子要素の前後位置(z-index)を前にすることで、メニュー以降のコンテンツの上に子メニューが乗るように設定しました！
サイドバーで使用する際や、縦に並べる場合なんかは、リスト全体に高さを指定しなくてもいいですし、z-indexの設定もいらないかなと思います！ぬるぬる動く感じになりますね！
コードはこう！！
HTML
<ul class="inwrapper">
<li class="nav_menus">
<a href="javascript:void(0)"><span>親メニュー1</span></a>
<ul class="ddmenu">
<li><a href="">子メニュー1-1</a></li>
<li><a href="">子メニュー1-2</a></li>
</ul>
</li>
<li class="nav_menus">
<a href="javascript:void(0)"><span>親メニュー2</span></a>
<ul class="ddmenu">
<li><a href="">子メニュー2-1</a></li>
<li><a href="">子メニュー2-2</a></li>
<li><a href="">子メニュー2-3</a></li>
<li><a href="">子メニュー2-4</a></li>
</ul>
</li>
<li class="nav_menus">
<a href="javascript:void(0)"><span>親メニュー3</span></a>
<ul class="ddmenu">
<li><a href="">子メニュー3-1</a></li>
<li><a href="">子メニュー3-2</a></li>
<li><a href="">子メニュー3-3</a></li>
</ul>
</li>
</ul>js
(function($) {
$(".ddmenu").hide();
$(".nav_menus").click(function () {
$(".nav_menus").not(this).children(".ddmenu").slideUp(300);
$(this).children(".ddmenu").slideToggle()
})
})(jQuery);CSS
/* sp・pcレイアウト */
.inwrapper {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
align-items: flex-start;
list-style-type: none;
}
.nav_menus {
flex: 0 0 100%;
background: #efefef;
a {
display: block;
padding: 10px 15px;
border-bottom: 1px solid #aaa;
color: #333;
text-decoration: none;
}
.ddmenu {
border: 1px solid #efefef;
background: #fff;
list-style-type: none;
}
li {
width: 95%;
border-bottom: 1px solid #aaa;
&:last-child,a {
border-bottom: none;
}
}
}
/* pc時追加レイアウト */
@media screen and (min-width:993px) {
.wrapper {
height: 56px;
gap: 0.5%;
.nav_menus {
flex: 0 0 33%;
display: inline-block;
background: #efefef;
z-index: 999;
a {
border-bottom: none;
}
li {
border-bottom: 1px solid #efefef;
}
}
.ddmenu {
li:last-child {
border-bottom: none;
}
}
}
}サンプルのcssはこちらになりますが、cssは任意のものを使用してくださいね！！
はい！いい感じに下りてきますねー！いいぜいいぜー！THEアコーディオンメニューって感じです！ちょーっとcss周りが長かったのが反省点ですわー。
アコーディオンのポイントとしてはですね、親メニューにjavascript:void(0)をaタグに仕込むことでクリックできなくしているところですかね！
また、親もクリックさせたいよって場合は.click(function ()を.hover(function ()に変えてからaタグにはリンクを差し込んでくださいね！それで行けると思います！
最後に
ハイ今回はアコーディオンメニューのコードをご紹介しました。最近はスマホのメニューくらいしか見なくなりましたねー！時代を感じる一品！って感じです！笑
それでは今回はこの辺で終わりにしようと思います！それではー(^q^)ﾉｼ
