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

    こちらもどうぞ

  • セローの次のタイヤを考える会
  • セローのマフラーをプラナスに変えたよレビュー
  • ハーレーのミッションオイル交換手順
  • セローにフォグランプPIAA MLSE1を付けたのでレビュー
  • Macbook Pro 15インチのおすすめUSB充電器について考えてみた