jQueryで作る縦スライドで表示するメニューの作り方

2010/10/02 jQuery

「クリックするとにゅっと縦スライドして出てくるメニュー」を作る機会があったのでjQueryで作ってみました。

タブが消えちゃって見にくいですが、javascriptは以下のような感じ。

//サイドバーの高さを取得
var height = $('div#sidebar').height() * -1;
//ボタン分は残す
height = height + 39;

$("#sidebar").animate({marginTop: height}, 500);
$(document).ready(function() {
$(".sidebar-button").click( function() {
if ($("#sidebar").hasClass("sidebar-open")) {
$("#sidebar").animate({marginTop: height}, 500 );
} else {
$("#sidebar").animate({marginTop: "-2px"}, 500 );
}
$("#sidebar").toggleClass("sidebar-open");
});
});

サンプルページを見る

最初にスライドさせる要素の高さを取得するので、このコードは下の方、</body>とかの前付近へ。
取得した高さを元にスライドする距離を調整するので、表示する内容が増えても勝手に良い感じになります。たぶん。

WordPress内で使う場合は、”$”を”jQuery”にすれば、wp-include内のjQueryでも動きます。

jQuery、はじめてあれこれやってみたけど、割と手軽に楽しめるので楽しー！