スマホでよく見るボタンを押したら上から出てくるメニュー
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; }