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

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、はじめてあれこれやってみたけど、割と手軽に楽しめるので楽しー!

新しい記事

過去の記事

jQuery」カテゴリの人気記事

  • jQuery LightBoxプラグイン『prettyPhoto』でURL末尾へハッシュタグ#!prettyPhotoを付加させないようにするメモ 32 views
  • jQuery TOOLS jQueryとjQuery TOOLSを使った横スクロールするスライドショーの作り方 30 views
  • jQueryで配列の値を個別のテキストエリアへ順番に入れていくサンプル 25 views
  • jQueryで作る縦スライドで表示するメニューの作り方 18 views
  • jQuery TOOLS jQuery.toolsで作るマウスカーソルでスライドするスライドショーの作り方 12 views
  • アウトドア&フィッシング ナチュラム

    こちらもどうぞ

  • iTunesで購入した音楽が認証・再生できないときの対処方法
  • セローにフォグランプPIAA MLSE1を付けたのでレビュー
  • Nikonの標準ズームレンズ24-85mmと24-120mmを比較してみる
  • 親指AFするよー D750の親指AF設定方法
  • ハーレーのミッションオイル交換手順