シンプル開閉メニュー .slideToggle();

シンプルな開閉メニューをメモ。

スマートフォンのメニューを開閉させたくてでもシンプルがいいからこんな感じ。

先ずはhtml

[html]</pre>
<div id="nav">
<h3 class="assistive_text">Menu</h3>
<ul>
<li class="menu_1"><a href="#">メニュー1</a></li>
<li class="menu_2"><a href="#">メニュー2</a></li>
<li class="menu_3"><a href="#">メニュー3</a></li>
<li class="menu_4"><a href="#">メニュー4</a></li>
<li class="menu_5"><a href="#">メニュー5</a></li>
<li class="menu_6"><a href="#">メニュー6</a></li>
</ul>
<!– /#nav –></div>
<pre>
[/html]

jsをちょろっと

[js]
jQuery("#global ul").css({
display : "none"
});
jQuery(".assistive_text").click(function(){
jQuery("#global ul:not(:animated)").slideToggle();
});
[/js]

これでOK。
これちょろっとなんだけど、わりと便利 (^^)

念のために:not(:animated)を追加です。スマホで要るかはちゃんと調べてないけど…。調べます。

ネタもと

• .slideToggle() – jQuery API
• slideToggle([speed], [callback]) – jQuery 日本語リファレンス