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

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


   Вопросы 0    345 0

Комментарии (1)

  1. Александр Мальцев # 0
    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.

    Вы должны авторизоваться, чтобы оставлять комментарии.