[jQuery] Toggleで作るメニュー系

Author Date

1218_img

スマホでよく見るボタンを押したら上から出てくるメニュー

jsを以下のように設置します。
メニューが出現した時にボタンのスタイルを変更したいので.btnにclassをつけるように指定していますが、スタイルを変更しなくていい場合は不要です。

$(function(){
    $(".btn").on("click", function() {
        $(this).toggleClass("active");//出現したときに.btnにclassをつける
    });
 });

htmlの記述例

<div class="btn">メニューボタン</div>
<ul class="nav">
 	<li>メニュー_a</li>
 	<li>メニュー_b</li>
</ul>

スライドで出したい部分をcssで隠します。

ul.nav{
	display: none;
}

下層メニューを折りたためるアコーディオン系

上とよく似ていますが、$(this).next()・・・を記述することで、クリックした次の要素だけ出現させることができます。

$(function(){
    $(".btn_02 dt").on("click", function() {
        $(this).next().slideToggle();//クリックした次の要素を出現させる
        $(this).toggleClass("active");
    });
    
 });

htmlの記述例

<dl class="btn_02 nav_02">
	<dt>メニュー_a</dt>
	<dd>下層メニュー_a</dd>
	<dt>メニュー_b</dt>
	<dd>下層メニュー_b</dd>
</dl>

スライドで出したい部分をcssで隠します。

dl.nav_02 dd{
	display: none;
}

サンプルはこちら