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

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

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

Я хочу, чтобы скользящий 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

См. также:  нечетная ошибка компоновщика при создании программы: "множественное определение `fnames'; src/main.o:(.data.rel.local+0x0): сначала определено здесь'
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 3
  1. LiveEn

    Вы должны установить абсолютную позицию и оставить доступной кнопку переключения.

      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

  2. LiveEn

    Свойство 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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: