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

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

ソースはこんな感じ

// スライド用ボタンの画像ファイルパス
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」と言う画像をクリックすると見ることができます。