Как сделать выезжающий блок для сайта

Приветствую всех! Прошу прощения, если этот вопрос уже есть в статьях или уроках. Меня интересует, как сделать, чтобы при нажатии на кнопку в одностраничном сайте, растянутом на весь экран, выезжал контент, например, с галереей или другой информацией. Например, как на этой странице: _http://themehelite.com/themeforest/phly/index-slideshow.html Желательно, чтобы выезжающий блок также работал в браузерах IE 8-10. Всем спасибо.

Комментарии: 1

Александр Мальцев
Александр Мальцев
1. Сделать разметку, состоящую из 2 блоков (левый и правый):
<div class="container-fluid">
  <div class="row">
    <div id="left" class="col-xs-6">
      Левая панель
      <button id="showRight" class="btn btn-default">Открыть панель справа</button>
    </div>
    <div id="right" class="col-xs-6">
      Правая панель
    </div>
  </div>
</div>
2. Написать скрипт, который будет переключать правый блок:
$(function() {
  $('#showRight').click(function(e) {
    if($('#right:visible').length) {
      $('#left').removeClass('col-xs-6');
      $('#left').addClass('col-xs-12');
      $('#right').hide();
    } else {
      $('#left').removeClass('col-xs-12');
      $('#left').addClass('col-xs-6');
      $('#right').show();
    }
  });
});
3. Сделать необходимую анимацию, для этого можно воспользоваться эффектами jQuery UI или velocity js.