Две простых выдвижных панели по клику
Слева и справа
http://s2.uploads.ru/nj7eY.gif

Автор: Deff
Платформа: любая
Демо: http://hostjs-mybb2011.narod.ru/ClickPanel-2.htm

Код:
    <script>function PanelToggleL(a){var b=a.attr('data'),c=a.css('margin-left');a.attr('data',c);a.stop().animate({'margin-left':b},500)}</script>
    <style>
    #left-panel {
      outline:red 1px solid;
      top:300px;
      padding:0;
      margin-left:-280px;
      position:fixed;z-index:1000;
      left: 0px;
    }
    .content-L {
      padding:12px;
      width:236px;
      height:536px;
      margin-left:14px;
      margin-top:18px;
      position:absolute;
      color:#fff;
      background-color:#797979;
     
    }
    </style>
    <div data="0" id="left-panel">
    <div class="content-L">
     f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f
     f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f
     f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f
     f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f
    </div>
    <img id="img-left" src="http://s3.uploads.ru/clft1.png" onclick="PanelToggleL($('#left-panel'))"/>
    </div><!-- Конец Левой Панели -->
     
    <script>function PanelToggleR(a){var b=a.attr('data'),c=a.css('margin-right');a.attr('data',c);a.stop().animate({'margin-right':b},500)}</script>
    <style>
    #right-panel {
      outline:red 1px solid;
      top:300px;
      padding:0;
      margin-right:-280px;
      position:fixed;z-index:1000;
      right:-3px;
    }
    .content-R {
      padding:12px;
      width:236px;
      height:536px;
      margin-left: 47px;
      margin-top:18px;
      position:absolute;
      color:#fff;
      background-color:#797979;
    }
    </style>
    <div data="0" id="right-panel">
    <div class="content-R">
     f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f
     f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f
     f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f
     f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f f
    </div>
    <img id="img-left" src="http://s2.uploads.ru/Eqh2Z.png" onclick="PanelToggleR($('#right-panel'))"/>
    </div><!-- Конец Правой Панели -->


Пояснения
1. Ставим ссылку на свою картинку в тег img (если не нравится текущий вариант)

<img id="img-left" src="http://s2.uploads.ru/Eqh2Z.png" ...

2. Находим строку  margin-left:-280px;

#left-panel {
  outline:red 1px solid;
  top:300px;
  padding:0;
  margin-left:-280px;

И временно заменяем красное - на 0
Синее(отступ от верха) меняем на своё значение
3. Правим и выставляем нужные размеры и смещения

.content-L {
  padding:12px;
  width:236px;
  height:536px;
  margin-left:14px;
  margin-top:18px;

4. В конце настроек вместо 0 в margin-left экспериментально выставляем нужное значение  красным
Значение, примерно, на пару-тройку десяток пиксел больше ширины панели
и убираем строку   outline:red 1px solid;

Для правой панели аналогично настраивается стиль. Но в "#right-panel{" вместо margin-left будем править margin-right