Скольжение div без перемещения соседнего содержимого

08.08.2016Рубрика: ВопросыАвтор: admin

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

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

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

Проверьте скрипку https://jsfiddle.net/livewirerules/tsmpraym/9/.

Ниже то, что я пробовал до сих пор

jQuery(document).ready(function($) {
    $("#side").click(function() {
        $('#slidable').animate({
            width: 'toggle'
        });
    });
})

#menu {
    background-color: green;
    height: 100px;
}

#footer {
    background-color: blue;
    height: 100px;
}

#content {
    background-color: red;
    height: 400px;
}

#side {
    float: left;
    width: 50px;
    height: 50px;
    background: #BBB;
}

.hide {
    display: none;
}

#slidable {
    float: left;
    height: 200px;
    background: #888;
    width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="slidable" class="hide">Foobar</div>
<div id="side">+</div>

<div id="menu">
    the menu
</div>
<div id="content">
    content
</div>

<div id="footer">
    the footer
</div>

Вы можете сделать это, установив абсолютную позицию для скользящего элемента. Проверьте здесь: jsfiddle.net/tsmpraym/12 — person LiveEn schedule 08.08.2016

Post Views: 73

См. также: Vue - переходная группа не работает с разными типами компонентов

3 css css-animations css-position jquery

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

LiveEn 08.08.2016 в 00:00
Вы должны установить абсолютную позицию и оставить доступной кнопку переключения.
```
  jQuery(document).ready(function($) {
    $( "#side" ).click(function() {
     $('#slidable').animate({width: 'toggle'});
     $('#side').toggleClass('keepRight');
      });
  })
```
```
#menu {
  background-color:green;
  height:100px;
}

#footer {
  background-color:blue;
  height:100px;
}

#content {
  background-color:red;
  height:400px;
}
#side{
    float:left;
    width:50px;
    height:50px;
    background:#BBB;
  transition: all .5s;
  transition-timing-function: swing;
}
.keepRight{
  margin-left: 200px;
  transition: all .5s;
  transition-timing-function: swing;
}

.hide{
    display:none;
}

#slidable{
    float:left;
    height:200px;
    background:#888;
    width:200px;
    position: absolute;
}
```
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="slidable"class="hide">Foobar</div>
 <div id="side">+</div>
<div id="menu">
the menu
</div>
<div id="content">
content
</div>
   <div id="footer">
    the footer
    </div>
```
Это немного коряво, кнопка скользит с другой скоростью, чем меню. Попробуйте поместить кнопку в Div меню, задайте ей абсолютное позиционирование и отрицательное правое margin (или отрицательное right положение), чтобы заставить их скользить вместе без необходимости анимировать кнопку отдельно. — person LiveEn; 08.08.2016

@SeanKendle, я знаю. Я просто показал суть решения. Конечно, он будет использовать свой тип перехода и время. Конечно, можно было бы поступить иначе. Главным моментом была абсолютная позиция — person LiveEn; 08.08.2016

Проголосовал за первый ответ на абсолютное позиционирование, хотя и с оговоркой, что другие ответы подходят к анимации кнопки меню более чистым образом, что в любом случае выходит за рамки вопроса ОП. Ваше здоровье! — person LiveEn; 08.08.2016
Ответить
LiveEn 08.08.2016 в 00:00
Свойство CSS position:absolute; будет располагать меню абсолютно поверх других элементов. Таким образом, он не будет повторно отображать содержимое элементов под ним.

https://www.w3schools.com/css/css_positioning.asp

Однако в вашем примере это закроет кнопку, используемую для ее открытия. Вы можете добавить внутреннюю кнопку, чтобы закрыть его.

Я обновил ваш jsfiddle: https://jsfiddle.net/tsmpraym/27/

Внутри div меню вы можете добавить еще одну кнопку закрытия:
```
<div id="slidable"class="hide">Foobar<div id="close">+</div></div>
```
Вы можете добавить к нему те же свойства, добавив его идентификатор (или рефакторинг в общий класс, а не по идентификатору):
```
#side, #close{
  float:left;
  width:50px;
  height:50px;
  background:#BBB;
}
```
Чтобы он свисал сбоку, вы можете сделать его абсолютно позиционированным с отрицательным значением справа:
```
#close {
  position: absolute;
  top:0px;
  right:-50px;
}
```
Кнопка закрытия также должна активировать переключатель:
```
jQuery(document).ready(function($) {
  $('#side').click(function() {
   $('#slidable').animate({width: 'toggle'});
  });
  $('#close').click(function() {
   $('#slidable').animate({width: 'toggle'}); 
  });
});
```
Обычно я позволяю пользователям также щелкнуть в любом другом месте страницы, пока меню открыто, чтобы закрыть его. Кажется, это популярная функция, так как большинство меню следуют этому подходу. Просто предложение! ^_^ — person LiveEn; 08.08.2016

Я думал о том же, когда писал это, и я согласен, это, как правило, хороший подход. Похоже, это одно из решений: stackoverflow.com /вопросы/9992368/ — person LiveEn; 08.08.2016

Обычно я использую событие щелчка на теле, чтобы закрыть меню, и подход e.stopPropagation() к любым элементам, которые я не хочу закрывать меню. Ваше здоровье! — person LiveEn; 08.08.2016
Ответить
LiveEn 08.08.2016 в 23:54

Ответить

Добавить комментарий