クリックで上に展開するアコーディオンメニュー【jQuery】

スマホサイトだと一般的なアコーディオンですが、下に出てくるものは多いものの上に出てくるアコーディオンはあまり見ません。
今回はクリックで下から上に展開するアコーディオンメニューを紹介します。

 

 

上に展開するアコーディオンメニュー

下記のコーディをコピペで簡単に実装できます。

 

実装方法

下記のようにhtmlを書きます。
ID名、クラス名は自由に変更ください。

 

<div class="btn">ボタン</div>
<div id="menu">
<ul>
<li><a href="index.html">メニュー</a></li>
<li><a href="index.html">メニュー</a></li>
<li><a href="index.html">メニュー</a></li>
<li><a href="index.html">メニュー</a></li>
<li><a href="index.html">メニュー</a></li>
</ul>
</div>

 

htmlで書いたID名、クラス名に合わせて設定してください。

$(function(){
$("#menu").hide();
$(".btn").click(function(){
$("#menu").slideToggle();
$(this).toggleClass();
});

 

下に固定のメニューなどで使えそうですね。

コメント