使用菜单移动内容

Question

我已经使自己成为我打算使用的滑出菜单，但是我遇到了一些麻烦，因为当菜单暴露时，无法将页面的内容移动到左侧。菜单与页面上的内容重叠使其无法阅读，我知道这可能是一个JavaScript问题，但我试图寻找解决方案并且已经缩短了。

的JavaScript

$(document).ready(function() { 

变种slideWidth = $（ '＃pageslide'）outerWidth（）;

$（ 'slideIt，#pageslide a。关闭。 '）上（ “点击”，函数（）{ $（' slideIt。 '）toggleClass（' 活动'）;

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/

Answer 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"> 
 
    \t <span class="menu-item"></span> 
 
    \t \t <span class="menu-item"></span> 
 
    \t \t <span class="menu-item"></span> 
 
    \t \t </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>

Answer 2

尝试添加#text节也到幻灯片funtion显示，然后它会在尽可能多的幻灯片将内容侧的内容 例：

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

然后可以稍微修改一下，但会给你一个关于如何去做的想法。 （单程）与你已有的代码。