Блог

Я пытаюсь создать базовый макет div и хотел бы использовать обычный javascript или jquery для имитации функциональности на этой страницеhttp://octopress.org/blog/archives

Существует div-оболочка содержимого, левый столбец статьи и правый столбец боковой панели. Между левым и правым разделами также есть узкий div, на который можно нажать, после нажатия он либо закрывает, либо расширяет правую часть div.

Поток страницы…

1) При загрузке страницы правая сторона div должна быть открыта.

2) Как только вы нажмете средний div, он закроет правую часть div и увеличит ширину левой части div, чтобы покрыть пространство левой правой части div. Средний div по-прежнему виден, поэтому вы можете щелкнуть его еще раз, чтобы развернуть div обратно

3) Также, как только вы нажимаете средний div, чтобы свернуть правую часть div, он сворачивает его, но он также помещает содержимое этого div под левую основную колонку div. Как и у правой части div, я думаю, есть значение float: left, поэтому, как только левый div будет расширен, он опустит этот div под левый div

4) При свернутом div с правой стороны вы можете щелкнуть средний div, который теперь охватывает правую боковую границу основной оболочки div, затем он уменьшит размер левого div, чтобы правый div снова встал на место

Это, вероятно, звучит сложнее, чем описать то, что я хочу сделать, если вы все же просмотрите ссылкуhttp://octopress.org/blog/archives / это делает именно то, о чем я говорю.

Я попытался удалить страницу и перестроить только ту часть, которая мне нужна, но безуспешно, я был бы очень признателен за любую помощь в выполнении этого с помощью jquery, а также за то, как сделать css для divs.

Я видел некоторые плагины, которые выполняют аналогичную работу, но не то же самое, пожалуйста, помогите, если можете

Вот несколько снимков экрана разных этапов, которые я выполняю…

Похоже, мне просто нужно, чтобы javascript добавлял и удалял некоторые правила css при нажатии на средний div.

ключ к макету — использовать отрицательный margin на боковой панели.

Вы можете увидеть пример упрощенного макета здесь:

http://jsfiddle.net/9FUQA/

HTML

 <div id="wrapper">
  <div id="content">
    <div class="left_column"></div>
    <div class="right_column"></div>
    <span class="toggle_sidebar"></span>
  </div>
</div>
  

CSS. Сначала вы перемещаете оба столбца и устанавливаете ширину правого столбца и 100%-ное допустимое поле справа, чтобы вывести правый столбец на ту же строку, что и левый столбец.

При сворачивании вы удаляете как значение с плавающей точкой, так и отрицательное поле -справа от правого столбца, и оно попадает в обычный поток блоков.

 #content {
  width:500px;
  margin-right:200px;
  position:relative;
}

.left_column {
  width:100%;
  float:left;

}

.right_column {
  width:160px;
  padding:0 20px;
  margin:0 -100% 0 0;
  float:left;
}

.toggle_sidebar {
  position:absolute;
  top:0;
  bottom:0;
  right:-10px;

}

.collapse .right_column {
  float: none;
  width: auto;
  clear: left;
  margin: 0;
}

.collapse #content {
  margin-right:20px;
}
.collapse .toggle_sidebar {
  right: -20px;
  width: 19px;
}
  

JS

 $(document).ready(function () {
  $('.toggle_sidebar').click(function(event) {
      $('#wrapper').toggleClass('collapse');
  });
}); 
  

Вы можете увидеть пример упрощенного макета здесь:

http://jsfiddle.net/9FUQA/

Загрузите jQuery 1.7…

 $('#left-div').click(function () {
    $('left-div').animate({
        width: 99%,
    }, 5000, function() {
    });
});

$('#right-div').click(function () {
    $('right-div').animate({
        width: 400px,
    }, 5000, function() {
    });
});
  

Что-то в этом роде. Возможно, придется настроить его для вашего css.