「クリックするとにゅっと縦スライドして出てくるメニュー」を作る機会があったのでjQueryで作ってみました。
タブが消えちゃって見にくいですが、javascriptは以下のような感じ。
[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”);
});
});
[/javascript]
最初にスライドさせる要素の高さを取得するので、このコードは下の方、</body>とかの前付近へ。
取得した高さを元にスライドする距離を調整するので、表示する内容が増えても勝手に良い感じになります。たぶん。
WordPress内で使う場合は、”$”を”jQuery”にすれば、wp-include内のjQueryでも動きます。
jQuery、はじめてあれこれやってみたけど、割と手軽に楽しめるので楽しー!