使用菜单移动内容答案

【问题标题】：Move content with menu使用菜单移动内容
【发布时间】：2015-10-04 23:37:00
【问题描述】：

我已经为自己制作了一个滑出式菜单，我打算使用它，但我遇到了一些问题，当菜单暴露时，我无法让页面的内容向左移动。菜单与页面上的内容重叠，使其无法阅读，我知道这可能是 JavaScript 问题，但我已尝试寻找解决方案，但未能解决。

JavaScript

$(document).ready(function() {

var slideWidth = $('#pageslide').outerWidth();

$('.slideIt, #pageslide a.close').on("点击", function(){ $('.slideIt').toggleClass('active');

if($('#pageslide').is(':visible')) { 
  $('#pageslide').animate({
    right: '-'+slideWidth
  }, 400, function(){
    $('#pageslide').hide();
  } );
  $('.wrapper').animate({
    marginRight: '0'
  }, 400 );
} 
else{
  $('#pageslide').show().animate({
    right: '0'
  }, 400 );
  $('.wrapper').animate({
    marginRight: slideWidth
  }, 400 );
}

http://jsfiddle.net/ujyj24op/1/

【问题讨论】：

标签： javascript jquery css text menu

【解决方案1】：

遵循代码可能会对您有所帮助。

$(document).ready(function() {

  var slideWidth = $('#pageslide').outerWidth(); //grab width of the sliding menu so that this can be controlled in the css only

  $('.slideIt, #pageslide a.close').on("click", function(){  //click function
    $('.slideIt').toggleClass('active'); //toggle the active close vs open icon
    
    if($('#pageslide').is(':visible')) {  //if visible then hide it 
      $('#pageslide').animate({
        right: '-'+slideWidth
      }, 400, function(){
        $('#pageslide').hide();
      } );
      $('.wrapper, #text').animate({
        marginRight: '0'
      }, 400 );
    } 
    else{                                //else show it
      $('#pageslide').show().animate({
        right: '0'
      }, 400 );
      $('.wrapper, #text').animate({
        marginRight: slideWidth
      }, 400 );
    }
     
  });

});

body{
  background-color:rgb(204,204,204);
}
a{
  display:block;
}
#text{
  position:absolute;
  width:150px;
  top:200px;
  right:100px;
}
.slideItWrapper{
  position:relative;
}
.wrapper{
  position:absolute;
  top:110px;
  right:100px;
}
.menu-item{
  @include transition-property(all);
  @include transition-duration(0.2s);

  display:block;
  width:25px;
  height:1px;
  margin:0 0 7px;
  background:rgba(0,0,0,0.8);
}

#pageslide {
  display:none;
  position:absolute;
  position:fixed;
  top:0;
  overflow:scroll;
  height:100%;
  z-index: 999999;
  width:340px;
 
  background: rgba(255,255,255,0.7);
  right:-340px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="wrapper">
  <a href="#" class="slideIt">
    	<span class="menu-item"></span>
  		<span class="menu-item"></span>
  		<span class="menu-item"></span>
  		</a>
</div>
<aside id="pageslide">
<div id="modal">
  <h3>Menu!</h3>
  <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</div>
</aside>
</div>
<div id="text"><p>hello this is my placeholder text lets see if you move please move beause I will be annoyed if you don't</p></div>

【讨论】：

【解决方案2】：

尝试将#text 部分也添加到要显示的幻灯片功能中。然后，它将将该内容滑到与侧面内容一样多的地方。示例：

 else{                                //else show it
  $('#pageslide, #text').show().animate({
    right: '0'
  }, 400 );
  $('.wrapper, #text').animate({
    marginRight: slideWidth
  }, 400 );
}

然后可以将其修改得更好一些，但会给您一个关于如何做的想法。（一种方式）使用您已有的代码。

【讨论】：