jQuery でスライドしつつ隠れるサイドバー

jQuery で右にスライドしながら隠れるサイドバーを実装。
元ネタはこちら
jQuery の強力なエフェクト機能を使えば、こんなのも簡単にプログラミングできちゃいます。


こんな感じの構造の HTML を対象に作成します。

 :

<div id="content">
コンテンツ
  :
 float:left
 width:80%
  :
</div>
<div id="sidebar">
サイドバー
  :
 float:right
 width:20%
  :
</div>

 :

ソースはこんな感じ

// スライド用ボタンの画像ファイルパス
var slide_button_active = 'slide-button-active.gif'
var slide_button        = 'slide-button.gif'

// スライド用ボタンの作成と click イベントの追加
var slide_button = $('<img id="slide_button" src="' + slide_button_active + '" border="0" />').click( function() {
 if ($('#sidebar').css('display') == 'none') {
  // サイドバーが隠れていたら、コンテンツ部分を狭くした後、サイドバーを左側にスライドしながら表示
  $('#content').animate({width:'80%'}, 'normal', function(){$('#sidebar').animate({opacity:'show', width:'show'}, 'normal', function(){$('#slide_button').attr('src', slide_button_active);});});
 } else {
  // サイドバーが表示されていたら、サイドバーを右側にスライドしながら隠した後、コンテンツ部分を広く表示
  $('#sidebar').animate({opacity:'hide', width:'hide'}, 'normal', function(){$('#content').animate({width:'98%'}, 'normal', function(){$('#slide_button').attr('src', slide_button);});});
 }
});

// スライド用ボタンをサイドバー脇に表示
$('<div style="float:right;width:2%;overflow:hidden;"></div>').append(slide_button).insertAfter($('#sidebar').css('width', '18%'));

これだけで、クリックするとサイドバーを右側にスライドしながら隠してからコンテンツ部分を広く表示、もう一度クリックするとコンテンツ部分を狭くしてからサイドバーを左側にスライドしながら表示させることができるようになります。
jQuery って便利ですね 😛

デモは、このページのサイドバー部分にある「sidebar」と言う画像をクリックすると見ることができます。

jQuery でスライドしつつ隠れるサイドバー」への1件のフィードバック

  1. ピンバック: straighten » links for 2008-01-13

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください