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

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

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

  1. Александр Мальцев
    Александр Мальцев
    21.02.2016, 15:30
    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.